每隔一段時(shí)間，總結(jié)一下，前端之路，路且長(zhǎng)，記錄點(diǎn)滴成長(zhǎng)。

• 加載中效果

加載中效果

動(dòng)畫加載的效果，首先第一步就是需要設(shè)置一個(gè)橢圓border-radius: 50%;，然后就是需要使用到border的樣式，然后就是transform: rotate() 出現(xiàn)的旋轉(zhuǎn)的效果。

第一步、設(shè)置橢圓

<!---->html的 <div id="demo"></div>#demo {width: 10em;height: 10em;margin: 100px auto;border: 1.1em solid rgba(255, 255, 255, .2);border-left-color: #fff;border-radius: 50%; } 復(fù)制代碼

最終的效果如下：

第二步、設(shè)置幀

設(shè)置animation的屬性

body {background: #000; } .spinner {width: 10em;height: 10em;margin: 100px auto;border: 1.1em solid rgba(255, 255, 255, .2);border-left-color: #fff;border-radius: 50%;-webkit-animation: load 1.1s infinite linear; } @-webkit-keyframes load {from {transform: rotate(0deg);}to {transform: rotate(360deg);} } 復(fù)制代碼

最后的實(shí)現(xiàn)的效果：

與50位技術(shù)專家面對(duì)面20年技術(shù)見證，附贈(zèng)技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的CSS3常用动画总结的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。