css3路径发光动画 |首行首列 css

/* 创建路径 */
.path {
position: relative;
width: 500px;
height: 200px;
margin: 0 auto;
padding-top: 50px;
}
.path:before {
content:'';
position: absolute;
top: -10px;
left: 0;
width: 500px;
height: 10px;
background: linear-gradient(to left, #333, #ccc, #333);
transform: rotate(-30deg);
}
/* 发光 */
.path span {
position: relative;
display: inline-block;
padding: 10px 20px;
background: #333;
color: #fff;
box-shadow: inset 0px 0px 20px 0px rgba(255, 255, 255, 0.5);
animation: glow 1s ease-in-out infinite;
}
@keyframes glow {
0% { box-shadow: inset 0px 0px 20px 0px rgba(255, 255, 255, 0.5); }
50% { box-shadow: inset 0px 0px 20px 15px rgba(255, 255, 255, 0); }
100% { box-shadow: inset 0px 0px 20px 0px rgba(255, 255, 255, 0.5); }
}

首先，大家需要创建一个路径的样式。使用“:before”伪元素来创建一个带有渐变背景色的路径。接下来，大家在路径上添加一个文字盒子，并使用“glow”关键帧动画使其发光。

关键帧动画中，“glow”表示这个动画的名称。在动画中，大家会从0%开始，即没有发光，然后在50%的时间内逐渐发光，最终在100%的时间内回到没有发光的状态。其中，“box-shadow”属性表示发光的效果，可以根据需要调整参数，如颜色、大小和透明度等。

最后，大家只需要将动画应用到需要发光的文字盒子上，即可实现这种华丽的路径发光动画。