CSS3實現的幾個小loading效果
昨晚上閑的沒事突然想做幾個小loading效果，下面是昨晚上做的幾個小案例，分享給大家
1.水波loading：這個loading是我覺得非常簡單，但是看上去的效果卻非常不錯的一個小loading
這個是效果圖片
下面我直接把代碼放上來，大家需要的可以直接拉走
核心思想：（旋轉，以及overflow:hidden屬性），可以把代碼中的overflow屬性注釋掉，保準你看一眼明白了，看不明白回來找我，我對你負責
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { margin: 0; padding: 0 } body { background-color: black } .box { margin: 200px auto; height: 50px; width: 50px; border-radius: 10px; background-color: rgb(0, 174, 255); position: relative; overflow: hidden; border: 1px solid rgb(0, 174, 255); border-top: none; } .a { width: 200px; height: 200px; background: black; position: absolute; left: -80px; top: -180px; border-radius: 80px; animation: xuanzhuan 5s linear infinite; z-index: 2 } @keyframes xuanzhuan{ 0%{transform: rotate(0deg)} 100%{transform: rotate(360deg)} } </style></head><body> <div class="box"> <div class="a"></div> <div class="b"></div> </div></body></html> 2.普通的圓形loading 這個也很簡單 沒啥好說的，直接上代碼了
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{margin: 0;padding: 0} li{list-style: none} body,html{ background-color: black; } ul{ height: 40px; width: 200px; margin: 50px auto; } ul>li{ float: left; height: 20px; width: 20px; border-radius: 50%; background: white; margin-left: 10px; animation: move 2s infinite alternate; transform: scale(0.5) } ul>li:nth-of-type(2){ animation-delay: 0.5s; } ul>li:nth-of-type(3){ animation-delay:1s; } @keyframes move{ 0%{transform: scale(0.5);opacity: 0.5} 100%{transform: scale(1);opacity: 1;} } </style></head><body> <ul> <li></li> <li></li> <li></li> </ul></body></html>3.圓形轉圈loading
思想（把小圓用定位排成圓形，再給每個上添加動畫，用delay控制延遲事件即可）
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <style> *{ margin: 0; padding: 0; } .d1{ width: 50px; height: 50px; position: absolute; margin: 100px; } .d1 p{ width: 14px; height: 14px; border-radius: 50%; background: red; position: absolute; animation: dong 1.5s linear infinite; } .d1 p:nth-child(1){ top: 0; left: 0; } .d1 p:nth-child(2){ top: 0; right: 0; } .d1 p:nth-child(3){ right: 0; bottom: 0; } .d1 p:nth-child(4){ bottom: 0; left: 0; } .d1:nth-of-type(2){ transform: rotate(45deg); } @keyframes dong{ 0%{ transform: scale(0); } 50%{ transform: scale(1); } 100%{ transform: scale(0); } } .d1:nth-of-type(1) p:nth-of-type(1){ /*負值:動畫直接開始,但跳過前...秒動畫*/ animation-delay: -0.1s; } .d1:nth-of-type(2) p:nth-of-type(1){ animation-delay: -0.3s; } .d1:nth-of-type(1) p:nth-of-type(2){ animation-delay: -0.5s; } .d1:nth-of-type(2) p:nth-of-type(2){ animation-delay: -0.7s; } .d1:nth-of-type(1) p:nth-of-type(3){ animation-delay: -0.9s; } .d1:nth-of-type(2) p:nth-of-type(3){ animation-delay: -1.1s; } .d1:nth-of-type(1) p:nth-of-type(4){ animation-delay: -1.3s; } .d1:nth-of-type(2) p:nth-of-type(4){ animation-delay: -1.5s; } </style> <body> <div class="d1"> <p></p> <p></p> <p></p> <p></p> </div> <div class="d1"> <p></p> <p></p> <p></p> <p></p> </div> </body></html>4.交叉效果
這個稍微復雜一點，其實只要捋明白思路，也挺簡單的（PS：大家可以把動畫挨個取消試試，你就會發現好像并不是很難）
<!doctype html><html lang="zh-cn"><head> <meta charset="UTF-8"> <meta name="renderer" content="webkit"></head><body> <style> body { background-color: #F5F5F5; padding: 100px 120px; } .box { margin-left: 500px; display: block; width: 64px; height: 64px; transform-origin: 16px 16px; /* 旋轉 */ animation: xuanzhuan 5s infinite; } /* 平移 */ .ping { animation: pingyi 2.5s infinite; position: absolute; } .hang { width: 64px; height: 24px; position: absolute; } .hang:nth-child(0) { transform: rotate(0deg); } .hang:nth-child(1) { transform: rotate(90deg); } .hang:nth-child(2) { transform: rotate(180deg); } .hang:nth-child(3) { transform: rotate(270deg); } /* 第一個小珠子 */ .ping:nth-child(1) { width: 8px; height: 8px; top: 50%; left: 50%; margin-top: -4px; margin-left: -4px; border-radius: 4px; animation-delay: -0.3s; } /* 第二個小珠子 */ .ping:nth-child(2) { width: 16px; height: 16px; top: 50%; left: 50%; margin-top: -8px; margin-left: -8px; border-radius: 8px; -webkit-animation-delay: -0.6s; animation-delay: -0.6s; } /* 第三個小珠子 */ .ping:nth-child(3) { width: 24px; height: 24px; top: 50%; left: 50%; margin-top: -12px; margin-left: -12px; border-radius: 12px; animation-delay: -0.9s; } .blue { background-color: #1f4e5a; } .red { background-color: #ff5955; } .yellow { background-color: #ffb265; } .green { background-color: #00a691; } @keyframes xuanzhuan { 0% { transform: rotate(0deg);} 100% { transform: rotate(360deg);} } @keyframes pingyi { 0% {transform: translateX(0);} 25% { transform: translateX(-64px); } 75% { transform: translateX(32px);} 100% {transform: translateX(0);} } </style> <div class="box"> <div class="hang"> <div class="ping blue"></div> <div class="ping blue"></div> <div class="ping blue"></div> </div> <div class="hang"> <div class="ping yellow"></div> <div class="ping yellow"></div> <div class="ping yellow"></div> </div> <div class="hang"> <div class="ping red"></div> <div class="ping red"></div> <div class="ping red"></div> </div> <div class="hang"> <div class="ping green"></div> <div class="ping green"></div> <div class="ping green"></div> </div> </div></body></html>5.圓形正方形切換小loading
這個是真的簡單！！！！！
<!doctype html><html lang="zh-cn"><head><meta charset="UTF-8"><meta name="renderer" content="webkit"><link rel="shortcut icon" type="images/x-icon" href="/template/images/ufw.ico"><title>loading-04</title></head><body><style> body{ padding: 80px 100px; } .csshub-loading-icon{ padding:10px; width:10px; height:10px; border-top:20px solid #ED5548; border-right:20px solid #599CD3; border-bottom: 20px solid #5CBD5E; border-left:20px solid #FDD901; background:transparent; animation: csshub-rotate-right-round 1.2s ease-in-out infinite alternate ; } @keyframes csshub-rotate-right-round { 0% { transform: rotate(0deg);} 50% {transform: rotate(180deg); } 100% {transform: rotate(360deg);border-radius:50%;} }</style> <div class="csshub-loading-icon"></div></body></html>我沒做兼容，要是再某些瀏覽器不能運行，加一下瀏覽器前綴就好啦！
以上所述是小編給大家介紹的CSS3實現的幾個小loading效果 ，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
