今天拿到一个需求,要求显示“进行中。。。”,后面的三个点要求做成动画,陆续出现
百度找了好多,终于找到一个靠谱的,代码如下
<div>测试中<span class="ani_dot">...</span></div>
定义动画,因为是3个点,所以在分成3份,0%, 33%, 66%, 100%写上这个时刻的显示
核心就是,两个框,控制外框的宽度显示出几个点,overflow:hidden隐藏滚动条,然后加上margin让整个box的站宽保持一致
@keyframes dot {
0% { width: 0; margin-right: 1.5em; }
33% { width: .5em; margin-right: 1em; }
66% { width: 1em; margin-right: .5em; }
100% { width: 1.5em; margin-right: 0;}
}
.ani_dot {
display: inline-block;
width: 1.5em;
vertical-align: bottom;
overflow: hidden;
font-family: simsun; /*字体很重要*/
animation: dot 3s infinite step-start;
}
本来我在网上搜索到,从上到下的流动,两个元素叠在一起,看上去很流畅的过度,但是试了下用在左右容器会有空位,也在这里记录一下
<div class="father">
<span class="son">...</span>
<span class="son">...</span>
</div>
@keyframes rowup {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-100px);
}
}
.father {
width: 42px;
height: 100px;
overflow: hidden;
}
.son {
width: 20px;
height: 100px;
display: inline-block;
box-sizing: border-box;
animation: 3s rowup linear infinite normal;
}