10种CSS3实现的loading动画，挑一个走吧？

时间：2021-05-08

效果

html

<body> <div class="content"> <h3>CSS3 Loading animations</h3> <div class="load-wrapp"> <div class="load-1"> <p>Loading 1</p> <div class="line"></div> <div class="line"></div> <div class="line"></div> </div> </div> <div class="load-wrapp"> <div class="load-2"> <p>Loading 2</p> <div class="line"></div> <div class="line"></div> <div class="line"></div> </div> </div> <div class="load-wrapp"> <div class="load-3"> <p>Loading 3</p> <div class="line"></div> <div class="line"></div> <div class="line"></div> </div> </div> <div class="load-wrapp"> <!-- Loading 4 don't work on firefox because of the border-radius and the "dashed" style. --> <div class="load-4"> <p>Loading 4</p> <div class="ring-1"></div> </div> </div> <div class="load-wrapp"> <div class="load-5"> <p>Loading 5</p> <div class="ring-2"> <div class="ball-holder"> <div class="ball"></div> </div> </div> </div> </div> <div class="load-wrapp"> <div class="load-6"> <p>Loading 6</p> <div class="letter-holder"> <div class="l-1 letter">L</div> <div class="l-2 letter">o</div> <div class="l-3 letter">a</div> <div class="l-4 letter">d</div> <div class="l-5 letter">i</div> <div class="l-6 letter">n</div> <div class="l-7 letter">g</div> <div class="l-8 letter">.</div> <div class="l-9 letter">.</div> <div class="l-10 letter">.</div> </div> </div> </div> <div class="load-wrapp"> <div class="load-7"> <p>Loading 7</p> <div class="square-holder"> <div class="square"></div> </div> </div> </div> <div class="load-wrapp"> <div class="load-8"> <p>Loading 8</p> <div class="line"></div> </div> </div> <div class="load-wrapp"> <div class="load-9"> <p>Loading 9</p> <div class="spinner"> <div class="bubble-1"></div> <div class="bubble-2"></div> </div> </div> </div> <div class="load-wrapp"> <div class="load-10"> <p>Loading 10</p> <div class="bar"></div> </div> </div> </div> <div class="clear"></div></body>

css3

