大家好,本篇文章分享雙子星水平位移相對動畫特效,歡迎參考和指正。
效果圖:
HTML代碼:
CSS代碼:
<style><br> .tui-demo-6 {<br> width: 100px;<br> height: 100px;<br> margin: 50px auto;<br> position: relative;<br> }<br> .tui-demo-6:before,.tui-demo-6:after {<br> content: "";<br> height: 30px;<br> width: 30px;<br> border-radius: 50%;<br> position: absolute;<br> top: 0;<br> left: 0;<br> animation: tui-demo-6 1.6s ease-in-out infinite;<br> }<br> .tui-demo-6:before {<br> background: #FF5722;<br> animation-delay: -0.8s;<br> }<br> .tui-demo-6:after {<br> background: #FFB800;<br> }<br> @keyframes tui-demo-6 {<br> 0% {<br> transform: translateX(70px);<br> }<br> 50% {<br> transform: translateX(0);<br> }<br> 100% {<br> transform: translateX(70px);<br> }<br> }<br>/<style>
知識點:
animation:是CSS3的動畫屬性,這裡把animation綁定到tui-demo-6元素上,並指定該動畫需要1.6秒完成,ease-in-out則表示動畫以低速開始和結束,infinite則表示無限次播放該動畫。
@keyframes:該規則表示動畫可以逐步從一個CSS樣式改變為另一個CSS樣式。這裡0%是動畫開頭,100%是動畫結束。
transform:該屬性應用於2D元素或3D元素的轉換,允許元素髮生旋轉,縮放,移動,傾斜等效果。translateX表示元素沿著水平方向或者X軸移動。
最後注意下瀏覽器兼容問題,-webkit-,-ms-或-moz-,有問題可以留言,大家一起學習HTML+CSS基礎入門開發。
閱讀更多 htmlcss 的文章