CSS是一種用來美化網頁的語言,也可以用它來畫出各種形狀,比如像汽車這樣的復雜圖形。下面我們就來學習一下如何通過CSS來繪制一輛簡單的汽車。
.car{ width: 400px; height: 200px; position: relative; } .car::before{ content:''; width: 0; height: 0; border-left: 200px solid transparent; border-right: 50px solid transparent; border-top: 100px solid #7bb9f9; position: absolute; left: 50%; top: 0; transform: translateX(-50%); } .car::after{ content:''; width: 150px; height: 60px; background-color: #7bb9f9; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); } .car span{ width: 130px; height: 120px; background-color: #1abc9c; position: absolute; left: 50%; transform: translateX(-50%); bottom: 60px; border-radius: 5px; } .car span::before{ content:''; width: 5px; height: 45px; background-color: white; position: absolute; left: 50%; transform: translateX(-50%) rotate(45deg); top: 0; } .car span::after{ content:''; width: 5px; height: 45px; background-color: white; position: absolute; left: 50%; transform: translateX(-50%) rotate(-45deg); top: 0; } .car .wheel{ width: 60px; height: 60px; background-color: #4a4a4a; border-radius: 50%; position: absolute; bottom: 0; } .car .left{ left: 20px; } .car .right{ right: 20px; }
代碼中,我們使用了CSS中的偽元素來實現(xiàn)了汽車的車身和車頂。車輪則是通過一個圓形的div元素來實現(xiàn)的,在HTML中我們可以這樣寫:
通過以上代碼我們已經成功地畫出了一輛簡單的汽車,你可以進一步嘗試優(yōu)化它的樣式,讓它變得更加逼真!
上一篇mysql左邊工具欄灰色
下一篇css畫桌面壁紙