首先创建一个light标签
<div class="light"></div>
<div class="text">我是高亮的文字</div>
.light {
width: 269px;
height: 61px;
position: absolute; // 将class类名light标签定位盖着名字text标签上面
top: -50px;
right: 95px;
&::after {
content: '';
position: absolute;
top: 10px;
left: 0px;
width: 20px;
height: 30px;
background: #fff;
border-radius: 30%;
animation: flow 4s linear infinite; // 滑过的动画
filter: blur(5px); // 模糊程度
// opacity: 0.7;
}
}
// 动画
@keyframes flow {
0% {
left: 0px;
opacity: 0;
}
5% {
opacity: 0.7;
}
/* 80% {
opacity: 0.5;
} */
95% {
opacity: 0.7;
}
100% {
/* background-position: -200%; */
left: 240px;
opacity: 0;
}
}