css3 animation動畫360旋轉。旋轉效果用transform:rotate過渡。
阿新 • • 發佈:2018-12-10
旋轉:
<div class="lds-hourglass"></div>
.lds-hourglass { display:inline-block; position:relative; width:72px; height:72px } .lds-hourglass:after { content:" "; display:block; border-radius:50%; width:0; height:0; margin:6px; box-sizing:border-box; border:36px solid #ff8686; border-color:#ffabab transparent #35999e; animation:lds-hourglass 1.2s infinite } @keyframes lds-hourglass { 0% { transform:rotate(0); animation-timing-function:cubic-bezier(.55,.055,.675,.19) } 50% { transform:rotate(900deg); animation-timing-function:cubic-bezier(.215,.61,.355,1) } 100% { transform:rotate(1800deg) } }