在CSS3中,制作愛心圖標是一個相對簡單的任務。
首先,我們需要創建一個div,作為愛心圖形的容器,并設置寬度和高度。然后,我們使用下面的代碼來畫出愛心形狀:
.heart { position: relative; width: 100px; height: 90px; } .heart:before, .heart:after { position: absolute; content: ""; left: 50px; top: 0; width: 50px; height: 80px; background: red; border-radius: 50px 50px 0 0; transform: rotate(-45deg); transform-origin: 0 100%; } .heart:after { left: 0; transform: rotate(45deg); transform-origin: 100% 100%; }
這個代碼塊包含三個偽元素。我們首先使用:before和:after偽元素來創建愛心的兩邊。我們設置它們的絕對位置、它們的背景顏色和邊框半徑,以便它們形成一個尖銳的形狀。然后我們用transform: rotate()來旋轉它們至適當的角度。最后,我們使用:nth-child偽元素將它們定位在適當的位置上。最終,我們應該看到一個紅色的愛心在我們的屏幕上。
總之,在CSS3中,創建簡單的圖標可以變得非常簡單。使用偽元素和這些新的CSS屬性會讓這個過程變得更加容易和直觀。
上一篇css3前段培訓
下一篇css3刷新動畫循環