☀️ 前言
相信大家经常会使用到加载动画，但是大部分组件库的加载样式都太简洁了👻。
这次给前端工友们收集了10+个高逼格加载动画效果！！复制就能直接用！！😎
⛷️ 来吧展示
1、一个"音浪"加载
1个元素缩放很简陋，那15个会发生什么？
<!-- loading.html --> <div class="loader"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div> 复制代码
/* loading.css */ .loader { position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; margin: auto; width: 175px; height: 100px; } .loader span { display: block; background: #e04960; width: 7px; height: 100%; border-radius: 14px; margin-right: 5px; float: left; } .loader span:last-child { margin-right: 0px; } .loader span:nth-child(1) { animation: load 2.5s 1.4s infinite linear; } .loader span:nth-child(2) { animation: load 2.5s 1.2s infinite linear; } .loader span:nth-child(3) { animation: load 2.5s 1s infinite linear; } .loader span:nth-child(4) { animation: load 2.5s 0.8s infinite linear; } .loader span:nth-child(5) { animation: load 2.5s 0.6s infinite linear; } .loader span:nth-child(6) { animation: load 2.5s 0.4s infinite linear; } .loader span:nth-child(7) { animation: load 2.5s 0.2s infinite linear; } .loader span:nth-child(8) { animation: load 2.5s 0s infinite linear; } .loader span:nth-child(9) { animation: load 2.5s 0.2s infinite linear; } .loader span:nth-child(10) { animation: load 2.5s 0.4s infinite linear; } .loader span:nth-child(11) { animation: load 2.5s 0.6s infinite linear; } .loader span:nth-child(12) { animation: load 2.5s 0.8s infinite linear; } .loader span:nth-child(13) { animation: load 2.5s 1s infinite linear; } .loader span:nth-child(14) { animation: load 2.5s 1.2s infinite linear; } .loader span:nth-child(15) { animation: load 2.5s 1.4s infinite linear; } @keyframes load { 0% { background: #531430; transform: scaleY(0.08); } 50% { background: #e04960; transform: scaleY(1); } 100% { background: #531430; transform: scaleY(0.08); } } 复制代码
Author：Dicson
2、一个"声浪"加载
元素透明度与高度的配合也能做别具一格的效果
<!-- loading.html --> <div class="bars"> <div class="bar"></div> <div class="bar"></div> <div class="bar"></div> <div class="bar"></div> <div class="bar"></div> <div class="bar"></div> <div class="bar"></div> <div class="bar"></div> <div class="bar"></div> <div class="bar"></div> </div> 复制代码
/* loading.css */ .bars { height: 30px; left: 50%; margin: -30px 0 0 -20px; position: absolute; top: 60%; width: 40px; } .bar { background: #e04960; bottom: 1px; height: 3px; position: absolute; width: 3px; animation: sound 0ms -800ms linear infinite alternate; } @keyframes sound { 0% { opacity: .35; height: 3px; } 100% { opacity: 1; height: 28px; } } .bar:nth-child(1) { left: 1px; animation-duration: 474ms; } .bar:nth-child(2) { left: 5px; animation-duration: 433ms; } .bar:nth-child(3) { left: 9px; animation-duration: 407ms; } .bar:nth-child(4) { left: 13px; animation-duration: 458ms; } .bar:nth-child(5) { left: 17px; animation-duration: 400ms; } .bar:nth-child(6) { left: 21px; animation-duration: 427ms; } .bar:nth-child(7) { left: 25px; animation-duration: 441ms; } .bar:nth-child(8) { left: 29px; animation-duration: 419ms; } .bar:nth-child(9) { left: 33px; animation-duration: 487ms; } .bar:nth-child(10) { left: 37px; animation-duration: 442ms; } 复制代码
Author：El Alemaño
👋 写在最后
- 首先还是很感谢大家看到这里，这次的文章就分享到这里，如果有需要可以直接复制使用哟~
- 如果您觉得这篇文章有帮助到您的的话不妨🍉关注+点赞+收藏+评论+转发🍉支持一下哟~~😛您的支持就是我更新的最大动力。
