CSS3機器人是一種能夠通過CSS3代碼實現制作的機器人圖案。利用CSS3屬性和偽類,可以創作出各種形態、大小不同的機器人。以下是一個簡單的CSS3機器人的代碼示例:
/* 機器人主體 */ .robot { width: 100px; height: 150px; position: relative; background-color: silver; border-radius: 50%; overflow: hidden; } /* 機器人頭部 */ .robot::before { content: ""; display: block; width: 70px; height: 70px; position: absolute; top: -35px; left: 50%; margin-left: -35px; background-color: silver; border-radius: 50%; } /* 機器人眼睛 */ .robot::after { content: ""; display: block; width: 50px; height: 50px; position: absolute; top: 25px; left: 50%; margin-left: -25px; background-color: yellow; border-radius: 50%; box-shadow: 0 0 10px 2px #333333; } /* 機器人胳膊 */ .left-arm, .right-arm { width: 20px; height: 70px; position: absolute; top: 50px; background-color: silver; border-radius: 10px; } .left-arm { left: -30px; transform: rotate(-30deg); } .right-arm { right: -30px; transform: rotate(30deg); } /* 機器人腿 */ .left-leg, .right-leg { width: 20px; height: 80px; position: absolute; bottom: -10px; background-color: silver; border-radius: 10px; } .left-leg { left: 10px; } .right-leg { right: 10px; }
在這個簡單的樣例中,通過CSS3代碼實現了一個銀色的機器人。機器人的頭部、眼睛、胳膊和腿都分別通過偽類實現。通過調整各種CSS3屬性,可以制作出更加豐富多彩的機器人。
上一篇css 半透明玻璃效果
下一篇css3框模型