.flow-animation {
position: relative;
width: 300px;
height: 1px;
background-color: rgba(0,0,0,0);
overflow: hidden;
}
.flow-animation::before {
content: "";
position: absolute;
top: -50%;
left: 0;
right: 0;
bottom: -50%;
z-index: 999;
background-color: white;
/* 添加动画效果 */
animation: flowAnimation 5s linear infinite;
}
@keyframes flowAnimation {
0% { transform: rotateY(0deg); }
100% { transform: rotateY(-360deg); }
}
1.从左到右滑动线
@keyframes glowing {
0% {
background-position: 0 0;
}
50% {
background-position: 100% 0;
}
100% {
background-position: 200% 0;
}
}
.element {
background-image: linear-gradient(45deg, rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0));
background-size: 400% 400%;
animation: glowing 5s linear infinite;
animation-direction: alternate;
}
tbc