今天给大家分享一款非常常用的css 加载动画,这款css3 Loading动画主要由几个小球通过规律的上下跳动,渐隐渐显而成,效果十分生动、流畅。兼容IE8以上,尤其适合在移动端中使用,基本代替了图片实现加载的效果。 反弹加载动画效果如下: 代码的实现: <div class="bouncing-loader"> <div></div> <div></div> <div></div> </div> <style> @keyframes bouncing-loader { from { opacity: 1; transform: translateY(0); } to { opacity: 0.1; transform: translateY(-1rem); } } .bouncing-loader { display: flex; justify-content: center; } .bouncing-loader > div { width: 1rem; height: 1rem; margin: 3rem 0.2rem; background: #8385aa; border-radius: 50%; animation: bouncing-loader 0.6s infinite alternate; } .bouncing-loader > div:nth-child(2) { animation-delay: 0.2s; } .bouncing-loader > div:nth-child(3) { animation-delay: 0.4s; } </style> 字由https://www./sites/73248.html 中国字体设计网https://www./sites/73245.html 说明: 注:1rem 通常是16px 。 |
|
来自: 昵称65038308 > 《前端技术CSS/html》