生活随笔
收集整理的這篇文章主要介紹了
CSS3实现Loading动画特效
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
查看效果：
http://hovertree.com/texiao/css3/43/
代碼如下：
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>css3 loading等待加載代碼 - 何問起
</title><style>@keyframes move {from {transform: translate(0,50%);}to {transform: translate(0,850%);}}* {margin: 0;padding: 0;}body {min-width: 325px;height: 100vh;display: flex;flex-wrap: wrap;justify-content: space-around;align-items: center;align-content: flex-start;background: #2a2a2a;}figure {margin: 30px;width: 250px;height: 250px;border-radius: 50%;position: relative;background: #1c1c1c;}section {width: 10%;height: 100%;position: absolute;left: 45%;}section:nth-child(2) {transform: rotate(22.5deg);}section:nth-child(3) {transform: rotate(45deg);}section:nth-child(4) {transform: rotate(67.5deg);}section:nth-child(5) {transform: rotate(90deg);}section:nth-child(6) {transform: rotate(112.5deg);}section:nth-child(7) {transform: rotate(135deg);}section:nth-child(8) {transform: rotate(157.5deg);}figure div {height: 10%;border-radius: 50%;background: dodgerblue;animation: move 1s ease-in-out infinite alternate;}figure:nth-child(1) > section:nth-child(1) > div {animation-delay: -0.1875s;}figure:nth-child(1) > section:nth-child(2) > div {animation-delay: -0.175s;}figure:nth-child(1) > section:nth-child(3) > div {animation-delay: -0.1625s;}figure:nth-child(1) > section:nth-child(4) > div {animation-delay: -0.15s;}figure:nth-child(1) > section:nth-child(5) > div {animation-delay: -0.9375s;}figure:nth-child(1) > section:nth-child(6) > div {animation-delay: -0.925s;}figure:nth-child(1) > section:nth-child(7) > div {animation-delay: -0.9125s;}figure:nth-child(1) > section:nth-child(8) > div {animation-delay: -0.9s;}figure:nth-child(2) > section:nth-child(1) > div {animation-delay: -0.875s;}figure:nth-child(2) > section:nth-child(2) > div {animation-delay: -0.75s;}figure:nth-child(2) > section:nth-child(3) > div {animation-delay: -0.625s;}figure:nth-child(2) > section:nth-child(4) > div {animation-delay: -0.5s;}figure:nth-child(2) > section:nth-child(5) > div {animation-delay: -0.375s;}figure:nth-child(2) > section:nth-child(6) > div {animation-delay: -0.25s;}figure:nth-child(2) > section:nth-child(7) > div {animation-delay: -0.125s;}figure:nth-child(3) > section:nth-child(1) > div {animation-delay: -0.5s;}figure:nth-child(3) > section:nth-child(3) > div {animation-delay: -0.5s;}figure:nth-child(3) > section:nth-child(5) > div {animation-delay: -0.5s;}figure:nth-child(3) > section:nth-child(7) > div {animation-delay: -0.5s;}figure:nth-child(4) > section:nth-child(1) > div {animation-delay: -0.35s;}figure:nth-child(4) > section:nth-child(2) > div {animation-delay: -0.3s;}figure:nth-child(4) > section:nth-child(3) > div {animation-delay: -0.25s;}figure:nth-child(4) > section:nth-child(4) > div {animation-delay: -0.2s;}figure:nth-child(4) > section:nth-child(5) > div {animation-delay: -0.15s;}figure:nth-child(4) > section:nth-child(6) > div {animation-delay: -0.1s;}figure:nth-child(4) > section:nth-child(7) > div {animation-delay: -0.05s;}</style><script src="js/prefixfree.min.js"></script></head><body><figure><section><div></div></section><section><div></div></section><section><div></div></section><section><div></div></section><section><div></div></section><section><div></div></section><section><div></div></section><section><div></div></section></figure><figure><section><div></div></section><section><div></div></section><section><div></div></section><section><div></div></section><section><div></div></section><section><div></div></section><section><div></div></section><section><div></div></section></figure><figure><section><div></div></section><section><div></div></section><section><div></div></section><section><div></div></section><section><div></div></section><section><div></div></section><section><div></div></section><section><div></div></section></figure><figure><section><div></div></section><section><div></div></section><section><div></div></section><section><div></div></section><section><div></div></section><section><div></div></section><section><div></div></section><section><div></div></section></figure><div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"><p>適用瀏覽器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下瀏覽器。
</p><p>來源：
<a href="http://hovertree.com/" target="_blank">何問起
</a></p></div>
</body>
</html> web前端特效：http://www.cnblogs.com/jihua/p/webfront.html
轉載于:https://www.cnblogs.com/jihua/p/css3load.html
總結
以上是生活随笔為你收集整理的CSS3实现Loading动画特效的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