body { margin: 0 auto; padding: 20px; max-width: 1200px; overflow-y: scroll; font-family: "Open Sans", sans-serif; font-weight: 400; color: #777; background-color: #f7f7f7; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}.content { padding: 15px; overflow: hidden; background-color: #e7e7e7; background-color: rgba(0, 0, 0, 0.06);}h1 { padding-bottom: 15px; border-bottom: 1px solid #d8d8d8; font-weight: 600;}h1 span { font-family: monospace, serif;}h3 { padding-bottom: 20px; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 2px 0 rgba(255, 255, 255, 0.9);}p { margin: 0; padding: 10px 0; color: #777;}.clear { clear: both;}.load-wrapp { float: left; width: 100px; height: 100px; margin: 0 10px 10px 0; padding: 20px 20px 20px; border-radius: 5px; text-align: center; background-color: #d8d8d8;}.load-wrapp p { padding: 0 0 20px;}.load-wrapp:last-child { margin-right: 0;}.line { display: inline-block; width: 15px; height: 15px; border-radius: 15px; background-color: #4b9cdb;}.ring-1 { width: 10px; height: 10px; margin: 0 auto; padding: 10px; border: 7px dashed #4b9cdb; border-radius: 100%;}.ring-2 { position: relative; width: 45px; height: 45px; margin: 0 auto; border: 4px solid #4b9cdb; border-radius: 100%;}.ball-holder { position: absolute; width: 12px; height: 45px; left: 17px; top: 0px;}.ball { position: absolute; top: -11px; left: 0; width: 16px; height: 16px; border-radius: 100%; background: #4282b3;}.letter-holder { padding: 16px;}.letter { float: left; font-size: 14px; color: #777;}.square { width: 12px; height: 12px; border-radius: 4px; background-color: #4b9cdb;}.spinner { position: relative; width: 45px; height: 45px; margin: 0 auto;}.bubble-1,.bubble-2 { position: absolute; top: 0; width: 25px; height: 25px; border-radius: 100%; background-color: #4b9cdb;}.bubble-2 { top: auto; bottom: 0;}.bar { float: left; width: 15px; height: 6px; border-radius: 2px; background-color: #4b9cdb;}.load-1 .line:nth-last-child(1) { animation: loadingA 1.5s 1s infinite;}.load-1 .line:nth-last-child(2) { animation: loadingA 1.5s 0.5s infinite;}.load-1 .line:nth-last-child(3) { animation: loadingA 1.5s 0s infinite;}.load-2 .line:nth-last-child(1) { animation: loadingB 1.5s 1s infinite;}.load-2 .line:nth-last-child(2) { animation: loadingB 1.5s 0.5s infinite;}.load-2 .line:nth-last-child(3) { animation: loadingB 1.5s 0s infinite;}.load-3 .line:nth-last-child(1) { animation: loadingC 0.6s 0.1s linear infinite;}.load-3 .line:nth-last-child(2) { animation: loadingC 0.6s 0.2s linear infinite;}.load-3 .line:nth-last-child(3) { animation: loadingC 0.6s 0.3s linear infinite;}.load-4 .ring-1 { animation: loadingD 1.5s 0.3s cubic-bezier(0.17, 0.37, 0.43, 0.67) infinite;}.load-5 .ball-holder { animation: loadingE 1.3s linear infinite;}.load-6 .letter { animation-name: loadingF; animation-duration: 1.6s; animation-iteration-count: infinite; animation-direction: linear;}.l-1 { animation-delay: 0.48s;}.l-2 { animation-delay: 0.6s;}.l-3 { animation-delay: 0.72s;}.l-4 { animation-delay: 0.84s;}.l-5 { animation-delay: 0.96s;}.l-6 { animation-delay: 1.08s;}.l-7 { animation-delay: 1.2s;}.l-8 { animation-delay: 1.32s;}.l-9 { animation-delay: 1.44s;}.l-10 { animation-delay: 1.56s;}.load-7 .square { animation: loadingG 1.5s cubic-bezier(0.17, 0.37, 0.43, 0.67) infinite;}.load-8 .line { animation: loadingH 1.5s cubic-bezier(0.17, 0.37, 0.43, 0.67) infinite;}.load-9 .spinner { animation: loadingI 2s linear infinite;}.load-9 .bubble-1,.load-9 .bubble-2 { animation: bounce 2s ease-in-out infinite;}.load-9 .bubble-2 { animation-delay: -1s;}.load-10 .bar { animation: loadingJ 2s cubic-bezier(0.17, 0.37, 0.43, 0.67) infinite;}@keyframes loadingA { 0 { height: 15px; } 50% { height: 35px; } 100% { height: 15px; }}@keyframes loadingB { 0 { width: 15px; } 50% { width: 35px; } 100% { width: 15px; }}@keyframes loadingC { 0 { transform: translate(0, 0); } 50% { transform: translate(0, 15px); } 100% { transform: translate(0, 0); }}@keyframes loadingD { 0 { transform: rotate(0deg); } 50% { transform: rotate(180deg); } 100% { transform: rotate(360deg); }}@keyframes loadingE { 0 { transform: rotate(0deg); } 100% { transform: rotate(360deg); }}@keyframes loadingF { 0% { opacity: 0; } 100% { opacity: 1; }}@keyframes loadingG { 0% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(70px, 0) rotate(360deg); } 100% { transform: translate(0, 0) rotate(0deg); }}@keyframes loadingH { 0% { width: 15px; } 50% { width: 35px; padding: 4px; } 100% { width: 15px; }}@keyframes loadingI { 100% { transform: rotate(360deg); }}@keyframes bounce { 0%, 100% { transform: scale(0); } 50% { transform: scale(1); }}@keyframes loadingJ { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(80px, 0); background-color: #f5634a; width: 25px; }}

以上就是10种CSS3实现的loading动画，挑一个走吧？的详细内容，更多关于CSS3 loading动画的资料请关注其它相关文章！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章