数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何使用CSS创建发光文本？
要使用CSS创建发光文本，请使用`animation`属性。对于动画，我们使用`@keyframes`。`@keyframes`是一个规则，您需要在其中指定CSS样式。将动画绑定到元素才能使其成功工作。
`animation-name`属性用于设置`@keyframes`动画的名称。动画的持续时间使用`animation-duration`属性设置。同样，我们还有以下属性允许在网页上进行动画：
animation
animation-name
animation-duration
animation-delay
animation-iteration-count
animation-direction
animation-timing-function
animation-fill-mode
但是，在这个例子中，我们使用了简写`animation`属性来创建发光文本。
我们设置了以下内容来形成发光文本：
animation: glowing 1s ease-in-out infinite alternate;
缓慢开始和结束的动画
对于发光文本，`animation-timing-function`使用上述简写属性设置，该属性指定缓慢开始和结束的动画：
ease-in-out
无限动画
`animation-iteration-count`属性使用上述简写属性设置，使动画无限期地持续，即永远持续：
infinite
动画方向
`animation-direction`属性用于设置动画是向前播放还是向后播放。备选值建议使用交替循环的动画：
alternate
`@keyframes`规则
上面的动画名称是`glowing`，即`@keyframes`规则：
@-webkit-keyframes glowing {
}
文本阴影
为了在动画规则中获得有吸引力的外观，我们使用了阴影样式，即`text-shadow`属性。`from`和`to`关键字在下面的示例中用于设置开始和结束：
@-webkit-keyframes glowing{
from {
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #4f00b6, 0 0 40px #17057c, 0 0 50px #29c2ff, 0 0 60px #96fbff, 0 0 70px #1f0352;
}
to {
text-shadow: 0 0 20px #fff, 0 0 30px #2b4ebe, 0 0 40px #4276e6, 0 0 50px #4644cf, 0 0 60px #3533d1, 0 0 70px #493cbb, 0 0 80px #8beeff;
}
示例
让我们看看这个例子：
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: rgb(0, 0, 0);
font-family: cursive;
}
.glowing {
font-size: 80px;
color: #fff;
text-align: center;
-webkit-animation: glowing 1s ease-in-out infinite alternate;
-moz-animation: glowing 1s ease-in-out infinite alternate;
animation: glowing 1s ease-in-out infinite alternate;
}
@-webkit-keyframes glowing{
from {
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #4f00b6, 0 0 40px #17057c, 0 0 50px #29c2ff, 0 0 60px #96fbff, 0 0 70px #1f0352;
}
to {
text-shadow: 0 0 20px #fff, 0 0 30px #2b4ebe, 0 0 40px #4276e6, 0 0 50px #4644cf, 0 0 60px #3533d1, 0 0 70px #493cbb, 0 0 80px #8beeff;
}
}
</style>
</head>
<body>
<h1 class="glowing">GLOWING TEXT EXAMPLE</h1>
</body>
</html>
更新于：2023年11月15日
202 次查看
广告