☀️ 前言
相信大家经常会使用到加载动画，但是大部分组件库的加载样式都太简洁了👻。
这次给前端工友们收集了10+个高逼格加载动画效果！！复制就能直接用！！😎
⛷️ 来吧展示
1、一个"无敌风火圆"加载
4个圆居然能做出相对排斥的效果？
<!-- loading.html --> <div class="loading"> <div class="inner one"></div> <div class="inner two"></div> <div class="inner three"></div> <div class="inner four"></div> </div> 复制代码
/* loading.css */ .loading { position: absolute; top: calc(50% - 24px); left: calc(50% - 24px); width: 48px; height: 48px; border-radius: 50%; transform: perspective( 128px ) rotateX( 30deg ); } .inner { position: absolute; box-sizing: border-box; width: 16px; height: 16px; background-color: #e04960; border-radius: 50%; } .inner.one { left: 0%; top: 0%; animation: move-right 1s ease-out infinite; } .inner.two { right: 0%; top: 0%; animation: move-down 1s ease-in-out infinite; } .inner.three { right: 0%; bottom: 0%; animation: move-left 1s ease-in-out infinite; } .inner.four { left: 0%; bottom: 0%; animation: move-up 1s ease-out infinite; } @keyframes move-right { 0% { transform: translateX(0); } 100% { transform: translateX(32px); } } @keyframes move-down { 0% { transform: translateY(); } 100% { transform: translateY(32px); } } @keyframes move-left { 0% { transform: translateX(0); } 100% { transform: translateX(-32px); } } @keyframes move-up { 0% { transform: translateY(0); } 100% { transform: translateY(-32px); } } 复制代码
Author：Martin van Driel
2、一个"弹珠"加载
一个个的小弹珠来回移动居然也能描绘出如此美妙的画面
<!-- loading.html --> <div class="container"> <div class="ball"></div> <div class="ball"></div> <div class="ball"></div> <div class="ball"></div> <div class="ball"></div> <div class="ball"></div> <div class="ball"></div> </div> 复制代码
/* loading.css */ .container { width: 200px; height: 100px; margin: 0 auto; } .ball { width: 10px; height: 10px; margin: 10px auto; border-radius: 50px; } .ball:nth-child(1) { background: #e04960; -webkit-animation: right 1s infinite ease-in-out; -moz-animation: right 1s infinite ease-in-out; animation: right 1s infinite ease-in-out; } .ball:nth-child(2) { background: #e04960; -webkit-animation: left 1.1s infinite ease-in-out; -moz-animation: left 1.1s infinite ease-in-out; animation: left 1.1s infinite ease-in-out; } .ball:nth-child(3) { background: #e04960; -webkit-animation: right 1.05s infinite ease-in-out; -moz-animation: right 1.05s infinite ease-in-out; animation: right 1.05s infinite ease-in-out; } .ball:nth-child(4) { background: #e04960; -webkit-animation: left 1.15s infinite ease-in-out; -moz-animation: left 1.15s infinite ease-in-out; animation: left 1.15s infinite ease-in-out; } .ball:nth-child(5) { background: #e04960; -webkit-animation: right 1.1s infinite ease-in-out; -moz-animation: right 1.1s infinite ease-in-out; animation: right 1.1s infinite ease-in-out; } .ball:nth-child(6) { background: #e04960; -webkit-animation: left 1.05s infinite ease-in-out; -moz-animation: left 1.05s infinite ease-in-out; animation: left 1.05s infinite ease-in-out; } .ball:nth-child(7) { background: #e04960; -webkit-animation: right 1s infinite ease-in-out; -moz-animation: right 1s infinite ease-in-out; animation: right 1s infinite ease-in-out; } @-webkit-keyframes right { 0% { -webkit-transform: translate(-15px); } 50% { -webkit-transform: translate(15px); } 100% { -webkit-transform: translate(-15px); } } @-webkit-keyframes left { 0% { -webkit-transform: translate(15px); } 50% { -webkit-transform: translate(-15px); } 100% { -webkit-transform: translate(15px); } } @-moz-keyframes right { 0% { -moz-transform: translate(-15px); } 50% { -moz-transform: translate(15px); } 100% { -moz-transform: translate(-15px); } } @-moz-keyframes left { 0% { -moz-transform: translate(15px); } 50% { -moz-transform: translate(-15px); } 100% { -moz-transform: translate(15px); } } @keyframes right { 0% { transform: translate(-15px); } 50% { transform: translate(15px); } 100% { transform: translate(-15px); } } @keyframes left { 0% { transform: translate(15px); } 50% { transform: translate(-15px); } 100% { transform: translate(15px); } } 复制代码
Author：Richie
👋 写在最后
- 首先还是很感谢大家看到这里，这次的文章就分享到这里，如果有需要可以直接复制使用哟~
- 如果您觉得这篇文章有帮助到您的的话不妨🍉关注+点赞+收藏+评论+转发🍉支持一下哟~~😛您的支持就是我更新的最大动力。
