在CSS(層疊樣式表)中,我們可以通過設置樣式來制作一個可愛的小豬圖像。下面我們來一步步學習吧。
.pig { position: relative; width: 200px; height: 200px; } .pig:before { content: ""; position: absolute; top: 0; left: 0; border-radius: 50%; background-color: #fdd4d4; width: 200px; height: 200px; } .pig:after { content: ""; position: absolute; top: 35px; left: 20px; border-radius: 50%; background-color: #f2f2f2; width: 80px; height: 80px; } .pig .eye { position: absolute; top: 70px; left: 70px; width: 30px; height: 30px; border-radius: 50%; background-color: #000; } .pig .nose { position: absolute; top: 110px; left: 90px; width: 20px; height: 20px; border-radius: 50%; background-color: #fdd4d4; transform: rotate(45deg); } .pig .ear { position: absolute; top: 20px; left: 50px; width: 60px; height: 60px; border-radius: 50%; background-color: #fdd4d4; transform: rotate(35deg); } .pig .ear:before { content: ""; position: absolute; top: 10px; left: 10px; width: 40px; height: 40px; border-radius: 50%; background-color: #f2f2f2; transform: rotate(-35deg); } .pig .ear:after { content: ""; position: absolute; top: 15px; left: 15px; width: 30px; height: 30px; border-radius: 50%; background-color: #fdd4d4; transform: rotate(-10deg); }
以上就是制作小豬的CSS樣式,我們可以將其加入HTML頁面中,通過class名為pig的div元素來顯示這個可愛的小豬圖像。