button{
background-color: black;
color: #ffffff;
padding: 6px 20px;
padding-right: 26px;
border: none;
}
.load{
height: 2px;
width: 2px;
display: inline-block;
/*box-shadow: 2px 0 0 white ,7px 0 0 white, 12px 0 0 white;*/
animation: change 2.4s infinite steps(1,start);
}
@keyframes change {
25%{
box-shadow: 2px 0 0 white;
}
50%{
box-shadow: 2px 0 0 white ,7px 0 0 white;
}
75%{
box-shadow: 2px 0 0 white ,7px 0 0 white, 12px 0 0 white;
}
}
<html>
<button>
加载
<span class="load"></span>
</button>
</html>
timing-function: steps() 一开始在使用CSS3的时候并没有太注意这个timing-function，只是注意到自定义贝塞尔曲线。
1. 第一个参数指定了时间函数中的间隔数量(必须是正整数)，这个间隔数量作用用于两个关键帧之间.
2. 第二个参数可选，接受 start 和 end 两个值，指定在每个间隔的起点或是终点发生阶跃变化，默认为 end.
我在CSS中设置了1，也就是一步一步动画，而如果不设置，那其实里面就会有多步操作，就会出现影子。复制代码CSS3实现加载小点点动画
最新推荐文章于 2024-07-16 15:32:05 发布
扫一扫
1701
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
