css一道光闪过动效
展示效果
<div class="box">
slogan
</div>css部分
.box {
position: relative;
width: 183px;
height: 22px;
border-radius: 6px 0 6px 0;
background-color: #005ed9;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
}
.box:after {
position: absolute;
left: -40%;
top: 0;
width: 10px;
height: 100%;
content: "";
background: linear-gradient(to right,
rgba(255, 255, 255, 0) 0,
rgba(255, 255, 255, 0.7) 50%,
rgba(255, 255, 255, 0) 90%);
transform: skewX(45deg);
animation: shine 3s infinite;
}
@keyframes shine {
100% {
left: 100%;
transition: 2s ease;
}
}