用CSS畫動物是一項絕妙的技能,它能幫助我們創建栩栩如生的動物形象。下面我們來看一些用CSS畫動物的技巧。
/* 用 CSS 畫小貓 */ .cat { width: 100px; height: 70px; background-color: #fff; border-radius: 50px; position: relative; } .cat:before { content: ""; position: absolute; border-radius: 50%; width: 18px; height: 18px; background-color: #000; top: 20px; left: 20px; } .cat:after { content: ""; position: absolute; border-radius: 50%; width: 18px; height: 18px; background-color: #000; top: 20px; right: 20px; } .cat span { width: 30px; height: 30px; border-radius: 50%; position: absolute; background-color: #000; bottom: 0; left: 35px; } /* 用 CSS 畫小狗 */ .dog { width: 100px; height: 70px; background-color: #fff; border-radius: 50%; position: relative; } .dog:before { content: ""; position: absolute; width: 50px; height: 22px; border-top: 8px solid #000; border-bottom: 8px solid #000; border-radius: 25px; top: 24px; left: -5px; transform: rotate(-40deg); } .dog:after { content: ""; position: absolute; width: 50px; height: 22px; border-top: 8px solid #000; border-bottom: 8px solid #000; border-radius: 25px; top: 20px; right: -5px; transform: rotate(40deg); } .dog span { width: 18px; height: 18px; border-radius: 50%; position: absolute; background-color: #000; bottom: 0; left: 52px; }
以上就是用CSS畫小貓和小狗的代碼示例。通過這些示例,我們可以發現使用CSS畫動物并不難,只需要靈活運用CSS的屬性和值就可以輕松創建出可愛的動物形象。