HTML+CSS3製作載入
阿新 • • 發佈：2021-01-20
原理：利用透明度（opacity）淡出產生視覺效果 看起來想轉動
1. 先做2個正方體 兩個正方體用position: absolute;疊加在一起
2. 兩個正方體四個角放上對應的點 在border-radius圓角化 其中一個正方形用transfrom:rotateZ(45deg); 旋轉45度即可
3. 用animation 配合@keyframes 關鍵幀 延遲就可以弄出旋轉的感覺
程式碼如下：
2021-01-20
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> body {height: 100vh;background-color: #ccc;} .bigbox {width: 100px;height: 100px;margin: 100px auto;/*background-color: */pink;position: relative;} .box1 {width: 100%;height: 100%;position: absolute;} .box1 div:nth-child(1) {position: absolute;top: 0;left: 0;width: 10px;height: 10px;background-color: cyan;} .box1 div:nth-child(2) {position: absolute;top: 0;right: 0;width: 10px;height: 10px;background-color: cyan;} .box1 div:nth-child(3) {position: absolute;bottom: 0;right: 0;width: 10px;height: 10px;background-color: cyan;} .box1 div:nth-child(4){position: absolute;bottom: 0;left: 0;width: 10px;height: 10px;background-color: cyan;} .box2 {width: 100%;height: 100%;/*background-color: */pink;position: absolute;transform: rotateZ(45deg);} .box2 div:nth-child(1) {position: absolute;top: 0;left: 0;width: 10px;height: 10px;background-color: cyan;} .box2 div:nth-child(2) {position: absolute;top: 0;right: 0;width: 10px;height: 10px;background-color: cyan;} .box2 div:nth-child(3) {position: absolute;bottom: 0;right: 0;width: 10px;height: 10px;background-color: cyan;} .box2 div:nth-child(4) {position: absolute;bottom: 0;left: 0;width: 10px;height: 10px;background-color: cyan;} .box1 div {border-radius: 50%;animation: 2.4s inks infinite;} .box2 div {border-radius: 50%;animation: 2.4s inks infinite;} @keyframes inks { from {opacity: 1;transform: scale(3);} to {opacity: 0;transform: scale(1);} } .box1 div:nth-child(1) {animation-delay: 0;} .box2 div:nth-child(1) {animation-delay: .3s;} .box1 div:nth-child(2) {animation-delay: .6s;} .box2 div:nth-child(2) {animation-delay: .9s;} .box1 div:nth-child(3) {animation-delay: 1.2s;} .box2 div:nth-child(3) {animation-delay: 1.5s;} .box1 div:nth-child(4) {animation-delay: 1.8s;} .box2 div:nth-child(4) {animation-delay: 2.2s;} </style> </head> <body> <div class="bigbox"> <div class="box1"> <div></div> <div></div> <div></div> <div></div> </div> <div class="box2"> <div></div> <div></div> <div></div> <div></div> </div> </div> </body> </html>