在制作網頁的時候,我們可以使用CSS來繪制各種圖形,比如我們可以使用CSS來畫一個十分經典的安卓機器人的形狀。我們來一步一步的學習如何用CSS繪制出一個酷炫的安卓機器人吧
.android-robot { width: 200px; height: 300px; display: inline-block; position: relative; } .head { width: 80px; height: 80px; border-radius: 50%; background-color: #00bfa5; position: absolute; top: 0; left: 50%; transform: translateX(-50%); } .eyes { width: 16px; height: 16px; border-radius: 50%; background-color: #fff; position: absolute; top: 30%; } .left-eye { left: 25%; } .right-eye { right: 25%; } .antenna { width: 4px; height: 60px; background-color: #00bfa5; position: absolute; top: 20%; left: 50%; transform-origin: bottom; transform: translateX(-50%) rotate(45deg); border-top-right-radius: 50%; } .body { width: 120px; height: 160px; background-color: #fff; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); border-radius: 15px 15px 0 0; overflow: hidden; } .shoulder { width: 24px; height: 24px; background-color: #00bfa5; position: absolute; top: 30%; } .left-shoulder { left: 10%; } .right-shoulder { right: 10%; } .arm { width: 64px; height: 20px; background-color: #00bfa5; position: absolute; top: 50%; transform-origin: left; transform: translateY(-40%) rotate(45deg); } .left-arm { left: -22%; } .right-arm { right: -22%; } .hand { width: 16px; height: 16px; border-radius: 50%; background-color: #fff; position: absolute; top: 15%; } .left-hand { left: 90%; } .right-hand { right: 90%; } .leg { width: 20px; height: 64px; background-color: #00bfa5; position: absolute; bottom: 0; } .left-leg { left: 35%; transform-origin: top; transform: translate(1px, -1px) rotate(15deg); } .right-leg { right: 35%; transform-origin: top; transform: translate(-1px, -1px) rotate(-15deg); } .foot { width: 16px; height: 16px; border-radius: 50%; background-color: #fff; position: absolute; bottom: -3px; } .left-foot { left: 30%; } .right-foot { right: 30%; }
CSS具體的代碼如上面所示,通過這段代碼,我們可以設置出安卓機器人的頭、眼睛、天線、身體、肩膀、手臂、手、腿和腳等各個部分的樣式和布局,最終達到制作出一個形狀逼真的安卓機器人的效果
通過上述的示例代碼,我們可以學習如何使用CSS來創建出精美的網頁樣式,同時為了制作的效果更加酷炫,我們也可以根據需要進行一定的自定義修改,這樣能夠更好地體現出個人特色的網頁。