機(jī)器貓，大家應(yīng)該都不會(huì)陌生，是一款來(lái)自日本的漫畫(huà)，《哆啦A夢(mèng)》中的主角之一。而今天我們要說(shuō)的，卻是一個(gè)機(jī)器貓的CSS樣式。

.cat{
width:200px;
height:200px;
border-radius:100px;
background-color:blue;
display:flex;
justify-content:center;
align-items:center;
position:relative;
overflow:hidden;
}
.cat::before{
content:'';
width:180px;
height:180px;
border-radius:90px;
background-color:white;
position:absolute;
}
.cat::after{
content:'';
width:40px;
height:40px;
border-radius:20px;
background-color:blue;
position:absolute;
bottom: 0;
left:50%;
transform:translateX(-50%);
z-index:2;
}
.cat .head{
width:100px;
height:100px;
border-radius:50px;
background-color:white;
position:absolute;
top:10px;
}
.cat .head::before{
content:'';
width:20px;
height:20px;
border-radius:10px;
background-color:black;
position:absolute;
top:30px;
left:40px;
}
.cat .head .ear{
width:40px;
height:40px;
border-radius:20px;
background-color:blue;
position:absolute;
top:-20px;
}
.cat .head .ear.left{
left:5px;
}
.cat .head .ear.right{
right:5px;
}
.cat .eyes{
width:25px;
height:25px;
border-radius:50%;
background-color:white;
position:absolute;
top:50px;
}
.cat .eyes.left{
left:35px;
}
.cat .eyes.right{
right:35px;
}
.cat .eyes .pupil{
width:10px;
height:10px;
border-radius:50%;
background-color:black;
position:absolute;
top:7px;
left:7px;
}
.cat .nose{
width:10px;
height:5px;
background-color:black;
position:absolute;
top:70px;
left:50%;
transform:translateX(-50%);
z-index:2;
}
.cat .mouth{
width:40px;
height:5px;
background-color:black;
position:absolute;
top:77px;
left:50%;
transform:translateX(-50%);
}
.cat .whiskers{
width:75px;
height:2px;
background-color:black;
position:absolute;
top:65px;
left:50%;
transform:translateX(-50%);
z-index:1;
}
.cat .whiskers.left{
transform-origin:left center;
transform:rotate(15deg);
}
.cat .whiskers.right{
transform-origin:right center;
transform:rotate(-15deg);
}

代碼中的.cat類(lèi)是機(jī)器貓的樣式容器，通過(guò)設(shè)置寬高、圓角、背景色、flex布局等樣式，實(shí)現(xiàn)了一個(gè)大圓形的機(jī)器貓。接下來(lái)的偽元素、子元素屬性被用來(lái)讓機(jī)器貓更加逼真，例如head類(lèi)設(shè)置機(jī)器貓頭部的樣式、eyes類(lèi)實(shí)現(xiàn)眼眶和眼珠的效果等等。

這個(gè)CSS機(jī)器貓雖然形態(tài)簡(jiǎn)單，實(shí)際上加入了很多的小技巧，既可愛(ài)又實(shí)用。通過(guò)學(xué)習(xí)這個(gè)例子，可以讓我們更好地掌握CSS的技術(shù)，為我們的網(wǎng)站美化更加注入活力。