在學習CSS的過程中,我嘗試用CSS畫了一只機器貓,以下是我的代碼:
/* 機器貓身體 */ .body { width: 100px; height: 150px; background-color: #c1d3de; border-radius: 50% / 40%; position: relative; overflow: hidden; } /* 機器貓頭部 */ .head { width: 80px; height: 80px; background-color: #b02427; border-radius: 50%; position: absolute; top: -30px; left: 10px; } /* 機器貓眼睛 */ .eyes { width: 20px; height: 20px; background-color: white; border-radius: 50%; position: absolute; top: 40px; left: 30px; } /* 機器貓眼珠 */ .pupil { width: 10px; height: 10px; background-color: black; border-radius: 50%; position: absolute; top: 5px; left: 5px; } /* 機器貓耳朵 */ .ear { width: 40px; height: 60px; background-color: #b02427; border-radius: 50%; position: absolute; top: -30px; left: -10px; transform: rotate(-30deg); transform-origin: top right; } /* 機器貓肚子 */ .belly { width: 80px; height: 100px; background-color: white; border-radius: 50%; position: absolute; top: 50px; left: 10px; } /* 機器貓腳 */ .foot { width: 20px; height: 60px; background-color: #b02427; border-radius: 50%; position: absolute; top: 130px; } /* 機器貓左腳 */ .left-foot { left: -10px; } /* 機器貓右腳 */ .right-foot { right: -10px; }
以上是我的代碼,實現了一只大概的機器貓。當然,這個機器貓肯定還有很多可以改進的地方,比如添加動畫效果和細節等等。
上一篇mysql左外連接怎么寫
下一篇mysql 抓包密碼