CSS 齒輪旋轉可以為網頁添加華麗的視覺效果,是網頁設計中常用到的技巧之一。
通過 CSS3 中的 transform 屬性,我們可以實現簡單且流暢的動畫效果。下面是一個演示代碼:
.gear { width: 100px; height: 100px; position: relative; perspective: 1000px; animation: rotate 2s infinite linear; } .gear:before, .gear:after { content: ""; position: absolute; border-radius: 50%; background-color: #ccc; } .gear:before { width: 60px; height: 60px; top: 20px; left: 20px; animation: reverse 2s infinite linear; } .gear:after { width: 20px; height: 20px; top: 40px; left: 40px; animation: reverse 2s infinite linear; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes reverse { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
以上代碼演示的齒輪旋轉動畫由兩個帶動畫效果的偽元素構成,使用了關鍵幀動畫實現。
要實現不同風格的齒輪旋轉,只需要做出相應的調整即可。例如,修改齒輪的顏色、大小,以及調整關鍵幀動畫的參數。
上一篇css++alt