纯 css 实现 117 个 Loading 效果（下）
作者：学习委员
- 2021 年 12 月 04 日
本文字数：14247 字
阅读完需：约 47 分钟
前言
因为特效数量太多，所以我分成上、中、下三篇（每篇 39 个特效），本文为下篇。
这是我这几十年间从世界各地寻觅到的 Loading 特效，合计 117 个（本文贴出第 79-117 个），而且是 纯 CSS 制作的。
本文不讲解原理（以后可能会开新篇讲），只贴代码，大家来感受一下复制粘贴的快感吧。
❤️❤️喜欢的给本文点个赞呗~
79
<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; border-color: #ff3d00 transparent;}
@keyframes rotation { 0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }}</style>复制代码复制代码
80
<div class="loading"></div>
<style>.loading { width: 48px; height: 48px; border: 2px solid #ddd; border-radius: 50%; display: inline-block; position: relative; animation: rotation 1s linear infinite;}
.loading:after,.loading:before { content: ""; position: absolute; left: 0; top: 0; background: #ff3d00; width: 6px; height: 6px; transform: translate(150%, 150%); border-radius: 50%;}
.loading:before { left: auto; top: auto; right: 0; bottom: 0; transform: translate(-150%, -150%);}
@keyframes rotation { 0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }}</style>复制代码复制代码
81
<div class="loading"></div>
<style>.loading { width: 48px; height: 48px; border: 2px solid #ddd; border-radius: 50%; display: inline-block; position: relative; animation: rotation 1s linear infinite;}
.loading:after,.loading:before { content: ""; position: absolute; left: 0; top: 0; background: #ff3d00; width: 6px; height: 6px; border-radius: 50%;}
.loading:before { left: auto; top: auto; right: 0; bottom: 0;}
@keyframes rotation { 0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }}</style>复制代码复制代码
82
<div class="loading"></div>
<style>.loading { width: 48px; height: 48px; border-radius: 50%; display: inline-block; position: relative; border: 3px solid; border-color: #ddd #ddd transparent; animation: rotation 1s linear infinite;}
.loading:after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; border: 3px solid; border-color: transparent #ff3d00 #ff3d00; width: 24px; height: 24px; border-radius: 50%; -webkit-animation: rotationBack 0.5s linear infinite; animation: rotationBack 0.5s linear infinite; transform-origin: center center;}
@keyframes rotation { 0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }}
@keyframes rotationBack { 0% { transform: rotate(0deg); } 100% { transform: rotate(-360deg); }}</style>复制代码复制代码
83
<div class="loading"></div>
<style>.loading { width: 48px; height: 48px; border-radius: 50%; display: inline-block; position: relative; border: 3px solid; border-color: #ddd #ddd transparent transparent; animation: rotation 1s linear infinite;}
.loading:after,.loading:before { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; border: 3px solid; border-color: transparent transparent #ff3d00 #ff3d00; width: 40px; height: 40px; border-radius: 50%; -webkit-animation: rotationBack 0.5s linear infinite; animation: rotationBack 0.5s linear infinite; transform-origin: center center;}
.loading:before { width: 32px; height: 32px; border-color: #ddd #ddd transparent transparent; -webkit-animation: rotation 1.5s linear infinite; animation: rotation 1.5s linear infinite;}
@keyframes rotation { 0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }}
@keyframes rotationBack { 0% { transform: rotate(0deg); } 100% { transform: rotate(-360deg); }}</style>复制代码复制代码
84
<div class="loading"></div>
<style>.loading { width: 48px; height: 48px; border: 3px dotted #ddd; border-style: solid solid dotted dotted; border-radius: 50%; display: inline-block; position: relative; animation: rotation 2s linear infinite;}
.loading:after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; border: 3px dotted #ff3d00; border-style: solid solid dotted; width: 24px; height: 24px; border-radius: 50%; animation: rotationBack 1s linear infinite; transform-origin: center center;}
@keyframes rotation { 0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }}
@keyframes rotationBack { 0% { transform: rotate(0deg); }
100% { transform: rotate(-360deg); }}</style>复制代码复制代码
85
<div class="loading"></div>
<style>.loading { width: 48px; height: 48px; border: 2px solid #ddd; border-radius: 50%; display: inline-block; position: relative; animation: rotation 1s linear infinite;}
.loading:after { content: ""; position: absolute; left: 50%; top: 0; background: #ff3d00; width: 3px; height: 24px; transform: translateX(-50%);}
@keyframes rotation { 0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }}</style>复制代码复制代码
86
<div class="loading"></div>
<style>.loading { width: 48px; height: 48px; border-radius: 50%; display: inline-block; position: relative; background: linear-gradient(0deg, rgba(255, 61, 0, 0.2) 33%, #ff3d00 100%); animation: rotation 1s linear infinite;}
.loading:after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%; background: #fff;}
@keyframes rotation { 0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }}</style>复制代码复制代码
87
<div class="loading"></div>
<style>.loading { width: 48px; height: 48px; border-radius: 50%; display: inline-block; border-top: 3px solid #ff3d00; border-right: 3px solid transparent; animation: rotation 1s linear infinite;}
@keyframes rotation { 0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }}</style>复制代码复制代码
88
<div class="loading"></div>
<style>.loading { width: 48px; height: 48px; border-radius: 50%; display: inline-block; border-top: 4px solid #ddd; border-right: 4px solid transparent; animation: rotation 1s linear infinite;}
.loading::after { content: ""; position: absolute; left: 0; top: 0; width: 48px; height: 48px; border-radius: 50%; border-bottom: 4px solid #ff3d00; border-left: 4px solid transparent;}
@keyframes rotation { 0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }}</style>复制代码复制代码
89
<div class="loading"></div>
<style>.loading { width: 48px; height: 48px; border: 3px solid #ddd; border-bottom-color: transparent; border-radius: 50%; display: inline-block; position: relative; animation: rotation 1s linear infinite;}
.loading:after { content: ""; position: absolute; left: 30px; top: 32px; border: 10px solid transparent; border-right-color: #ddd; transform: rotate(-40deg);}
@keyframes rotation { 0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }}</style>复制代码复制代码
90
<div class="loading"></div>
<style>.loading { width: 48px; height: 48px; border-width: 3px; border-style: dashed solid solid dotted; border-color: #ff3d00 #ff3d00 transparent #ff3d00; border-radius: 50%; display: inline-block; position: relative; animation: rotation 1s linear infinite;}
.loading:after { content: ""; position: absolute; left: 30px; top: 32px; border: 10px solid transparent; border-right-color: #ff3d00; transform: rotate(-40deg);}
@keyframes rotation { 0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }}</style>复制代码复制代码
91
<div class="loading"></div>
<style>.loading { border: 24px solid #ddd; border-bottom-color: #ff3d00; border-radius: 50%; display: inline-block; position: relative; animation: rotation 1s linear infinite;}
@keyframes rotation { 0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }}</style>复制代码复制代码
92
<div class="loading"></div>
<style>.loading { width: 10px; height: 10px; border-radius: 50%; display: inline-block; position: relative; color: #666; left: -100px; animation: shadowRolling 2s linear infinite;}
@keyframes shadowRolling { 0% { box-shadow: 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0); }
12% { box-shadow: 100px 0 #666, 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0); }
25% { box-shadow: 110px 0 #666, 100px 0 #666, 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0); }
36% { box-shadow: 120px 0 #666, 110px 0 #666, 100px 0 #666, 0px 0 rgba(255, 255, 255, 0); }
50% { box-shadow: 130px 0 #666, 120px 0 #666, 110px 0 #666, 100px 0 #666; }
62% { box-shadow: 200px 0 rgba(255, 255, 255, 0), 130px 0 #666, 120px 0 #666, 110px 0 #666; }
75% { box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 130px 0 #666, 120px 0 #666; }
87% { box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 130px 0 #666; }
100% { box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0); }}</style>复制代码复制代码
93
<div class="loading"></div>
<style>.loading { width: 48px; height: 48px; display: inline-block; position: relative;}
.loading::after,.loading::before { content: ""; width: 48px; height: 48px; border: 2px solid #ddd; position: absolute; left: 0; top: 0; animation: rotation 2s ease-in-out infinite;}
.loading::after { border-color: #ff3d00; animation-delay: 1s;}
@keyframes rotation { 0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }}</style>复制代码复制代码
94
<div class="loading"></div>
<style>.loading { width: 48px; height: 48px; display: inline-block; position: relative;}
.loading::after,.loading::before { content: ""; width: 48px; height: 48px; border: 2px solid #ddd; position: absolute; left: 0; top: 0; animation: rotation 2s ease-in-out infinite alternate;}
.loading::after { border-color: #ff3d00; animation-direction: alternate-reverse;}
@keyframes rotation { 0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }}</style>复制代码复制代码
95
<div class="loading"></div>
<style>.loading { width: 48px; height: 48px; display: inline-block; position: relative; border: 2px solid #ddd; animation: rotation 2s linear infinite;}
.loading:after,.loading:before { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; border: 2px solid #ff3d00; width: 38px; height: 38px; animation: rotationBack 1.5s linear infinite; transform-origin: center center;}
.loading:before { width: 28px; height: 28px; border-color: #ddd; animation: rotation 1s linear infinite;}
@keyframes rotation { 0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }}
@keyframes rotationBack { 0% { transform: rotate(0deg); }
100% { transform: rotate(-360deg); }}</style>复制代码复制代码
96
<div class="loading"></div>
<style>.loading { width: 16px; height: 16px; box-shadow: 0 30px, 0 -30px; border-radius: 4px; background: currentColor; display: inline-block; position: relative; color: #ddd; left: -30px; animation: loading-animation 2s ease infinite;}
.loading::after,.loading::before { content: ""; width: 16px; height: 16px; box-shadow: 0 30px, 0 -30px; border-radius: 4px; background: currentColor; color: #ddd; position: absolute; left: 30px; top: 0; animation: loading-animation 2s 0.2s ease infinite;}
.loading::before { animation-delay: 0.4s; left: 60px;}
@keyframes loading-animation { 0% { top: 0; color: #ddd; } 50% { top: 30px; color: rgba(255, 255, 255, 0.2); } 100% { top: 0; color: #ddd; }}</style>复制代码复制代码
97
<div class="loading"></div>
<style>.loading { width: 8px; height: 40px; border-radius: 4px; display: inline-block; position: relative; background: currentColor; color: #ddd; animation: loading-animation-m 0.3s 0.3s linear infinite alternate;}
.loading::after,.loading::before { content: ""; width: 8px; height: 40px; border-radius: 4px; background: currentColor; position: absolute; bottom: 0; left: 20px; animation: loading-animation 0.3s 0.45s linear infinite alternate;}
.loading::before { left: -20px; animation-delay: 0s;}
@keyframes loading-animation-m { 0% { height: 40px; transform: translateY(0); }
100% { height: 10px; transform: translateY(30px); }}
@keyframes loading-animation { 0% { height: 48px; }
100% { height: 4.8px; }}</style>复制代码复制代码
98
<div class="loading"></div>
<style>.loading { width: 8px; height: 40px; border-radius: 4px; display: inline-block; position: relative; background: currentColor; color: #ddd; animation: loading-animation 0.3s 0.3s linear infinite alternate;}
.loading::after,.loading::before { content: ""; width: 8px; height: 40px; border-radius: 4px; background: currentColor; position: absolute; top: 50%; transform: translateY(-50%); left: 20px; animation: loading-animation 0.3s 0.45s linear infinite alternate;}
.loading::before { left: -20px; animation-delay: 0s;}
@keyframes loading-animation { 0% { height: 48px; } 100% { height: 4.8px; }}</style>复制代码复制代码
99
<div class="loading"></div>
<style>.loading { width: 8px; height: 48px; display: inline-block; position: relative; border-radius: 4px; left: -40px; animation: loading-animation 1s linear infinite alternate;}
@keyframes loading-animation { 0% { box-shadow: 20px 0 rgba(255, 255, 255, 0.25), 40px 0 #ddd, 60px 0 #ddd; }
50% { box-shadow: 20px 0 #ddd, 40px 0 rgba(255, 255, 255, 0.25), 60px 0 #ddd; }
100% { box-shadow: 20px 0 #ddd, 40px 0 #ddd, 60px 0 rgba(255, 255, 255, 0.25); }}</style>复制代码复制代码
100
<div class="loading"></div>
<style>.loading { width: 8px; height: 48px; display: inline-block; position: relative; border-radius: 4px; left: -40px; color: #ddd; animation: loading-animation 0.6s linear infinite;}
@keyframes loading-animation { 0% { box-shadow: 20px -10px, 40px 10px, 60px 0px; }
25% { box-shadow: 20px 0px, 40px 0px, 60px 10px; }
50% { box-shadow: 20px 10px, 40px -10px, 60px 0px; }
75% { box-shadow: 20px 0px, 40px 0px, 60px -10px; }
100% { box-shadow: 20px -10px, 40px 10px, 60px 0px; }}</style>复制代码复制代码
101
<div class="loading"></div>
<style>.loading { width: 48px; height: 6px; display: inline-block; position: relative; border-radius: 4px; top: -30px; color: #ddd; animation: loading-animation 0.6s linear infinite;}
@keyframes loading-animation { 0% { box-shadow: -10px 20px, 10px 35px, 0px 50px; }
25% { box-shadow: 0px 20px, 0px 35px, 10px 50px; }
50% { box-shadow: 10px 20px, -10px 35px, 0px 50px; }
75% { box-shadow: 0px 20px, 0px 35px, -10px 50px; }
100% { box-shadow: -10px 20px, 10px 35px, 0px 50px; }}</style>复制代码复制代码
102
<div class="loading"></div>
<style>.loading { width: 4.8px; height: 4.8px; display: inline-block; position: relative; border-radius: 4px; color: #ddd; background: currentColor; animation: loading-animation 0.3s 0.3s linear infinite alternate;}
.loading::after,.loading::before { content: ""; width: 4.8px; height: 4.8px; border-radius: 4px; background: currentColor; position: absolute; left: 0; top: 15px; animation: loading-animation 0.3s 0.45s linear infinite alternate;}
.loading::after { top: -15px; animation-delay: 0s;}
@keyframes loading-animation { 0% { width: 4.8px; }
100% { width: 48px; }}</style>复制代码复制代码
103
<div class="loading"></div>
<style>.loading { width: 4.8px; height: 4.8px; display: inline-block; position: relative; border-radius: 4px; color: #ddd; background: currentColor; animation: loading-animation 0.3s 0.3s linear infinite alternate;}
.loading::after,.loading::before { content: ""; width: 4.8px; height: 4.8px; border-radius: 4px; background: currentColor; position: absolute; left: 50%; transform: translateX(-50%); top: 15px; animation: loading-animation 0.3s 0.45s linear infinite alternate;}
.loading::after { top: -15px; animation-delay: 0s;}
@keyframes loading-animation { 0% { width: 4.8px; }
100% { width: 48px; }}</style>复制代码复制代码
104
<div class="loading"></div>
<style>.loading { width: 8px; height: 48px; display: inline-block; position: relative; border-radius: 4px; left: -60px; animation: loading-animation 1s linear infinite alternate;}
@keyframes loading-animation { 0% { box-shadow: 20px 0 rgba(255, 255, 255, 0), 40px 0 rgba(255, 255, 255, 0), 60px 0 rgba(255, 255, 255, 0), 80px 0 rgba(255, 255, 255, 0), 100px 0 rgba(255, 255, 255, 0); }
20% { box-shadow: 20px 0 #ddd, 40px 0 rgba(255, 255, 255, 0), 60px 0 rgba(255, 255, 255, 0), 80px 0 rgba(255, 255, 255, 0), 100px 0 rgba(255, 255, 255, 0); }
40% { box-shadow: 20px 0 #ddd, 40px 0 #ddd, 60px 0 rgba(255, 255, 255, 0), 80px 0 rgba(255, 255, 255, 0), 100px 0 rgba(255, 255, 255, 0); }
60% { box-shadow: 20px 0 #ddd, 40px 0 #ddd, 60px 0 #ddd, 80px 0 rgba(255, 255, 255, 0), 100px 0 rgba(255, 255, 255, 0); }
80% { box-shadow: 20px 0 #ddd, 40px 0 #ddd, 60px 0 #ddd, 80px 0 #ddd, 100px 0 rgba(255, 255, 255, 0); }
100% { box-shadow: 20px 0 #ddd, 40px 0 #ddd, 60px 0 #ddd, 80px 0 #ddd, 100px 0 #ddd; }}</style>复制代码复制代码
105
<div class="loading"></div>
<style>.loading { width: 20px; height: 12px; display: inline-block; position: relative; border-radius: 4px; color: #ddd; background: currentColor; animation: loading-animation 0.6s 0.3s ease infinite alternate;}
.loading::after,.loading::before { content: ""; width: 20px; height: 12px; background: currentColor; position: absolute; border-radius: 4px; top: 0; right: 110%; animation: loading-animation 0.6s ease infinite alternate;}
.loading::after { left: 110%; right: auto; animation-delay: 0.6s;}
@keyframes loading-animation { 0% { width: 20px; }
100% { width: 48px; }}</style>复制代码复制代码
106
<div class="loading">Loading</div>
<style>.loading { font-size: 28px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: #ff3d00; letter-spacing: 2px; position: relative;}
.loading::after { content: "Loading"; position: absolute; left: 0; top: 0; color: #fff; width: 100%; height: 100%; overflow: hidden; animation: loading-animation 6s linear infinite;}
@keyframes loading-animation { 0% { height: 100%; }
100% { height: 0%; }}</style>复制代码复制代码
107
<div class="loading">Loading</div>
<style>.loading { font-size: 28px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: #ff3d00; letter-spacing: 2px; position: relative;}
.loading::after { content: "Loading"; position: absolute; left: 0; top: 0; color: #fff; text-shadow: 0 0 2px #ff3d00, 0 0 1px #ff3d00, 0 0 1px #ff3d00; width: 100%; height: 100%; overflow: hidden; animation: loading-animation 6s linear infinite;}
@keyframes loading-animation { 0% { height: 100%; } 100% { height: 0%; }}</style>复制代码复制代码
108
<div class="loading">Loading</div>
<style>.loading { display: inline-block; font-size: 28px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: #fff; text-shadow: 0 0 2px #ff3d00, 0 0 1px #ff3d00, 0 0 1px #ff3d00; letter-spacing: 2px; position: relative;}
.loading::after { content: "Loading"; position: absolute; left: 0; top: 0; color: #ff3d00; width: 0%; height: 100%; overflow: hidden; animation: loading-animation 6s linear infinite;}
@keyframes loading-animation { 0% { width: 0%; }
100% { width: 100%; }}</style>复制代码复制代码
109
<div class="loading">L ading</div>
<style>.loading { font-size: 28px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: #ddd; position: relative;}
.loading::before { content: ""; position: absolute; left: 0.714285em; bottom: 0.214285em; width: 0.285714em; height: 0.285714em; border-radius: 50%; border: 0.142857em solid #ddd; border-bottom-color: #ff3d00; animation: rotation 0.6s linear infinite;}
@keyframes rotation { 0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }}</style>复制代码复制代码
110
<div class="loading">Load ng</div>
<style>.loading { display: inline-block; color: #ddd; position: relative; font-family: Arial, Helvetica, sans-serif; font-size: 28px; letter-spacing: 0.083333em;}
.loading::before { content: ""; position: absolute; right: 1.458333em; bottom: 0.408333rem; height: 0.583333em; width: 0.104166em; background: currentColor; animation: loading-animation-l 1s linear infinite alternate;}
.loading::after { content: ""; width: 0.208333rem; height: 0.208333rem; position: absolute; left: 2.604166em; top: 0.041666em; border-radius: 50%; background: red; animation: loading-animation 1s linear infinite alternate;}
@keyframes loading-animation-l { 0% { box-shadow: 0 -0.125em, -2.583333em -0.145833em; }
25%, 75% { box-shadow: 0 0px, -2.583333em -0.145833em; }
100% { box-shadow: 0 0px, -2.583333em -0.333333em; }}
@keyframes loading-animation { 0% { transform: translate(0px, 0px) scaleX(1); }
14% { transform: translate(-0.25em, -0.333333em) scaleX(1.05); }
28% { transform: translate(-0.5625em, -0.583333em) scaleX(1.07); }
42% { transform: translate(-0.958333em, -0.729166em) scaleX(1.1); }
57% { transform: translate(-1.458333em, -0.770833em) scaleX(1.1); }
71% { transform: translate(-1.958333em, -0.666666em) scaleX(1.07); }
85% { transform: translate(-2.3125em, -0.458333em) scaleX(1.05); }
100% { transform: translate(-2.604166em, -0.1875em) scaleX(1); }}</style>复制代码复制代码
111
<div class="loading">Load ng</div>
<style>.loading { display: inline-block; color: #ddd; position: relative; font-family: Arial, Helvetica, sans-serif; font-size: 28px; letter-spacing: 0.083333em;}
.loading::before { content: ""; position: absolute; right: 1.458333em; bottom: 0.208333em; height: 0.583333em; width: 0.104166em; background: currentColor;}
.loading::after { content: ""; width: 0.16666em; height: 0.16666em; position: absolute; left: 2.62em; top: 0.041666em; border-radius: 50%; background: red; animation: loading-animation 1s ease-in infinite;}
@keyframes loading-animation { 0% { transform: translateY(0.16666em) scaleY(1) scaleX(1.25); }
25%, 75% { transform: translateY(-0.104166em) scaleY(1.2) scaleX(1); }
50% { transform: translateY(-0.208333em) scaleY(1) scaleX(1); }
100% { transform: translateY(0.16666em) scaleY(0.8) scaleX(0.8); }}</style>复制代码复制代码
112
<div class="loading">Loading</div>
<style>.loading { display: inline-block; color: #ddd; position: relative; font-size: 28px; font-family: Arial, Helvetica, sans-serif;}
.loading::after { content: ""; width: 3px; height: 3px; background: currentColor; position: absolute; bottom: 6px; right: -5px; animation: loading-animation 1s linear infinite;}
@keyframes loading-animation { 0% { box-shadow: 10px 0 rgba(255, 255, 255, 0), 20px 0 rgba(255, 255, 255, 0); }
50% { box-shadow: 10px 0 #ddd, 20px 0 rgba(255, 255, 255, 0); }
100% { box-shadow: 10px 0 #ddd, 20px 0 #ddd; }}</style>复制代码复制代码
113
<div class="loading">Load ng</div>
<style>.loading { display: inline-block; color: #ddd; position: relative; font-family: Arial, Helvetica, sans-serif; font-size: 28px; letter-spacing: 4px;}
.loading::before { content: ""; position: absolute; right: 45px; bottom: 7px; height: 14px; width: 3.5px; background: currentColor;}
.loading::after { content: ""; width: 4px; height: 4px; background: currentColor; position: absolute; right: 44.8px; animation: loading-animation 0.6s ease-out infinite alternate;}
@keyframes loading-animation { 0% { top: 6px; transform: rotate(0deg) scale(1); }
100% { top: -2px; transform: rotate(180deg) scale(1.5); }}</style>复制代码复制代码
114
<div class="loading">Load ng</div>
<style>.loading { display: inline-block; color: #ddd; position: relative; font-family: Arial, Helvetica, sans-serif; font-size: 28px; letter-spacing: 4px;}
.loading::before { content: ""; position: absolute; right: 45px; bottom: 8px; height: 14px; width: 4px; outline: 1px solid #ddd; color: #ff3d00; animation: loading-animation-b 1s linear infinite alternate;}
.loading::after { content: ""; width: 4px; height: 4px; background: #ff3d00; position: absolute; right: 45px; top: 8px; animation: loading-animation-a 1s ease-out infinite alternate;}
@keyframes loading-animation-b { 0% { box-shadow: 0 0 inset; }
100% { box-shadow: 0 -16px inset; }}
@keyframes loading-animation-a { 0% { top: 2px; transform: rotate(0deg) scale(1); }
100% { top: -4px; transform: rotate(180deg) scale(1.5); }}</style>复制代码复制代码
115
<div class="loading"></div>
<style>.loading { display: inline-block; position: relative;}
.loading::before { content: "Loading"; color: #666; font-family: Arial, Helvetica, sans-serif; font-size: 28px; letter-spacing: 2px; display: inline-block; animation: floating 1s ease-out infinite alternate;}
.loading::after { content: ""; width: 100%; height: 10px; background: rgba(0, 0, 0, 0.15); position: absolute; left: 0; top: 100%; filter: blur(4px); border-radius: 50%; animation: loading-animation 1s ease-out infinite alternate;}
@keyframes floating { 0% { transform: translateY(0); }
100% { transform: translateY(-25px); }}
@keyframes loading-animation { 0% { transform: scale(0.8); }
100% { transform: scale(1.2); }}</style>复制代码复制代码
116
<div class="loading">Loading</div>
<style>.loading { font-size: 28px; letter-spacing: 2px; font-family: Arial, Helvetica, sans-serif; color: #666; animation: loading-animation 1s ease-in infinite alternate;}
@keyframes loading-animation { 0% { filter: blur(0px); transform: skew(0deg); }
100% { filter: blur(3px); transform: skew(-4deg); }}</style>复制代码复制代码
117
<div class="loading">Loading</div>
<style>.loading { display: inline-block; font-size: 28px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: #ff3d00; letter-spacing: 2px; position: relative;}
.loading::after { content: "Loading"; position: absolute; left: 0; top: 0; color: #ddd; width: 100%; height: 100%; overflow: hidden; animation: loading-animation 10s ease-in infinite;}
@keyframes loading-animation { 0% { width: 0%; }
100% { width: 100%; }}</style>复制代码
作者：学习委员
链接：https://juejin.cn/post/7037660617779445796
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
划线
评论
复制
发布于: 4 小时前阅读数: 6
版权声明: 本文为 InfoQ 作者【学习委员】的原创文章。
原文链接:【http://xie.infoq.cn/article/271074e5a0f21b7e54dd0b4c4】。文章转载请联系作者。
学习委员
关注
反派 2019.03.19 加入
用键盘绣花
评论