每隔一段時間，總結一下，前端之路，路且長，記錄點滴成長。

• 加載中效果

加載中效果

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

第一步、設置橢圓

<!---->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%; } 復制代碼

最終的效果如下：

第二步、設置幀

設置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);} } 復制代碼

最后的實現的效果：

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。