每周一练，十二生肖--兔
css3：兔
运用知识点：
border-radius
radial-gradient
transform:rotate
<div class="rabbit">
<div class="head">
<div class="ears">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="face"></div>
<div class="eyes"></div>
<div class="mouth"></div>
<div class="tongue"></div>
<div class="nose"></div>
<div class="chin"></div>
</div>
</div>
<style>
body{font-size: 10px;background:teal;margin:10em;
display: flex;
align-items: center;
justify-content: center;}
.rabbit{
position: absolute;
width: 16em;
height: 24em;
top:0;left:0;bottom:0;right:0;margin:auto;
overflow: hidden;
}
.rabbit *::before,
.rabbit *::after{
content:'';
position: absolute;
}
.rabbit .head{
background:#f1f1f1;
width: 14em;
height: 12em;
border-radius: 6.5em 6.5em 5em 5em;
position: absolute;
top:12em;left:0.8em;
}
.rabbit .face{
position: absolute;
background:#f1f1f1;
width: 14em;
height: 12em;
border-radius: 6.5em 6.5em 5em 5em;
}
.rabbit .ears .left::before,
.rabbit .ears .right::before{
width: 14em;
height: 4em;
background:#f1f1f1;
border-radius:50%;
top:-6em;
}
.rabbit .ears .left::before{
transform:rotate(80deg);
left:-5.2em;
}
.rabbit .ears .right::before{
transform:rotate(-80deg);
right:-4.2em;
}
.rabbit .ears .left::after,
.rabbit .ears .right::after{
width: 10em;
height: 2.6em;
background:#fff;
border-radius:50%;
top:-4em;
overflow: hidden;
}
.rabbit .ears .left::after{
transform:rotate(78deg);
left:-3em;
}
.rabbit .ears .right::after{
transform:rotate(-78deg);
right:-2em;
}
.rabbit .eyes::before,
.rabbit .eyes::after{
width:3em;
height:3em;
background:
radial-gradient(
circle at 40% 28%,
white 0.8em,
transparent 0.8em
),
radial-gradient(
circle at 50% 40%,
black 3em,
transparent 1em
),
black;
border-radius: 50%;
top:4.2em;
}
.rabbit .eyes::before{
left:3em;
}
.rabbit .eyes::after{
right:3em;
}
.rabbit .mouth{
position: absolute;
z-index:3;top:8.2em;
}
.rabbit .mouth::before,
.rabbit .mouth::after{
width: 2.6em;
height: 2em;
border-radius: 50%;
background:#fff;
top:0;
}
.rabbit .mouth::before{
left:4.8em;
}
.rabbit .mouth::after{
right:-9.2em;
}
.rabbit .nose{
width:1.9em;
height: 1.1em;
border-radius: 50% 50% 35% 35%;
background-color: pink;
position: absolute;
bottom:3em;left:6em;
z-index:3;
}
.rabbit .tongue{
width:2em;
height:2em;
position: absolute;
border-radius: 0 0 5em 5em;
background-color: pink;
bottom:1.5em;left:6em;z-index: 2;
}
.rabbit .chin{
width: 4em;
height: 1.2em;
position: absolute;
bottom:-0.5em;left:5.2em;
border-radius: 50% 50% 0 0;
background-color: #fff;
}
</style>
网友评论