纯 css 实现 117 个 Loading 效果（中）
作者：学习委员
- 2021 年 12 月 04 日
本文字数：28906 字
阅读完需：约 95 分钟
前言
因为特效数量太多，所以我分成上、中、下三篇（每篇 39 个特效），本文为中篇。
这是我这几十年间从世界各地寻觅到的 Loading 特效，合计 117 个（本文贴出第 40-78 个），而且是 纯 CSS 制作的。
本文不讲解原理（以后可能会开新篇讲），只贴代码，大家来感受一下复制粘贴的快感吧。
❤️❤️喜欢的给本文点个赞呗~
40
<div class="loading"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div></div>
<style>.loading,.loading > div { position: relative; box-sizing: border-box;}
.loading { display: block; font-size: 0; color: #000;}
.loading.la-dark { color: #333;}
.loading > div { display: inline-block; float: none; background-color: currentColor; border: 0 solid currentColor;}
.loading { width: 26px; height: 26px;}
.loading > div { position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; margin-top: -6px; margin-left: -6px; border-radius: 100%; animation: ball-square-clockwise-spin 1s infinite ease-in-out;}
.loading > div:nth-child(1) { top: 0; left: 0; animation-delay: -0.875s;}
.loading > div:nth-child(2) { top: 0; left: 50%; animation-delay: -0.75s;}
.loading > div:nth-child(3) { top: 0; left: 100%; animation-delay: -0.625s;}
.loading > div:nth-child(4) { top: 50%; left: 100%; animation-delay: -0.5s;}
.loading > div:nth-child(5) { top: 100%; left: 100%; animation-delay: -0.375s;}
.loading > div:nth-child(6) { top: 100%; left: 50%; animation-delay: -0.25s;}
.loading > div:nth-child(7) { top: 100%; left: 0; animation-delay: -0.125s;}
.loading > div:nth-child(8) { top: 50%; left: 0; animation-delay: 0s;}
.loading.la-sm { width: 12px; height: 12px;}
.loading.la-sm > div { width: 6px; height: 6px; margin-top: -3px; margin-left: -3px;}
.loading.la-2x { width: 52px; height: 52px;}
.loading.la-2x > div { width: 24px; height: 24px; margin-top: -12px; margin-left: -12px;}
.loading.la-3x { width: 78px; height: 78px;}
.loading.la-3x > div { width: 36px; height: 36px; margin-top: -18px; margin-left: -18px;}
@keyframes ball-square-clockwise-spin { 0%, 40%, 100% { transform: scale(0.4); }
70% { transform: scale(1); }}</style>复制代码复制代码
41
<div class="loading"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div></div>
<style>.loading,.loading > div { position: relative; box-sizing: border-box;}
.loading { display: block; font-size: 0; color: #000;}
.loading.la-dark { color: #333;}
.loading > div { display: inline-block; float: none; background-color: currentColor; border: 0 solid currentColor;}
.loading { width: 26px; height: 26px;}
.loading > div { position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; margin-top: -6px; margin-left: -6px; border-radius: 100%; animation: ball-square-spin 1s infinite ease-in-out;}
.loading > div:nth-child(1) { top: 0; left: 0; animation-delay: -1.125s;}
.loading > div:nth-child(2) { top: 0; left: 50%; animation-delay: -1.25s;}
.loading > div:nth-child(3) { top: 0; left: 100%; animation-delay: -1.375s;}
.loading > div:nth-child(4) { top: 50%; left: 100%; animation-delay: -1.5s;}
.loading > div:nth-child(5) { top: 100%; left: 100%; animation-delay: -1.625s;}
.loading > div:nth-child(6) { top: 100%; left: 50%; animation-delay: -1.75s;}
.loading > div:nth-child(7) { top: 100%; left: 0; animation-delay: -1.875s;}
.loading > div:nth-child(8) { top: 50%; left: 0; animation-delay: -2s;}
.loading.la-sm { width: 12px; height: 12px;}
.loading.la-sm > div { width: 6px; height: 6px; margin-top: -3px; margin-left: -3px;}
.loading.la-2x { width: 52px; height: 52px;}
.loading.la-2x > div { width: 24px; height: 24px; margin-top: -12px; margin-left: -12px;}
.loading.la-3x { width: 78px; height: 78px;}
.loading.la-3x > div { width: 36px; height: 36px; margin-top: -18px; margin-left: -18px;}
@keyframes ball-square-spin { 0%, 40%, 100% { transform: scale(0.4); }
70% { transform: scale(1); }}</style>复制代码复制代码
42
<div class="loading"> <div></div> <div></div> <div></div></div>
<style>.loading,.loading > div { position: relative; box-sizing: border-box;}
.loading { display: block; font-size: 0; color: #000;}
.loading.la-dark { color: #333;}
.loading > div { display: inline-block; float: none; background-color: currentColor; border: 0 solid currentColor;}
.loading { width: 32px; height: 32px;}
.loading > div { position: absolute; top: 0; left: 0; width: 10px; height: 10px; border-radius: 100%;}
.loading > div:nth-child(1) { animation: ball-triangle-path-ball-one 2s 0s ease-in-out infinite;}
.loading > div:nth-child(2) { animation: ball-triangle-path-ball-two 2s 0s ease-in-out infinite;}
.loading > div:nth-child(3) { animation: ball-triangle-path-ball-tree 2s 0s ease-in-out infinite;}
.loading.la-sm { width: 16px; height: 16px;}
.loading.la-sm > div { width: 4px; height: 4px;}
.loading.la-2x { width: 64px; height: 64px;}
.loading.la-2x > div { width: 20px; height: 20px;}
.loading.la-3x { width: 96px; height: 96px;}
.loading.la-3x > div { width: 30px; height: 30px;}
@keyframes ball-triangle-path-ball-one { 0% { transform: translate(0, 220%); }
17% { opacity: 0.25; }
33% { opacity: 1; transform: translate(110%, 0); }
50% { opacity: 0.25; }
66% { opacity: 1; transform: translate(220%, 220%); }
83% { opacity: 0.25; }
100% { opacity: 1; transform: translate(0, 220%); }}
@keyframes ball-triangle-path-ball-two { 0% { transform: translate(110%, 0); }
17% { opacity: 0.25; }
33% { opacity: 1; transform: translate(220%, 220%); }
50% { opacity: 0.25; }
66% { opacity: 1; transform: translate(0, 220%); }
83% { opacity: 0.25; }
100% { opacity: 1; transform: translate(110%, 0); }}
@keyframes ball-triangle-path-ball-tree { 0% { transform: translate(220%, 220%); }
17% { opacity: 0.25; }
33% { opacity: 1; transform: translate(0, 220%); }
50% { opacity: 0.25; }
66% { opacity: 1; transform: translate(110%, 0); }
83% { opacity: 0.25; }
100% { opacity: 1; transform: translate(220%, 220%); }}</style>复制代码复制代码
43
<div class="loading"> <div></div> <div></div></div>
<style>.loading,.loading > div { position: relative; box-sizing: border-box;}
.loading { display: block; font-size: 0; color: #000;}
.loading.la-dark { color: #333;}
.loading > div { display: inline-block; float: none; background-color: currentColor; border: 0 solid currentColor;}
.loading { position: relative; width: 32px; height: 32px;}
.loading > div { position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; margin-top: -5px; margin-left: -5px; border-radius: 100%;}
.loading > div:first-child { animation: ball-zig-effect 0.7s 0s infinite linear;}
.loading > div:last-child { animation: ball-zag-effect 0.7s 0s infinite linear;}
.loading.la-sm { width: 16px; height: 16px;}
.loading.la-sm > div { width: 4px; height: 4px; margin-top: -2px; margin-left: -2px;}
.loading.la-2x { width: 64px; height: 64px;}
.loading.la-2x > div { width: 20px; height: 20px; margin-top: -10px; margin-left: -10px;}
.loading.la-3x { width: 96px; height: 96px;}
.loading.la-3x > div { width: 30px; height: 30px; margin-top: -15px; margin-left: -15px;}
@keyframes ball-zig-effect { 0% { transform: translate(0, 0); }
33% { transform: translate(-75%, -150%); }
66% { transform: translate(75%, -150%); }
100% { transform: translate(0, 0); }}
@keyframes ball-zag-effect { 0% { transform: translate(0, 0); }
33% { transform: translate(75%, 150%); }
66% { transform: translate(-75%, 150%); }
100% { transform: translate(0, 0); }}</style>复制代码复制代码
44
<div class="loading"> <div></div> <div></div></div>
<style>.loading,.loading > div { position: relative; box-sizing: border-box;}
.loading { display: block; font-size: 0; color: #000;}
.loading.la-dark { color: #333;}
.loading > div { display: inline-block; float: none; background-color: currentColor; border: 0 solid currentColor;}
.loading { position: relative; width: 32px; height: 32px;}
.loading > div { position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; margin-top: -5px; margin-left: -5px; border-radius: 100%;}
.loading > div:first-child { animation: ball-zig-deflect 1.5s 0s infinite linear;}
.loading > div:last-child { animation: ball-zag-deflect 1.5s 0s infinite linear;}
.loading.la-sm { width: 16px; height: 16px;}
.loading.la-sm > div { width: 4px; height: 4px; margin-top: -2px; margin-left: -2px;}
.loading.la-2x { width: 64px; height: 64px;}
.loading.la-2x > div { width: 20px; height: 20px; margin-top: -10px; margin-left: -10px;}
.loading.la-3x { width: 96px; height: 96px;}
.loading.la-3x > div { width: 30px; height: 30px; margin-top: -15px; margin-left: -15px;}
@keyframes ball-zig-deflect { 17% { transform: translate(-80%, -160%); } 34% { transform: translate(80%, -160%); } 50% { transform: translate(0, 0); } 67% { transform: translate(80%, -160%); } 84% { transform: translate(-80%, -160%); } 100% { transform: translate(0, 0); }}
@keyframes ball-zag-deflect { 17% { transform: translate(80%, 160%); } 34% { transform: translate(-80%, 160%); } 50% { transform: translate(0, 0); } 67% { transform: translate(-80%, 160%); } 84% { transform: translate(80%, 160%); } 100% { transform: translate(0, 0); }}</style>复制代码复制代码
45
<div class="loading"> <div></div> <div></div></div>
<style>.loading,.loading > div { position: relative; box-sizing: border-box;}
.loading { display: block; font-size: 0; color: #000;}
.loading.la-dark { color: #333;}
.loading > div { display: inline-block; float: none; background-color: currentColor; border: 0 solid currentColor;}
.loading { width: 32px; height: 32px;}
.loading > div { position: absolute; top: 0; left: 0; width: 14px; height: 14px; margin-top: -7px; margin-left: -7px; border-radius: 0; animation: cube-transition 1.6s 0s infinite ease-in-out;}
.loading > div:last-child { animation-delay: -0.8s;}
.loading.la-sm { width: 16px; height: 16px;}
.loading.la-sm > div { width: 6px; height: 6px; margin-top: -3px; margin-left: -3px;}
.loading.la-2x { width: 64px; height: 64px;}
.loading.la-2x > div { width: 28px; height: 28px; margin-top: -14px; margin-left: -14px;}
.loading.la-3x { width: 96px; height: 96px;}
.loading.la-3x > div { width: 42px; height: 42px; margin-top: -21px; margin-left: -21px;}
@keyframes cube-transition { 25% { top: 0; left: 100%; transform: scale(0.5) rotate(-90deg); }
50% { top: 100%; left: 100%; transform: scale(1) rotate(-180deg); }
75% { top: 100%; left: 0; transform: scale(0.5) rotate(-270deg); }
100% { top: 0; left: 0; transform: scale(1) rotate(-360deg); }}</style>复制代码复制代码
46
<div class="loading"> <div></div> <div></div> <div></div></div>
<style>.loading,.loading > div { position: relative; box-sizing: border-box;}
.loading { display: block; font-size: 0; color: #000;}
.loading.la-dark { color: #333;}
.loading > div { display: inline-block; float: none; background-color: currentColor; border: 0 solid currentColor;}
.loading { width: 32px; height: 32px;}
.loading > div { position: absolute; bottom: 0; left: 50%; width: 12px; height: 12px; border-radius: 0; border-radius: 2px; transform: translateY(0) translateX(-50%) rotate(45deg) scale(0); animation: fire-diamonds 1.5s infinite linear;}
.loading > div:nth-child(1) { animation-delay: -0.85s;}
.loading > div:nth-child(2) { animation-delay: -1.85s;}
.loading > div:nth-child(3) { animation-delay: -2.85s;}
.loading.la-sm { width: 16px; height: 16px;}
.loading.la-sm > div { width: 6px; height: 6px;}
.loading.la-2x { width: 64px; height: 64px;}
.loading.la-2x > div { width: 24px; height: 24px;}
.loading.la-3x { width: 96px; height: 96px;}
.loading.la-3x > div { width: 36px; height: 36px;}
@keyframes fire-diamonds { 0% { transform: translateY(75%) translateX(-50%) rotate(45deg) scale(0); }
50% { transform: translateY(-87.5%) translateX(-50%) rotate(45deg) scale(1); }
100% { transform: translateY(-212.5%) translateX(-50%) rotate(45deg) scale(0); }}</style>复制代码复制代码
47
<div class="loading"> <div></div> <div></div> <div></div> <div></div> <div></div></div>
<style>.loading,.loading > div { position: relative; box-sizing: border-box;}
.loading { display: block; font-size: 0; color: #000;}
.loading.la-dark { color: #333;}
.loading > div { display: inline-block; float: none; background-color: currentColor; border: 0 solid currentColor;}
.loading { width: 40px; height: 32px;}
.loading > div { width: 4px; height: 32px; margin: 2px; margin-top: 0; margin-bottom: 0; border-radius: 0; animation: line-scale 1.2s infinite ease;}
.loading > div:nth-child(1) { animation-delay: -1.2s;}
.loading > div:nth-child(2) { animation-delay: -1.1s;}
.loading > div:nth-child(3) { animation-delay: -1s;}
.loading > div:nth-child(4) { animation-delay: -0.9s;}
.loading > div:nth-child(5) { animation-delay: -0.8s;}
.loading.la-sm { width: 20px; height: 16px;}
.loading.la-sm > div { width: 2px; height: 16px; margin: 1px; margin-top: 0; margin-bottom: 0;}
.loading.la-2x { width: 80px; height: 64px;}
.loading.la-2x > div { width: 8px; height: 64px; margin: 4px; margin-top: 0; margin-bottom: 0;}
.loading.la-3x { width: 120px; height: 96px;}
.loading.la-3x > div { width: 12px; height: 96px; margin: 6px; margin-top: 0; margin-bottom: 0;}
@keyframes line-scale { 0%, 40%, 100% { transform: scaleY(0.4); }
20% { transform: scaleY(1); }}</style>复制代码复制代码
48
<div class="loading"> <div></div> <div></div> <div></div> <div></div> <div></div></div>
<style>.loading,.loading > div { position: relative; box-sizing: border-box;}
.loading { display: block; font-size: 0; color: #000;}
.loading.la-dark { color: #333;}
.loading > div { display: inline-block; float: none; background-color: currentColor; border: 0 solid currentColor;}
.loading { width: 40px; height: 32px;}
.loading > div { width: 4px; height: 32px; margin: 2px; margin-top: 0; margin-bottom: 0; border-radius: 0; animation-name: line-scale-party; animation-iteration-count: infinite;}
.loading > div:nth-child(1) { animation-duration: 0.43s; animation-delay: -0.23s;}
.loading > div:nth-child(2) { animation-duration: 0.62s; animation-delay: -0.32s;}
.loading > div:nth-child(3) { animation-duration: 0.43s; animation-delay: -0.44s;}
.loading > div:nth-child(4) { animation-duration: 0.8s; animation-delay: -0.31s;}
.loading > div:nth-child(5) { animation-duration: 0.74s; animation-delay: -0.24s;}
.loading.la-sm { width: 20px; height: 16px;}
.loading.la-sm > div { width: 2px; height: 16px; margin: 1px; margin-top: 0; margin-bottom: 0;}
.loading.la-2x { width: 80px; height: 64px;}
.loading.la-2x > div { width: 8px; height: 64px; margin: 4px; margin-top: 0; margin-bottom: 0;}
.loading.la-3x { width: 120px; height: 96px;}
.loading.la-3x > div { width: 12px; height: 96px; margin: 6px; margin-top: 0; margin-bottom: 0;}
@keyframes line-scale-party { 0% { transform: scaleY(1); }
50% { transform: scaleY(0.3); }
100% { transform: scaleY(1); }}</style>复制代码复制代码
49
<div class="loading"> <div></div> <div></div> <div></div> <div></div> <div></div></div>
<style>.loading,.loading > div { position: relative; box-sizing: border-box;}
.loading { display: block; font-size: 0; color: #000;}
.loading.la-dark { color: #333;}
.loading > div { display: inline-block; float: none; background-color: currentColor; border: 0 solid currentColor;}
.loading { width: 40px; height: 32px;}
.loading > div { width: 4px; height: 32px; margin: 2px; margin-top: 0; margin-bottom: 0; border-radius: 0; animation: line-scale-pulse-out 0.9s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85);}
.loading > div:nth-child(3) { animation-delay: -0.9s;}
.loading > div:nth-child(2),.loading > div:nth-child(4) { animation-delay: -0.7s;}
.loading > div:nth-child(1),.loading > div:nth-child(5) { animation-delay: -0.5s;}
.loading.la-sm { width: 20px; height: 16px;}
.loading.la-sm > div { width: 2px; height: 16px; margin: 1px; margin-top: 0; margin-bottom: 0;}
.loading.la-2x { width: 80px; height: 64px;}
.loading.la-2x > div { width: 8px; height: 64px; margin: 4px; margin-top: 0; margin-bottom: 0;}
.loading.la-3x { width: 120px; height: 96px;}
.loading.la-3x > div { width: 12px; height: 96px; margin: 6px; margin-top: 0; margin-bottom: 0;}
@keyframes line-scale-pulse-out { 0% { transform: scaley(1); }
50% { transform: scaley(0.3); }
100% { transform: scaley(1); }}</style>复制代码复制代码
50
<div class="loading"> <div></div> <div></div> <div></div> <div></div> <div></div></div>
<style>.loading,.loading > div { position: relative; box-sizing: border-box;}
.loading { display: block; font-size: 0; color: #000;}
.loading.la-dark { color: #333;}
.loading > div { display: inline-block; float: none; background-color: currentColor; border: 0 solid currentColor;}
.loading { width: 40px; height: 32px;}
.loading > div { width: 4px; height: 32px; margin: 2px; margin-top: 0; margin-bottom: 0; border-radius: 0; animation: line-scale-pulse-out-rapid 0.9s infinite cubic-bezier(0.11, 0.49, 0.38, 0.78);}
.loading > div:nth-child(3) { animation-delay: -0.9s;}
.loading > div:nth-child(2),.loading > div:nth-child(4) { animation-delay: -0.65s;}
.loading > div:nth-child(1),.loading > div:nth-child(5) { animation-delay: -0.4s;}
.loading.la-sm { width: 20px; height: 16px;}
.loading.la-sm > div { width: 2px; height: 16px; margin: 1px; margin-top: 0; margin-bottom: 0;}
.loading.la-2x { width: 80px; height: 64px;}
.loading.la-2x > div { width: 8px; height: 64px; margin: 4px; margin-top: 0; margin-bottom: 0;}
.loading.la-3x { width: 120px; height: 96px;}
.loading.la-3x > div { width: 12px; height: 96px; margin: 6px; margin-top: 0; margin-bottom: 0;}
@keyframes line-scale-pulse-out-rapid { 0% { transform: scaley(1); }
80% { transform: scaley(0.3); }
90% { transform: scaley(1); }}</style>复制代码复制代码
51
<div class="loading"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div></div>
<style>.loading,.loading > div { position: relative; box-sizing: border-box;}
.loading { display: block; font-size: 0; color: #000;}
.loading.la-dark { color: #333;}
.loading > div { display: inline-block; float: none; background-color: currentColor; border: 0 solid currentColor;}
.loading { width: 32px; height: 32px;}
.loading > div { position: absolute; width: 2px; height: 10px; margin: 2px; margin-top: -5px; margin-left: -1px; border-radius: 0; animation: line-spin-clockwise-fade 1s infinite ease-in-out;}
.loading > div:nth-child(1) { top: 15%; left: 50%; transform: rotate(0deg); animation-delay: -0.875s;}
.loading > div:nth-child(2) { top: 25.2512626585%; left: 74.7487373415%; transform: rotate(45deg); animation-delay: -0.75s;}
.loading > div:nth-child(3) { top: 50%; left: 85%; transform: rotate(90deg); animation-delay: -0.625s;}
.loading > div:nth-child(4) { top: 74.7487373415%; left: 74.7487373415%; transform: rotate(135deg); animation-delay: -0.5s;}
.loading > div:nth-child(5) { top: 84.9999999974%; left: 50.0000000004%; transform: rotate(180deg); animation-delay: -0.375s;}
.loading > div:nth-child(6) { top: 74.7487369862%; left: 25.2512627193%; transform: rotate(225deg); animation-delay: -0.25s;}
.loading > div:nth-child(7) { top: 49.9999806189%; left: 15.0000039834%; transform: rotate(270deg); animation-delay: -0.125s;}
.loading > div:nth-child(8) { top: 25.2506949798%; left: 25.2513989292%; transform: rotate(315deg); animation-delay: 0s;}
.loading.la-sm { width: 16px; height: 16px;}
.loading.la-sm > div { width: 1px; height: 4px; margin-top: -2px; margin-left: 0;}
.loading.la-2x { width: 64px; height: 64px;}
.loading.la-2x > div { width: 4px; height: 20px; margin-top: -10px; margin-left: -2px;}
.loading.la-3x { width: 96px; height: 96px;}
.loading.la-3x > div { width: 6px; height: 30px; margin-top: -15px; margin-left: -3px;}
@keyframes line-spin-clockwise-fade { 50% { opacity: 0.2; }
100% { opacity: 1; }}</style>复制代码复制代码
52
<div class="loading"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div></div>
<style>.loading,.loading > div { position: relative; box-sizing: border-box;}
.loading { display: block; font-size: 0; color: #000;}
.loading.la-dark { color: #333;}
.loading > div { display: inline-block; float: none; background-color: currentColor; border: 0 solid currentColor;}
.loading { width: 32px; height: 32px; animation: line-spin-clockwise-fade-rotating-rotate 6s infinite linear;}
.loading > div { position: absolute; width: 2px; height: 10px; margin: 2px; margin-top: -5px; margin-left: -1px; border-radius: 0; animation: line-spin-clockwise-fade-rotating 1s infinite ease-in-out;}
.loading > div:nth-child(1) { top: 15%; left: 50%; transform: rotate(0deg); animation-delay: -0.875s;}
.loading > div:nth-child(2) { top: 25.2512626585%; left: 74.7487373415%; transform: rotate(45deg); animation-delay: -0.75s;}
.loading > div:nth-child(3) { top: 50%; left: 85%; transform: rotate(90deg); animation-delay: -0.625s;}
.loading > div:nth-child(4) { top: 74.7487373415%; left: 74.7487373415%; transform: rotate(135deg); animation-delay: -0.5s;}
.loading > div:nth-child(5) { top: 84.9999999974%; left: 50.0000000004%; transform: rotate(180deg); animation-delay: -0.375s;}
.loading > div:nth-child(6) { top: 74.7487369862%; left: 25.2512627193%; transform: rotate(225deg); animation-delay: -0.25s;}
.loading > div:nth-child(7) { top: 49.9999806189%; left: 15.0000039834%; transform: rotate(270deg); animation-delay: -0.125s;}
.loading > div:nth-child(8) { top: 25.2506949798%; left: 25.2513989292%; transform: rotate(315deg); animation-delay: 0s;}
.loading.la-sm { width: 16px; height: 16px;}
.loading.la-sm > div { width: 1px; height: 4px; margin-top: -2px; margin-left: 0;}
.loading.la-2x { width: 64px; height: 64px;}
.loading.la-2x > div { width: 4px; height: 20px; margin-top: -10px; margin-left: -2px;}
.loading.la-3x { width: 96px; height: 96px;}
.loading.la-3x > div { width: 6px; height: 30px; margin-top: -15px; margin-left: -3px;}
@keyframes line-spin-clockwise-fade-rotating-rotate { 100% { transform: rotate(-360deg); }}
@keyframes line-spin-clockwise-fade-rotating { 50% { opacity: 0.2; } 100% { opacity: 1; }}</style>复制代码复制代码
53
<div class="loading"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div></div>
<style>.loading,.loading > div { position: relative; box-sizing: border-box;}
.loading { display: block; font-size: 0; color: #000;}
.loading.la-dark { color: #333;}
.loading > div { display: inline-block; float: none; background-color: currentColor; border: 0 solid currentColor;}
.loading { width: 32px; height: 32px;}
.loading > div:nth-child(1),.loading > div:nth-child(2) { width: 0; height: 0; background: transparent; border-style: solid; border-width: 16px; border-right-color: transparent; border-radius: 100%; animation: pacman-rotate-half-up 0.5s 0s infinite;}
.loading > div:nth-child(2) { margin-top: -32px; animation-name: pacman-rotate-half-down;}
.loading > div:nth-child(3),.loading > div:nth-child(4),.loading > div:nth-child(5),.loading > div:nth-child(6) { position: absolute; top: 50%; left: 200%; width: 8px; height: 8px; border-radius: 100%; opacity: 0; animation: pacman-balls 2s 0s infinite linear;}
.loading > div:nth-child(3) { animation-delay: -1.44s;}
.loading > div:nth-child(4) { animation-delay: -1.94s;}
.loading > div:nth-child(5) { animation-delay: -2.44s;}
.loading > div:nth-child(6) { animation-delay: -2.94s;}
.loading.la-sm { width: 16px; height: 16px;}
.loading.la-sm > div:nth-child(1),.loading.la-sm > div:nth-child(2) { border-width: 8px;}
.loading.la-sm > div:nth-child(2) { margin-top: -16px;}
.loading.la-sm > div:nth-child(3),.loading.la-sm > div:nth-child(4),.loading.la-sm > div:nth-child(5),.loading.la-sm > div:nth-child(6) { width: 4px; height: 4px;}
.loading.la-2x { width: 64px; height: 64px;}
.loading.la-2x > div:nth-child(1),.loading.la-2x > div:nth-child(2) { border-width: 32px;}
.loading.la-2x > div:nth-child(2) { margin-top: -64px;}
.loading.la-2x > div:nth-child(3),.loading.la-2x > div:nth-child(4),.loading.la-2x > div:nth-child(5),.loading.la-2x > div:nth-child(6) { width: 16px; height: 16px;}
.loading.la-3x { width: 96px; height: 96px;}
.loading.la-3x > div:nth-child(1),.loading.la-3x > div:nth-child(2) { border-width: 48px;}
.loading.la-3x > div:nth-child(2) { margin-top: -96px;}
.loading.la-3x > div:nth-child(3),.loading.la-3x > div:nth-child(4),.loading.la-3x > div:nth-child(5),.loading.la-3x > div:nth-child(6) { width: 24px; height: 24px;}
@keyframes pacman-rotate-half-up { 0%, 100% { transform: rotate(270deg); }
50% { transform: rotate(360deg); }}
@keyframes pacman-rotate-half-down { 0%, 100% { transform: rotate(90deg); }
50% { transform: rotate(0deg); }}
@keyframes pacman-balls { 0% { left: 200%; opacity: 0; transform: translateY(-50%); }
5% { opacity: 0.5; }
66% { opacity: 1; }
67% { opacity: 0; }
100% { left: 0; transform: translateY(-50%); }}</style>复制代码复制代码
54
<div class="loading"> <div></div> <div></div></div>
<style>.loading,.loading > div { position: relative; box-sizing: border-box;}
.loading { display: block; font-size: 0; color: #000;}
.loading.la-dark { color: #333;}
.loading > div { display: inline-block; float: none; background-color: currentColor; border: 0 solid currentColor;}
.loading { width: 32px; height: 32px;}
.loading > div:nth-child(1),.loading > div:nth-child(2) { position: absolute; left: 0; width: 100%;}
.loading > div:nth-child(1) { top: -25%; z-index: 1; height: 100%; border-radius: 10%; animation: square-jelly-box-animate 0.6s -0.1s linear infinite;}
.loading > div:nth-child(2) { bottom: -9%; height: 10%; background: #000; border-radius: 50%; opacity: 0.2; animation: square-jelly-box-shadow 0.6s -0.1s linear infinite;}
.loading.la-sm { width: 16px; height: 16px;}
.loading.la-2x { width: 64px; height: 64px;}
.loading.la-3x { width: 96px; height: 96px;}
@keyframes square-jelly-box-animate { 17% { border-bottom-right-radius: 10%; }
25% { transform: translateY(25%) rotate(22.5deg); }
50% { border-bottom-right-radius: 100%; transform: translateY(50%) scale(1, 0.9) rotate(45deg); }
75% { transform: translateY(25%) rotate(67.5deg); }
100% { transform: translateY(0) rotate(90deg); }}
@keyframes square-jelly-box-shadow { 50% { transform: scale(1.25, 1); }}</style>复制代码复制代码
55
<div class="loading"> <div></div></div>
<style>.loading,.loading > div { position: relative; box-sizing: border-box;}
.loading { display: block; font-size: 0; color: #000;}
.loading.la-dark { color: #333;}
.loading > div { display: inline-block; float: none; background-color: currentColor; border: 0 solid currentColor;}
.loading { width: 32px; height: 32px;}
.loading > div { width: 100%; height: 100%; background: transparent; border-width: 2px; border-radius: 0; animation: square-loader 2s infinite ease;}
.loading > div:after { display: inline-block; width: 100%; vertical-align: top; content: ""; background-color: currentColor; animation: square-loader-inner 2s infinite ease-in;}
.loading.la-sm { width: 16px; height: 16px;}
.loading.la-sm > div { border-width: 1px;}
.loading.la-2x { width: 64px; height: 64px;}
.loading.la-2x > div { border-width: 4px;}
.loading.la-3x { width: 96px; height: 96px;}
.loading.la-3x > div { border-width: 6px;}
@keyframes square-loader { 0% { transform: rotate(0deg); }
25% { transform: rotate(180deg); }
50% { transform: rotate(180deg); }
75% { transform: rotate(360deg); }
100% { transform: rotate(360deg); }}
@keyframes square-loader-inner { 0% { height: 0; }
25% { height: 0; }
50% { height: 100%; }
75% { height: 100%; }
100% { height: 0; }}</style>复制代码复制代码
56
<div class="loading"> <div></div></div>
<style>.loading,.loading > div { position: relative; box-sizing: border-box;}
.loading { display: block; font-size: 0; color: #000;}
.loading.la-dark { color: #333;}
.loading > div { display: inline-block; float: none; background-color: currentColor; border: 0 solid currentColor;}
.loading { width: 32px; height: 32px;}
.loading > div { width: 100%; height: 100%; border-radius: 0; animation: square-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;}
.loading.la-sm { width: 16px; height: 16px;}
.loading.la-2x { width: 64px; height: 64px;}
.loading.la-3x { width: 96px; height: 96px;}
@keyframes square-spin { 0% { transform: perspective(100px) rotateX(0) rotateY(0); }
25% { transform: perspective(100px) rotateX(180deg) rotateY(0); }
50% { transform: perspective(100px) rotateX(180deg) rotateY(180deg); }
75% { transform: perspective(100px) rotateX(0) rotateY(180deg); }
100% { transform: perspective(100px) rotateX(0) rotateY(360deg); }}</style>复制代码复制代码
57
<div class="loading"> <div></div></div>
<style>.loading,.loading > div { position: relative; box-sizing: border-box;}
.loading { display: block; font-size: 0; color: #000;}
.loading.la-dark { color: #333;}
.loading > div { display: inline-block; float: none; background-color: currentColor; border: 0 solid currentColor;}
.loading { width: 32px; height: 32px;}
.loading > div { width: 32px; height: 32px; background: transparent; border-width: 2px; border-radius: 100%;}
.loading > div:before,.loading > div:after { position: absolute; top: 14px; left: 14px; display: block; width: 2px; margin-top: -1px; margin-left: -1px; content: ""; background: currentColor; border-radius: 2px; transform-origin: 1px 1px 0; animation: timer-loader 1250ms infinite linear; animation-delay: -625ms;}
.loading > div:before { height: 12px;}
.loading > div:after { height: 8px; animation-duration: 15s; animation-delay: -7.5s;}
.loading.la-sm { width: 16px; height: 16px;}
.loading.la-sm > div { width: 16px; height: 16px; border-width: 1px;}
.loading.la-sm > div:before,.loading.la-sm > div:after { top: 7px; left: 7px; width: 1px; margin-top: -0.5px; margin-left: -0.5px; border-radius: 1px; transform-origin: 0.5px 0.5px 0;}
.loading.la-sm > div:before { height: 6px;}
.loading.la-sm > div:after { height: 4px;}
.loading.la-2x { width: 64px; height: 64px;}
.loading.la-2x > div { width: 64px; height: 64px; border-width: 4px;}
.loading.la-2x > div:before,.loading.la-2x > div:after { top: 28px; left: 28px; width: 4px; margin-top: -2px; margin-left: -2px; border-radius: 4px; transform-origin: 2px 2px 0;}
.loading.la-2x > div:before { height: 24px;}
.loading.la-2x > div:after { height: 16px;}
.loading.la-3x { width: 96px; height: 96px;}
.loading.la-3x > div { width: 96px; height: 96px; border-width: 6px;}
.loading.la-3x > div:before,.loading.la-3x > div:after { top: 42px; left: 42px; width: 6px; margin-top: -3px; margin-left: -3px; border-radius: 6px; transform-origin: 3px 3px 0;}
.loading.la-3x > div:before { height: 36px;}
.loading.la-3x > div:after { height: 24px;}
@keyframes timer-loader { 0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }}</style>复制代码复制代码
58
<div class="loading"> <div></div></div>
<style>.loading,.loading > div { position: relative; box-sizing: border-box;}
.loading { display: block; font-size: 0; color: #000;}
.loading.la-dark { color: #333;}
.loading > div { display: inline-block; float: none; background-color: currentColor; border: 0 solid currentColor;}
.loading { width: 32px; height: 16px;}
.loading > div { width: 0; height: 0; background: transparent; border: none; border-style: solid; border-width: 16px; border-top-width: 0; border-right-color: transparent; border-left-color: transparent; animation: triangle-skew-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;}
.loading.la-sm { width: 16px; height: 8px;}
.loading.la-sm > div { border-width: 8px; border-top-width: 0;}
.loading.la-2x { width: 64px; height: 32px;}
.loading.la-2x > div { border-width: 32px; border-top-width: 0;}
.loading.la-3x { width: 96px; height: 48px;}
.loading.la-3x > div { border-width: 48px; border-top-width: 0;}
@keyframes triangle-skew-spin { 0% { transform: perspective(100px) rotateX(0) rotateY(0); }
25% { transform: perspective(100px) rotateX(180deg) rotateY(0); }
50% { transform: perspective(100px) rotateX(180deg) rotateY(180deg); }
75% { transform: perspective(100px) rotateX(0) rotateY(180deg); }
100% { transform: perspective(100px) rotateX(0) rotateY(360deg); }}</style>复制代码复制代码
59
<div class="loading"></div>
<style>.loading { width: 50px; height: 50px; display: inline-block; padding: 0px; opacity: 0.5; border: 3px solid #000; animation: loading-animation 1s ease-in-out infinite alternate;}
.loading:before { content: " "; position: absolute; z-index: -1; top: 5px; left: 5px; right: 5px; bottom: 5px; border: 3px solid #000;}
.loading:after { content: " "; position: absolute; z-index: -1; top: 15px; left: 15px; right: 15px; bottom: 15px; border: 3px solid #000;}
@keyframes loading-animation { from { transform: rotate(0deg) scale(1, 1); border-radius: 0px; }
to { transform: rotate(360deg) scale(0, 0); border-radius: 50px; }}</style>复制代码复制代码
60
<div class="loading"> <span></span> <span></span> <span></span> <span></span> <span></span></div>
<style>.loading { display: inline-block; font-size: 0px; padding: 0px;}
.loading span { vertical-align: middle; border-radius: 100%;
display: inline-block; width: 10px; height: 10px; margin: 3px 2px; animation: loading-animation 0.8s linear infinite alternate;}
.loading span:nth-child(1) { animation-delay: -1s; background: rgba(0, 0, 0, 0.6);}
.loading span:nth-child(2) { animation-delay: -0.8s; background: rgba(0, 0, 0, 0.8);}
.loading span:nth-child(3) { animation-delay: -0.26666s; background: rgba(0, 0, 0, 1);}
.loading span:nth-child(4) { animation-delay: -0.8s; background: rgba(0, 0, 0, 0.8);}
.loading span:nth-child(5) { animation-delay: -1s; background: rgba(0, 0, 0, 0.4);}
@keyframes loading-animation { from { transform: scale(0, 0); }
to { transform: scale(1, 1); }}</style>复制代码复制代码
61
<div class="loading"></div>
<style>.loading { width: 25px; height: 25px; display: inline-block; padding: 0px; border-radius: 100%; border: 5px solid; border-top-color: rgba(254, 168, 23, 0.65); border-bottom-color: rgba(57, 154, 219, 0.65); border-left-color: rgba(188, 84, 93, 0.95); border-right-color: rgba(137, 188, 79, 0.95); animation: loading-animation 2s ease-in-out infinite alternate;}
@keyframes loading-animation { from { transform: rotate(0deg); }
to { transform: rotate(720deg); }}</style>复制代码复制代码
62
<div class="loading"></div>
<style>.loading { width: 45px; height: 45px; display: inline-block; padding: 0px; border-radius: 100%; border: 5px solid; border-top-color: rgba(0, 0, 0, 1); border-bottom-color: rgba(0, 0, 0, 0.1); border-left-color: rgba(0, 0, 0, 1); border-right-color: rgba(0, 0, 0, 0.1); animation: loading-animation 1s ease-in-out infinite;}
@keyframes loading-animation { from { transform: rotate(0deg); }
to { transform: rotate(360deg); }}</style>复制代码复制代码
63
<div class="loading"></div>
<style>.loading { display: inline-block; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #4183d7; border-top: 10px solid #f5ab35; animation: loading-animation 1.2s ease-in-out infinite alternate;}
@keyframes loading-animation { from { transform: rotate(0deg); }
to { transform: rotate(720deg); }}</style>复制代码复制代码
64
<div class="loading"></div>
<style>.loading { display: inline-block; width: 20px; height: 20px; border-left: 2px solid transparent; border-right: 2px solid transparent; border-bottom: 2px solid #000; border-top: 2px solid #000; animation: loading-animation 1.8s ease-in-out infinite alternate;}
.loading:before { content: " "; position: absolute; z-index: -1; top: 5px; left: 0px; right: 0px; bottom: 5px; border-left: 2px solid #000; border-right: 2px solid #000;}
@keyframes loading-animation { from { transform: rotate(0deg); }
to { transform: rotate(720deg); }}</style>复制代码复制代码
65
<div class="loading"></div>
<style>.loading { display: inline-block; width: 30px; height: 4px; background: #000; animation: loading-animation 1.5s linear infinite;}
@keyframes loading-animation { from { transform: rotate(0deg); }
to { transform: rotate(720deg); }}</style>复制代码复制代码
66
<div class="loading"></div>
<style>.loading { display: inline-block; background: rgba(0, 0, 0, 0.6); width: 30px; height: 30px; position: relative; text-align: center; transform: rotate(20eg); animation: loading-animation 3s linear infinite;}
.loading:before { content: ""; position: absolute; top: 0; left: 0; height: 30px; width: 30px; background: rgba(0, 0, 0, 0.4); transform: rotate(135deg);}
@keyframes loading-animation { from { transform: rotate(0deg); }
to { transform: rotate(720deg); }}</style>复制代码复制代码
67
<div class="loading"> <div class="shape shape-1"></div> <div class="shape shape-2"></div> <div class="shape shape-3"></div> <div class="shape shape-4"></div></div>
<style>.loading { width: 30px; height: 30px; position: relative; transform: rotate(45deg);}
.shape { width: 10px; height: 10px; position: absolute;}
.shape-1 { background-color: #1875e5; left: 0; animation: animationShape1 0.5s ease infinite alternate;}
.shape-2 { background-color: #c5523f; right: 0; animation: animationShape2 0.5s ease infinite alternate;}
.shape-3 { background-color: #499255; bottom: 0; animation: animationShape3 0.5s ease infinite alternate;}
.shape-4 { background-color: #f2b736; right: 0; bottom: 0; animation: animationShape4 0.5s ease infinite alternate;}
@keyframes animationShape1 { 0% { transform: translate(0, 0); }
100% { transform: translate(16px, 16px); }}
@keyframes animationShape2 { 0% { transform: translate(0, 0); }
100% { transform: translate(-16px, 16px); }}
@keyframes animationShape3 { 0% { transform: translate(0, 0); }
100% { transform: translate(16px, -16px); }}
@keyframes animationShape4 { 0% { transform: translate(0, 0); }
100% { transform: translate(-16px, -16px); }}</style>复制代码复制代码
68
<div class="loading"> <div class="shape shape-1"></div> <div class="shape shape-2"></div> <div class="shape shape-3"></div> <div class="shape shape-4"></div></div>
<style>.loading { width: 30px; height: 30px; position: relative; animation: animationContainer 1s ease infinite;}
.shape { width: 10px; height: 10px; border-radius: 50%; position: absolute;}
.shape-1 { background-color: #1875e5; left: 0; animation: animationShape1 0.5s ease infinite alternate;}
.shape-2 { background-color: #c5523f; right: 0; animation: animationShape2 0.5s ease infinite alternate;}
.shape-3 { background-color: #499255; bottom: 0; animation: animationShape3 0.5s ease infinite alternate;}
.shape-4 { background-color: #f2b736; right: 0; bottom: 0; animation: animationShape4 0.5s ease infinite alternate;}
@keyframes animationContainer { 0% { transform: rotate(0); }
100% { transform: rotate(360deg); }}
@keyframes animationShape1 { 0% { transform: translate(0, 0); }
100% { transform: translate(20px, 20px); }}
@keyframes animationShape2 { 0% { transform: translate(0, 0); }
100% { transform: translate(-20px, 20px); }}
@keyframes animationShape3 { 0% { transform: translate(0, 0); }
100% { transform: translate(20px, -20px); }}
@keyframes animationShape4 { 0% { transform: translate(0, 0); }
100% { transform: translate(-20px, -20px); }}</style>复制代码复制代码
69
<div class="loading"> <div class="shape shape-1"></div> <div class="shape shape-2"></div> <div class="shape shape-3"></div> <div class="shape shape-4"></div></div>
<style lang="scss" scoped>.loading { width: 20px; height: 20px; position: relative; animation: animationContainer 1s ease infinite;}
.shape { width: 10px; height: 10px; position: absolute;}
.shape-1 { background-color: #1875e5; left: 0; border-top-left-radius: 100%; animation: animationShape1 0.5s ease infinite alternate;}
.shape-2 { background-color: #c5523f; right: 0; border-top-right-radius: 100%; animation: animationShape2 0.5s ease infinite alternate;}
.shape-3 { background-color: #499255; bottom: 0; border-bottom-left-radius: 100%; animation: animationShape3 0.5s ease infinite alternate;}
.shape-4 { background-color: #f2b736; right: 0; bottom: 0; border-bottom-right-radius: 100%; animation: animationShape4 0.5s ease infinite alternate;}
@keyframes animationContainer { 0% { transform: rotate(0); }
100% { transform: rotate(360deg); }}
@keyframes animationShape1 { 0% { transform: translate(0, 0); }
100% { transform: translate(-3px, -3px); }}
@keyframes animationShape2 { 0% { transform: translate(0, 0); }
100% { transform: translate(3px, -3px); }}
@keyframes animationShape3 { 0% { transform: translate(0, 0); }
100% { transform: translate(-3px, 3px); }}
@keyframes animationShape4 { 0% { transform: translate(0, 0); }
100% { transform: translate(3px, 3px); }}</style>复制代码复制代码
70
<div class="loading"> <div class="shape shape-1"></div> <div class="shape shape-2"></div> <div class="shape shape-3"></div> <div class="shape shape-4"></div></div>
<style>.loading { width: 30px; height: 30px; position: relative; transform: rotate(45deg); animation: animationContainer 1s ease infinite;}
.shape { width: 10px; height: 10px; border-radius: 50%; position: absolute;}
.shape-1 { background-color: #1875e5; left: 0; animation: animationShape1 0.3s ease infinite alternate;}
.shape-2 { background-color: #c5523f; right: 0; animation: animationShape2 0.3s ease infinite 0.3s alternate;}
.shape-3 { background-color: #499255; bottom: 0; animation: animationShape3 0.3s ease infinite 0.3s alternate;}
.shape-4 { background-color: #f2b736; right: 0; bottom: 0; animation: animationShape4 0.3s ease infinite alternate;}
@keyframes animationContainer { 0% { transform: rotate(0); }
100% { transform: rotate(360deg); }}
@keyframes animationShape1 { 0% { transform: translate(5px, 5px); }
100% { transform: translate(-3px, -3px); }}
@keyframes animationShape2 { 0% { transform: translate(-5px, 5px); }
100% { transform: translate(3px, -3px); }}
@keyframes animationShape3 { 0% { transform: translate(5px, -5px); }
100% { transform: translate(-3px, 3px); }}
@keyframes animationShape4 { 0% { transform: translate(-5px, -5px); }
100% { transform: translate(3px, 3px); }}</style>复制代码复制代码
71
<div class="loading"> <div class="shape shape-1"></div> <div class="shape shape-2"></div> <div class="shape shape-3"></div> <div class="shape shape-4"></div></div>
<style>.loading { width: 30px; height: 30px; position: relative; transform: rotate(45deg);}
.shape { width: 15px; height: 15px; border-radius: 1px; position: absolute;}
.shape-1 { background-color: #1875e5; left: 0; animation: animationShape1 2s ease infinite;}
.shape-2 { background-color: #c5523f; right: 0; animation: animationShape2 2s ease infinite;}
.shape-3 { background-color: #499255; bottom: 0; animation: animationShape3 2s ease infinite;}
.shape-4 { background-color: #f2b736; right: 0; bottom: 0; animation: animationShape4 2s ease infinite;}
@keyframes animationShape1 { 0% { transform: translate(0); }
25% { transform: translateX(100%); }
50% { transform: translate(100%, 100%); }
75% { transform: translate(0, 100%); }
100% { transform: translateX(0); }}
@keyframes animationShape2 { 0% { transform: translate(0); }
25% { transform: translateY(100%); }
50% { transform: translate(-100%, 100%); }
75% { transform: translate(-100%, 0); }
100% { transform: translate(0); }}
@keyframes animationShape3 { 0% { transform: translate(0); }
25% { transform: translateY(-100%); }
50% { transform: translate(100%, -100%); }
75% { transform: translate(100%, 0); }
100% { transform: translate(0); }}
@keyframes animationShape4 { 0% { transform: translate(0); }
25% { transform: translateX(-100%); }
50% { transform: translate(-100%, -100%); }
75% { transform: translate(0, -100%); }
100% { transform: translate(0); }}</style>复制代码复制代码
72
<div class="loading"> <div class="shape shape-1"></div> <div class="shape shape-2"></div> <div class="shape shape-3"></div> <div class="shape shape-4"></div></div>
<style>.loading { width: 30px; height: 30px; position: relative;}
.shape { width: 13px; height: 13px; position: absolute; border-radius: 2px;}
.shape-1 { background-color: #1875e5; left: 0; animation: animationShape1 2s linear infinite;}
.shape-2 { background-color: #c5523f; right: 0; animation: animationShape2 2s linear infinite;}
.shape-3 { background-color: #499255; bottom: 0; animation: animationShape3 2s linear infinite;}
.shape-4 { background-color: #f2b736; right: 0; bottom: 0; animation: animationShape4 2s linear infinite;}
@keyframes animationShape1 { 0% { transform: translate(0); }
25% { transform: translateX(17px); }
50% { transform: translate(17px, 17px); }
75% { transform: translate(0, 17px); }
100% { transform: translateX(0); }}
@keyframes animationShape2 { 0% { transform: translate(0); }
25% { transform: translateY(17px); }
50% { transform: translate(-17px, 17px); }
75% { transform: translate(-17px, 0); }
100% { transform: translate(0); }}
@keyframes animationShape3 { 0% { transform: translate(0); }
25% { transform: translateY(-17px); }
50% { transform: translate(17px, -17px); }
75% { transform: translate(17px, 0); }
100% { transform: translate(0); }}
@keyframes animationShape4 { 0% { transform: translate(0); }
25% { transform: translateX(-17px); }
50% { transform: translate(-17px, -17px); }
75% { transform: translate(0, -17px); }
100% { transform: translate(0); }}</style>复制代码复制代码
73
<div class="loading"> <div class="shape shape-1"></div> <div class="shape shape-2"></div> <div class="shape shape-3"></div> <div class="shape shape-4"></div></div>
<style>.loading { width: 30px; height: 30px; position: relative;}
.shape { width: 10px; height: 10px; position: absolute; border-radius: 50%; top: 40%;}
.shape-1 { background-color: #1875e5; animation: animationShape1 1s ease infinite;}
.shape-2 { background-color: #c5523f; left: 10px;}
.shape-3 { background-color: #499255; left: 20px;}
.shape-4 { background-color: #f2b736; left: 30px; animation: animationShape4 1s ease infinite;}
@keyframes animationShape1 { 0% { left: -15px; top: 5px; }
25% { left: 0; top: 40%; }
50% { left: 0; top: 40%; }
75% { left: 0; top: 40%; }
100% { left: -15px; top: 5px; }}
@keyframes animationShape4 { 0% { left: 30px; top: 40%; }
25% { left: 30px; top: 40%; }
50% { left: 45px; top: 5px; }
75% { left: 30px; top: 40%; }
100% { left: 30px; top: 40%; }}</style>复制代码复制代码
74
<div class="loading"> <div class="shape shape-1"></div> <div class="shape shape-2"></div> <div class="shape shape-3"></div> <div class="shape shape-4"></div></div>
<style>.loading { width: 30px; height: 30px; position: relative;}
.shape { width: 10px; height: 10px; position: absolute; top: 40%; opacity: 0.5;}
.shape-1 { background-color: #1875e5; left: -20px; animation: animationShape1 1.5s ease infinite;}
.shape-2 { background-color: #c5523f; left: 0px; animation: animationShape2 1.5s ease infinite 0.5s;}
.shape-3 { background-color: #499255; left: 20px; animation: animationShape3 1.5s ease infinite 0.8s;}
.shape-4 { background-color: #f2b736; left: 40px; animation: animationShape4 1.5s ease infinite 1s;}
@keyframes animationShape1 { 0% { transfrom: scale(1); opacity: 0.5; }
50% { transform: scale(1.5); opacity: 1; }
100% { transfrom: scale(0.5); opacity: 0.5; }}
@keyframes animationShape2 { 0% { transfrom: scale(1); opacity: 0.5; }
50% { transform: scale(1.5); opacity: 1; }
100% { transfrom: scale(0.5); opacity: 0.5; }}
@keyframes animationShape3 { 0% { transfrom: scale(1); opacity: 0.5; }
50% { transform: scale(1.5); opacity: 1; }
100% { transfrom: scale(0.5); opacity: 0.5; }}
@keyframes animationShape4 { 0% { transfrom: scale(1); opacity: 0.5; }
50% { transform: scale(1.5); opacity: 1; }
100% { transfrom: scale(0.5); opacity: 0.5; }}</style>复制代码复制代码
75
<div class="loading"> <div class="shape shape-4"> <div class="shape-4-top"></div> <div class="shape-4-bottom"></div> <div class="shape-4-eye"></div> </div> <div class="shape shape-1"></div> <div class="shape shape-2"></div> <div class="shape shape-3"></div></div>
<style>.loading { width: 30px; height: 30px; position: relative; display: flex; align-items: center;}
.shape { width: 10px; height: 10px; position: absolute; border-radius: 50%;}
.shape-1 { background-color: #1875e5; left: -5px; animation: animationShape1 7s linear infinite;}
.shape-2 { background-color: #c5523f; left: 15px; animation: animationShape2 7s linear infinite;}
.shape-3 { background-color: #499255; left: 35px; animation: animationShape3 7s linear infinite;}
.shape-4 { background-color: #f2b736; width: 30px; height: 30px; left: -40px; background-color: transparent !important; z-index: 2; animation: animationShape4 7s linear infinite;}
.shape-4 > div { width: 100%; height: 100%; border-radius: 50%;}
.shape-4 .shape-4-top { position: absolute; top: 0; left: 0; background-color: #fbbc05; clip: rect(0 30px 15px 0); transform: rotate(-30deg); animation: animationShape4Top 0.4s ease infinite alternate;}
.shape-4 .shape-4-bottom { position: absolute; top: 0; left: 0; background-color: #fbbc05; clip: rect(15px 30px 30px 0); transform: rotate(45deg); animation: animationShape4Bottom 0.4s ease infinite alternate;}
.shape-4 .shape-4-eye { width: 5px; height: 5px; background-color: rgba(0, 0, 0, 0.8); border-radius: 50%; position: absolute; top: 5px; right: 10px;}
@keyframes animationShape4Top { 0% { transform: rotate(-30deg); }
100% { transform: rotate(0); }}
@keyframes animationShape4Bottom { 0% { transform: rotate(45deg); }
100% { transform: rotate(0); }}
@keyframes animationShape1 { 0% { opacity: 1; }
17% { opacity: 1; }
19% { opacity: 0; }
30% { opacity: 0; }
40% { opacity: 1; }
85% { opacity: 1; }
90% { opacity: 0; }
95% { opacity: 0; }
100% { opacity: 1; }}
@keyframes animationShape2 { 0% { opacity: 1; }
20% { opacity: 1; }
22% { opacity: 0; }
35% { opacity: 0; }
45% { opacity: 1; }
75% { opacity: 1; }
80% { opacity: 0; }
90% { opacity: 0; }
100% { opacity: 1; }}
@keyframes animationShape3 { 0% { opacity: 1; }
27% { opacity: 1; }
29% { opacity: 0; }
40% { opacity: 0; }
64% { opacity: 1; }
65% { opacity: 1; }
70% { opacity: 0; }
80% { opacity: 0; }
100% { opacity: 1; }}
@keyframes animationShape4 { 0% { left: -40px; transform: rotateY(0); }
45% { left: 50px; transform: rotateY(0); }
50% { left: 50px; transform: rotateY(180deg); }
95% { left: -40px; transform: rotateY(180deg); }
100% { left: -40px; transform: rotateY(0); }}</style>复制代码复制代码
76
<div class="loading"></div>
<style>.loading { width: 48px; height: 48px; border: 3px solid #ddd; border-radius: 50%; display: inline-block; position: relative; animation: rotation 1s linear infinite;}
.loading::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%; border: 3px solid transparent; border-bottom-color: #ff3d00;}
@keyframes rotation { 0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }}</style>复制代码复制代码
77
<div class="loading"></div>
<style>.loading { width: 48px; height: 48px; border: 3px solid #ddd; border-radius: 50%; display: inline-block; position: relative; animation: rotation 1s linear infinite;}
.loading:after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; border-radius: 50%; border: 3px solid transparent; border-bottom-color: #ff3d00;}
@keyframes rotation { 0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }}</style>复制代码复制代码
78
<div class="loading"></div>
<style>.loading { width: 48px; height: 48px; border: 3px solid #ddd; border-radius: 50%; display: inline-block; position: relative; animation: rotation 1s linear infinite;}
.loading:after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%; border: 3px solid; border-color: #ff3d00 transparent;}
@keyframes rotation { 0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }}</style>复制代码
划线
评论
复制
发布于: 4 小时前阅读数: 6
版权声明: 本文为 InfoQ 作者【学习委员】的原创文章。
原文链接:【http://xie.infoq.cn/article/e263fb9068670fe797925ff51】。文章转载请联系作者。
学习委员
关注
反派 2019.03.19 加入
用键盘绣花
评论