HTML+CSS基礎入門開發,正圓行星軌道旋轉動畫特效

大家好,本篇文章分享正圓行星軌道旋轉動畫特效,歡迎參考和指正。

效果圖:

HTML+CSS基礎入門開發,正圓行星軌道旋轉動畫特效

正圓行星軌道旋轉動畫特效

HTML代碼:


CSS代碼:

<style><br> .tui-demo-7 {<br> width: 100px;<br> height: 100px;<br> margin: 50px auto;<br> border: 1px solid #393D49;<br> border-radius: 50%;<br> position: relative;<br> animation: tui-demo-7 2.0s linear infinite;<br> }<br> .tui-demo-7:after {<br> content: "";<br> width: 30px;<br> height: 30px;<br> border-radius: 50%;<br> position: absolute;<br> top: 0;<br> left: 0;<br> background: #5FB878;<br> }<br> @keyframes tui-demo-7 {<br> 0% {<br> transform: rotate(0);<br> }<br> 100% {<br> transform: rotate(360deg);<br> }<br> }<br>/<style>

知識點:

animation:是CSS3的動畫屬性,這裡把animation綁定到tui-demo-7元素上,並指定該動畫需要2.0秒完成,linear則表示動畫從頭到尾的速度都是相同的,infinite則表示無限次播放該動畫。

@keyframes:該規則表示動畫可以逐步從一個CSS樣式改變為另一個CSS樣式。這裡0%是動畫開頭,100%是動畫結束。

transform:該屬性應用於2D元素或3D元素的轉換,允許元素髮生旋轉,縮放,移動,傾斜等效果。rotate定義2D旋轉,可以配置旋轉角度。

最後注意下瀏覽器兼容問題,-webkit-,-ms-或-moz-,有問題可以留言,大家一起學習HTML+CSS基礎入門開發。


分享到:


相關文章: