机器猫，大家应该都不会陌生，是一款来自日本的漫画，《哆啦A梦》中的主角之一。而今天我们要说的，却是一个机器猫的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类是机器猫的样式容器，通过设置宽高、圆角、背景色、flex布局等样式，实现了一个大圆形的机器猫。接下来的伪元素、子元素属性被用来让机器猫更加逼真，例如head类设置机器猫头部的样式、eyes类实现眼眶和眼珠的效果等等。
这个CSS机器猫虽然形态简单，实际上加入了很多的小技巧，既可爱又实用。通过学习这个例子，可以让我们更好地掌握CSS的技术，为我们的网站美化更加注入活力。
本文链接：https://my.lmcjl.com/post/19099.html
展开阅读全文
4 评论