生活随笔
收集整理的這篇文章主要介紹了
用css3制作旋转加载动画的几种方法
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
2019獨角獸企業重金招聘Python工程師標準>>>
以WebKit為核心的瀏覽器，例如Safari和Chrome，對HTML5有著很好的支持，在移動平臺中這兩個瀏覽器對應的就是iOS和Android。最近在開發一個移動平臺的web app，那么就有機會利用CSS3去實現一些很酷的效果，這些效果原來更多的是利用圖片來實現。最近的一個改進就是利用css3制作旋轉加載動畫。以下將分別介紹幾種實現的方案。
方案1，圖片輔助
傳統做法是直接用動態的GIF圖片，這個方案是用PNG圖片加上背景顏色來模擬靜止的加載圖片，然后利用css中的animation處理圖片的旋轉。相比傳統方案，這個方案的好處是可以直接通過修改CSS來改變背景色，可以修改大小和旋轉速度。如下是具體的CSS代碼：
?
?
@-webkit-keyframes?rotate?{???from?{-webkit-transform:rotate(0deg);}???to?{-webkit-transform:rotate(360deg);}?}?p#spinner?{???height:?30px;???width:?30px;???overflow:?hidden;???background:?#000;???-webkit-mask-image:?url("data:image/png[...]");???-webkit-mask-size:?30px?30px;???-webkit-animation-name:?rotate;???-webkit-animation-duration:?1.5s;???-webkit-animation-iteration-count:?infinite;???-webkit-animation-timing-function:?linear;?}?具體效果查看這里：Demo1
這個方案，只有safari可以很好地支持。chrome下支持不是很好，所以這是一個不太成熟的方案。
方案2， 純CSS實現
方案的思路是，首先用css渲染12個靜態的bar，每個bar間隔30度的角度，給每個bar添加背景變淡的動畫，但是相鄰bar的動畫效果延遲1/12秒，來保證12個bar是按順序變亮然后變暗。從而模擬出旋轉的效果。
這個旋轉效果是偽旋轉，所有的bar都沒有真正做到旋轉。
?
?
@-webkit-keyframes?fade?{?????from?{opacity:?1;}?????to?{opacity:?0.25;}?}?div.spinner?{?????position:?relative;?????width:?30px;?????height:?30px;?????display:?inline-block;?}?div.spinner?div?{?????width:?20%;?????height:?40%;?????background:?#000;?????position:?absolute;?????left:?100%;?????top:?100%;?????opacity:?0;?????-webkit-animation:?fade?1s?linear?infinite;?????-webkit-border-radius:?30px;?}?div.spinner?div.bar1?{?????-webkit-transform:rotate(0deg)?translate(0,?-142%);?????????-webkit-animation-delay:?0s;?}?[......]?div.spinner?div.bar12?{?????-webkit-transform:rotate(330deg)?translate(0,?-142%);??????-webkit-animation-delay:?-0.0833s;?}?具體效果查看這里：Demo2
safari和chrome都能很好地渲染這個效果，并且也很容易定義實際大小，因為所有的bar的高度，寬度有是用百分比來定義的。缺點也很明顯，需要定義12個bar，并且每個bar都要定義獨立的css，相對來說html和css的代碼量有點多。
方案3，這個方案類似sencha touch中實現的效果
方案的基本思想是：首先利用html和css呈現4個bar，再通過css的偽元素: before和：after定義每個bar的前后內容，這樣使得由原始的4個bar產生12個bar的效果，其次通過css設置讓12個bar的透明度逐漸遞減，最后應用css3中旋轉動畫達到實際loading的效果。
?
?
.x-loading-spinner?{?????font-size:?250%;?????height:?1em;?????width:?1em;?????position:?relative;?????-webkit-transform-origin:?0.5em?0.5em;?}?.x-loading-spinner?>?span,?.x-loading-spinner?>?span:before,?.x-loading-spinner?>?span:after?{?????display:?block;?????position:?absolute;?????width:?0.1em;?????height:?0.25em;?????top:?0;?????-webkit-transform-origin:?0.05em?0.5em;?????-webkit-border-radius:?0.05em;?????border-radius:?0.05em;?????content:?"?";?}?.x-loading-spinner?>?span.x-loading-top?{?????background-color:?rgba(170,?170,?170,?0.99);?}?.x-loading-spinner?>?span.x-loading-top::after?{?????background-color:?rgba(170,?170,?170,?0.9);?}?.x-loading-spinner?>?span.x-loading-left::before?{?????background-color:?rgba(170,?170,?170,?0.8);?}?.x-loading-spinner?>?span.x-loading-left?{?????background-color:?rgba(170,?170,?170,?0.7);?}?.x-loading-spinner?>?span.x-loading-left::after?{?????background-color:?rgba(170,?170,?170,?0.6);?}?.x-loading-spinner?>?span.x-loading-bottom::before?{?????background-color:?rgba(170,?170,?170,?0.5);?}?.x-loading-spinner?>?span.x-loading-bottom?{?????background-color:?rgba(170,?170,?170,?0.4);?}?.x-loading-spinner?>?span.x-loading-bottom::after?{?????background-color:?rgba(170,?170,?170,?0.35);?}?.x-loading-spinner?>?span.x-loading-right::before?{?????background-color:?rgba(170,?170,?170,?0.3);?}?.x-loading-spinner?>?span.x-loading-right?{?????background-color:?rgba(170,?170,?170,?0.25);?}?.x-loading-spinner?>?span.x-loading-right::after?{?????background-color:?rgba(170,?170,?170,?0.2);?}?.x-loading-spinner?>?span.x-loading-top::before?{?????background-color:?rgba(170,?170,?170,?0.15);?}?.x-loading-spinner?>?span?{?????left:?50%;?????margin-left:?-0.05em;?}?.x-loading-spinner?>?span.x-loading-top?{?????-webkit-transform:?rotate(0deg);?????-moz-transform:?rotate(0deg);?}?.x-loading-spinner?>?span.x-loading-right?{?????-webkit-transform:?rotate(90deg);?????-moz-transform:?rotate(90deg);?}?.x-loading-spinner?>?span.x-loading-bottom?{?????-webkit-transform:?rotate(180deg);?????-moz-transform:?rotate(180deg);?}?.x-loading-spinner?>?span.x-loading-left?{?????-webkit-transform:?rotate(270deg);?????-moz-transform:?rotate(270deg);?}?.x-loading-spinner?>?span::before?{?????-webkit-transform:?rotate(30deg);?????-moz-transform:?rotate(30deg);?}?.x-loading-spinner?>?span::after?{?????-webkit-transform:?rotate(-30deg);?????-moz-transform:?rotate(-30deg);?}?.x-loading-spinner?{?????-webkit-animation-name:?x-loading-spinner-rotate;?????-webkit-animation-duration:?0.5s;?????-webkit-animation-iteration-count:?infinite;?????-webkit-animation-timing-function:?linear;?}??@-webkit-keyframes?x-loading-spinner-rotate?{?????from?{?????-webkit-transform:?rotate(30deg);?????}?????to?{?????-webkit-transform:?rotate(330deg);?????}?}?具體效果查看這里：Demo3
這個方案是3個方案中應用css技術最徹底的一個，html的代碼最少，并且也真正做到了旋轉效果。缺點是不易擴展，chrome瀏覽器支持不是很理想。
綜上分析，方案1瀏覽器支持不好，但是實現簡單，方案2的html代碼太多，但擴展好，瀏覽器支持不錯，方案3的擴展性不好，瀏覽器支持也不好，但是較好地利用了css的特性。
如果開發桌面web系統，推薦方案2，如果是mobile系統，則方案2和方案3各有優勢。
?
登錄樂搏學院官網http://www.learnbo.com/
或關注我們的官方微博微信，還有更多驚喜哦~
轉載于:https://my.oschina.net/learnbo/blog/818371
總結
以上是生活随笔為你收集整理的用css3制作旋转加载动画的几种方法的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
