看网上制作的小老鼠都要套好多div，我将这几天学习的知识结合了一下，用伪元素制作了一只小老鼠的头部，省却了很多代码。
<div class="mouse">
<div class="head">
<div class="ears"></div>
<div class="eyes"></div>
<div class="nose"></div>
<div class="beard"></div>
<div class="teeth"></div>
</div>
</div>
head头、ear耳朵、eye眼睛、nose鼻子、beard胡子、teeth牙
body{font-size: 10px;background:teal;margin:10em;}
.mouse{
width: 7em;
height: 9em;
font-size: 30px;
position: relative;
color:#8F9595;
}
.mouse *::before,
.mouse *::after{
content:'';
position: absolute;
}
.mouse .head{
position: absolute;
width: 6em;
height: 6em;
background-color: currentColor;
border-radius: 50%;
right: 0;
}
.mouse .ears::before,
.mouse .ears::after{
width: 2.5em;
height: 2.5em;
background-color: #E5A95F;
border-radius: 50%;
border:6px solid #6E6E6E;
z-index: 1;
top:-20px;
}
.mouse .ears::before{
left:-23px;
}
.mouse .ears::after{
right: -13px;
transform: rotate(-90deg);
}
.mouse .eyes::before,
.mouse .eyes::after{
width:1em;
height:1em;
background:
radial-gradient(
circle at 50% 70%,
black 0.2em,
transparent 0.2em
),
radial-gradient(
circle at 50% 40%,
white 1.7em,
transparent 1.7em
),
white;
border-radius: 50%;
top:2em;
}
.mouse .eyes::before{
left:1.2em;
}
.mouse .eyes::after{
right:1.5em;
}
.mouse .nose{
position: absolute;
width: 0em;
height: 20em;
border:solid;
border-width:50px 23px;
border-color:#6E6E6E transparent transparent transparent;
top:3em;
left:2.1em;
z-index:2;
}
.mouse .beard{
position: absolute;
width: 3.5em;
height: 1px;
left:1.2em;
top:3.5em;
z-index: 1;
background-color: black;
}
.mouse .beard::before,
.mouse .beard::after{
width: 3.5em;
height: 1px;
background-color: black;
transform: rotate(10deg);
z-index: 1;
}
.mouse .beard::before{
transform: rotate(10deg);
}
.mouse .beard::after{
transform: rotate(-10deg);
}
.mouse .teeth::before,
.mouse .teeth::after{
width: .4em;
height: .6em;
background-color: #fff;
bottom:.5em;
}
.mouse .teeth::before{
transform: rotate(10deg);
left:2.4em;
}
.mouse .teeth::after{
right:2.7em;
transform: rotate(-10deg);
}
CSS纯代码：鼠
2021年2月21日
网友评论