用用C3中的animation和transform写的一个模仿加载的时动画效果！
不多说直接上代码;
html标签部分
<div class="wrap"> <h2>用C3中的animation和transform写的一个模仿加载的时动画效果</h2> <div class="demo"> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div>
css部分
<style> .demo{ width:200px;height:30px; margin:100px auto; } .demo div{ float:left; width:5px; height:30px; margin-left:5px; } @-webkit-keyframes fluctuation{ 20%{ transform:scaleY(0.5); } 0%,40%,70%,100%{ transform: scaleY(1); } } .demo div:nth-of-type(1){ background:red; animation: fluctuation 1s 0s ease-out infinite; } .demo div:nth-of-type(2){ background:yellow; animation: fluctuation 1s 0.9s ease infinite; } .demo div:nth-of-type(3){ background:blue; animation: fluctuation 1s 0.6s ease infinite; } .demo div:nth-of-type(4){ background:green; animation: fluctuation 1s 0.4s ease infinite; } .demo div:nth-of-type(5){ background:pink; animation: fluctuation 1s 0s ease infinite; } </style>
希望对初学者有点帮助，第一次写博客如有错误或者更好的实现方法欢迎私信。
转载于:https://www.cnblogs.com/Xmb-To/p/5392758.html
