小球形狀的“loading”（在原文程式碼的基礎上做的改造）
阿新 • • 發佈：2019-02-02
<!doctype html> <html> <head> <title>小球形狀的loading</title> <style> /* general styling */ /*.box {*/ /*width:450px;*/ /*margin:18px auto;*/ /*background: red;*/ /*}*/ /* position the bars and balls correctly (rotate them and translate them outward)*/.bar1 { -moz-transform:rotate(0deg) translate(0, -40px); -webkit-transform:rotate(0deg) translate(0, -40px);opacity:0.12; } .bar2 { -moz-transform:rotate(45deg) translate(0, -40px); -webkit-transform:rotate(45deg) translate(0, -40px);opacity:0.25; } .bar3 { -moz-transform:rotate(90deg) translate(0, -40px); -webkit-transform:rotate(90deg) translate(0, -40px);opacity:0.37; } .bar4 { -moz-transform:rotate(135deg) translate(0, -40px); -webkit-transform:rotate(135deg) translate(0, -40px);opacity:0.50; } .bar5 { -moz-transform:rotate(180deg) translate(0, -40px); -webkit-transform:rotate(180deg) translate(0, -40px);opacity:0.62; } .bar6 { -moz-transform:rotate(225deg) translate(0, -40px); -webkit-transform:rotate(225deg) translate(0, -40px);opacity:0.75; } .bar7 { -moz-transform:rotate(270deg) translate(0, -40px); -webkit-transform:rotate(270deg) translate(0, -40px);opacity:0.87; } .bar8 { -moz-transform:rotate(315deg) translate(0, -40px); -webkit-transform:rotate(315deg) translate(0, -40px);opacity:1; } /* set up the three ball spinners */ #div4 { position:relative; width:100px; height:100px; margin:25px; -moz-border-radius:100px; -webkit-border-radius:100px; float:left; -moz-transform:scale(0.5); -webkit-transform:scale(0.5); -webkit-animation-name: rotateThis; -webkit-animation-duration:2s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear; } #div4 div { width:20px; height:20px; background:#000; -moz-border-radius:40px; -webkit-border-radius:40px; position:absolute; left:40px; top:40px; } /* add a shadow to the first */ #div4 div { -moz-box-shadow:black 0 0 4px; -webkit-box-shadow:black 0 0 4px; } </style> <script> //simple script to rotate all spinners 45 degrees on each tick //this works differently from the css transforms, which is smooth var count = 0; function rotate() { var elem4 = document.getElementById('div4'); elem4.style.MozTransform = 'scale(0.5) rotate('+count+'deg)'; elem4.style.WebkitTransform = 'scale(0.5) rotate('+count+'deg)'; if (count==360) { count = 0 } count+=45; window.setTimeout(rotate, 100); } window.setTimeout(rotate, 100); </script> </head> <body> <div class="box"> <div id="div4"> <div class="bar1"></div> <div class="bar2"></div> <div class="bar3"></div> <div class="bar4"></div> <div class="bar5"></div> <div class="bar6"></div> <div class="bar7"></div> <div class="bar8"></div> </div> </div> </body> </html>
上述程式碼實現原文中第4個效果。（注：程式碼主要來自原作者，只在上面做了提取）
原文連結：
https://kilianvalkhof.com/uploads/spinners/