CSS(Cascading Style Sheets)是一種用于描述文檔樣式的語(yǔ)言。它為 HTML(Hypertext Markup Language)提供了一種樣式定義的方式,包括字體、顏色、布局等各種視覺(jué)元素。
在本文中,我們將介紹如何使用 CSS 來(lái)畫(huà)一個(gè)簡(jiǎn)單的三葉小風(fēng)車。
/* 1. 定義基本樣式 */ .windmill { width: 100px; height: 100px; position: relative; } /* 2. 畫(huà)三個(gè)葉片 */ .windmill:before, .windmill:after { content: ""; width: 0; height: 0; border: 20px solid; border-color: #007bff transparent #007bff transparent; position: absolute; top: 0; } /* 3. 旋轉(zhuǎn)葉片 */ .windmill:before { left: -20px; transform: rotate(60deg); animation: rotate 2s ease-in-out infinite; } .windmill:after { left: 20px; transform: rotate(120deg); animation: rotate 2s ease-in-out infinite; } @keyframes rotate { from { transform: rotate(0); } to { transform: rotate(360deg); } } /* 4. 畫(huà)中心軸 */ .windmill .axis { width: 10px; height: 10px; background-color: #007bff; border-radius: 50%; position: absolute; top: 45px; left: 45px; }
以上代碼實(shí)現(xiàn)了以下幾個(gè)步驟:
- 定義基本樣式
- 畫(huà)三個(gè)葉片
- 旋轉(zhuǎn)葉片
- 畫(huà)中心軸
最后,我們只需要在 HTML 中添加一個(gè)<div>
元素即可:
<div class="windmill"> <div class="axis"></div> </div>
通過(guò)以上 CSS 代碼,我們成功畫(huà)出了一個(gè)簡(jiǎn)單的三葉小風(fēng)車。