CSS3是一種新的樣式語言,提供了許多不同的特性,其中包括新的樣式屬性和功能,可以用來實現許多酷炫的效果。這里我們將使用CSS3制作一個小車的動畫效果。
/* 設置小車的樣式 */ .car { width: 100px; height: 50px; background-color: #FFA500; position: absolute; left: -100px; top: 100px; border-radius: 10px 10px 0 0; } /* 添加一個輪子 */ .wheel { width: 30px; height: 30px; background-color: #333; position: absolute; left: 10px; top: 20px; border-radius: 50%; animation: rotate 2s linear infinite; } /* 將輪子旋轉起來 */ @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* 將小車移動 */ .car-move { animation: drive 5s linear infinite; } @keyframes drive { from { left: -100px; } to { left: 500px; } }
在上面的代碼中,我們首先設置了小車的樣式,其中包括它的大小、顏色、位置和圓角。接下來,我們添加了一個輪子,并使用CSS3的動畫屬性將其旋轉起來。然后,我們定義了另一個動畫`drive`,用于將小車從屏幕左側移動到右側。最后,我們將這個動畫應用到小車的class上,使它開始移動。
通過使用CSS3的特性,我們可以輕松地制作出一個小車的動畫效果,讓我們的網站更加生動有趣。
上一篇mysql查詢操作圖
下一篇css3做一個愛心