CSS每周一练：龙
每周一练，十二生肖--龙
<!--龙-->
<div class="dragon">
<div class="head">
<div class="hair_left"></div>
<div class="hair_right"></div>
<div class="horn"></div>
<div class="poke">
<div class="right"></div>
</div>
<div class="face_left">
<div class="eye"></div>
</div>
<div class="face_right">
<div class="eye"></div>
</div>
<div class="snout">
<div class="wrap">
<div class="nose"></div>
</div>
</div>
</div>
</div>
body{font-size: 10px;background:teal;margin:10em;}
.dragon {
position:relative;
display: flex;
align-items: center;
justify-content: center;
}
.dragon *::before,
.dragon *::after{
content:'';
position: absolute;
}
.head{
position: absolute; z-index: 1;
width: 0px; height: 0px;
border: 20px solid transparent;
border-top: 20px solid #F97100;
border-right: 20px solid #F97100;
transform: scale(1.1);
}
.hair_left,
.hair_right{
position: absolute;z-index: 1;
width: 0px; height: 0px;
border: 20px solid transparent;
margin-top: -20px;
}
.hair_left {
border-top: 20px solid #F97100;
border-right: 20px solid #F97100;
margin-left: -20px;
}
.hair_right {
border-top: 20px solid #E03300;
border-left: 20px solid #E03300;
margin-left: 20px;
}
.horn {
width: 0px; height: 0px;
border: 7px solid transparent;
border-bottom: 50px solid #530800;
transform: skew(19deg);
position: absolute;
margin-top: -77px; margin-left: -29px;
}
.horn::after {
width: 0px; height: 0px;
border: 7px solid transparent;
border-bottom: 50px solid #530800;
transform: skew(-38deg);
margin-top: -6px; margin-left: 79px;
}
.poke {
width: 0px; height: 0px;
border: 10px solid transparent;
border-bottom: 10px solid #F97100;
position: absolute;
margin-top: -40px; margin-left: 10px;
}
.poke::before,
.poke::after,
.poke .right{
width: 0px; height: 0px;
border: 5px solid transparent;
}
.poke::before {
border-bottom: 8px solid #F97100;
margin-top: -3px; margin-left: -25px;
}
.poke::after {
border-bottom: 8px solid #DF3400;
margin-top: -3px; margin-left: 15px;
}
.poke .right {
border-bottom: 5px solid #DF3400;
border-left: 5px solid #DF3400;
position: absolute;
margin-top: 1px; margin-left: 0px;
}
.face_left,
.face_right{
width: 0px; height: 0px;
border-top: 10px solid transparent;
position: absolute;
}
.face_left {
border-left: 50px solid transparent;
border-bottom: 50px solid #E13300;
border-right: 10px solid #E13300;
margin-top: -22px; margin-left: -49px;
transform: rotate(-65deg) scaleX(0.8) scaleY(1.3);
z-index: -1;
}
.face_right {
border-right: 50px solid transparent;
border-bottom: 50px solid #940000;
border-left: 10px solid #940000;
margin-top: -23px; margin-left: 30px;
transform: rotate(65deg) scaleX(0.8) scaleY(1.3);
z-index: -10;
}
.face_left .eye,
.face_right .eye{
width: 20px; height: 20px;
background-color: #FBC614;
border-radius: 100%;
position: absolute;
margin-top: 20px; margin-left: -10px;
}
.face_left .eye {
transform: rotate(60deg) scaleX(0.8);
border: 3px solid #980100;
margin-left: -17px;
}
.face_right .eye {
transform: rotate(-60deg) scaleX(0.8);
border: 3px solid #510700;
}
.snout {
width: 6px; height: 0px;
border: 9px solid transparent;
border-bottom: 18px solid #FA7300;
position: absolute; z-index: 2;
margin-top: 8px; margin-left: 8px;
}
.snout::before,
.snout::after,
.snout .wrap{
height: 25px;
}
.snout::before {
width: 33px;
background-color: #E23401;
border-radius: 50px;
margin-top: 17px; margin-left: -17px;
z-index: 3; overflow: hidden;
}
.snout::after {
width: 16px;
background-color: rgba(0, 0, 0, 0.15);
border-radius: 0px 50px 50px 0px;
position: absolute; z-index: 100;
margin-top: 17px; margin-left: 0px;
}
.snout .wrap {
width: 33px;
background-color: #E23401;
border-radius: 50px;
position: absolute; z-index: 3;
margin-top: 17px; margin-left: -14px;
overflow: hidden;
}
.nose {
width: 15px; height: 15px;
background-color: #540700;
position: absolute; z-index: 4;
margin-top: 13px; margin-left: -2px;
border-top-right-radius: 4px;
}
.nose::before {
width: 11px; height: 11px;
background-color: #E23401;
z-index: 4;
margin-top: -7px; margin-left: 6px;
border-radius: 4px;
box-shadow: 0px 5px 0px #540700, 0px 10px 0px #540700;
}
.nose:after {
width: 15px; height: 15px;
background-color: #540700;
margin-top: 0px; margin-left: 16px;
z-index: 4; border-top-left-radius: 4px;
}
