标签：html vertica 效果 nim margin sha 定时器 frame overflow
js定时器方法
//html <div>加载中<span id="dot"></span></div> //js <script> let dotting = function () { let dom = document.getElementById(‘dot‘); let html = dom.innerHTML; if(html.length >= 3){ dom.innerHTML = ‘‘ } else { dom.innerHTML = html + ‘.‘ } } setInterval(dotting, 800) </script>
方法都来自于网上其他博客
css3 anminate方法
方法1:
//html
<div>加载中<span id="dot">...</span></div>
//css
<style>
#dot {
display: inline-block;
width: 1.5em;
vertical-align: bottom;
overflow: hidden;
animation: dotting 3s infinite step-start;
}
@keyframes dotting{
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;}
}
</style>
方法2: 这个方法的好处是可以方便的设置大小
//html
<div>加载中<span id="dot"></span></div>
//css
<style>
#dot{
height: 4px;
width: 4px;
display: inline-block;
border-radius: 2px;
animation: dotting 2.4s infinite step-start;
}
@keyframes dotting {
25%{
box-shadow: 4px 0 0 #000;
}
50%{
box-shadow: 4px 0 0 #000000 ,14px 0 0 #000;
}
75%{
box-shadow: 4px 0 0 #000 ,14px 0 0 #000, 24px 0 0 #000;
}
}
</style>
还有其他很多种方法啦，效果出来就行
标签：html vertica 效果 nim margin sha 定时器 frame overflow
原文地址：https://www.cnblogs.com/Anne3/p/10954609.html
