如图,分享一个带有光效的按钮是如何用css实现的,此图来自王者荣耀官网。
代码
<a href="#" class="download_btn">
<span id="download-btn-ani"></span>
</a>
.download_btn {
position: relative;
height: 128px;
width: 236px;
background-image: url("./img/index.webp");
background-position: 0 -219px;
overflow: hidden; /* 隐藏超出的部分 */
}
#download-btn-ani {
display: block;
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 50px;
background-color: rgba(255, 255, 255, 0.8);
transform: rotate(-45deg);
animation: lightmove 2s infinite linear; /* 动画 */
filter: blur(32px); /* 滤镜 */
}
@keyframes lightmove {
0% {
left: -150px;
top: -120px;
}
100% {
left: 150px;
top: 120px;
}
}
animation
animation允许定义关键帧动画,控制动画的持续时间、速度、次数等。下面是一些常用的animation属性:
- animation-name: 关键帧名称,@keyframes规则创建关键帧
- animation-duration:动画持续时间
- animation-timing-function:动画时间曲线,动画的变化速度。ease(慢速开始、快速结束)、linear(匀速)、ease-in(慢速)等
- animation-delay:延迟时间
- animation-iteration-count:动画重复次数,
1
则执行1次、infinite
无数次 - animation-direction:动画的播放方向。