前天在做每周一练时，还练习了一个绿色的恐龙。
本来想放在十二生肖里，但觉得恐龙虽然是龙，但却不属于中国龙吧。
这几天在练小程序，工作上虽没什么事做，但自己学的好开心，天天边学边打。
以前自己只要一学习，就会有新工作来，总不让踏实学习。
现在总算有时间好好学习了，有得有失吧。
但自己蛮开心的。
这学习果然还是要像之前那样，要边练习，边学习，不管你懂不懂。先打出来，然后再思考。
最近已经小有成果。哈。。。。。。。
<div class="dragon">
<div class="face">
<div class="eyes"></div>
<div class="mouth">
<div class="teeth1"></div>
<div class="teeth2"></div>
<div class="teeth3"></div>
<div class="teeth4"></div>
</div>
<div class="neck"></div>
<div class="scales">
<div class="s1"></div>
<div class="s2"></div>
<div class="s3"></div>
<div class="s4"></div>
</div>
<div class="body"></div>
<div class="tail"></div>
<div class="leg">
<div class="left"></div>
<div class="right"></div>
</div>
</div>
body {
font-size: 10px;
background: white;
margin: 10em;
}
.dragon {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.dragon *::before,
.dragon *::after {
content: '';
position: absolute;
}
.dragon .face {
background-color: green;
height: 80px;
width: 110px;
border-radius: 20px 35px 35px 20px;
position: relative;
}
.dragon .eyes::before {
width: 20px;
height: 22px;
background: radial-gradient( circle at 50% 50%, black 0.5em, transparent 0.5em), radial-gradient( circle at 50% 40%, white 1.7em, transparent 1.7em), white;
border-radius: 50%;
top: 15px;
left: 55px;
}
.dragon .mouth {
background-color: #fff;
height: 3px;
width: 40px;
position: relative;
top: 45px;
left: 69px;
transform: rotate(-10deg);
}
.teeth1,
.teeth2,
.teeth3,
.teeth4 {
height: 0;
width: 0;
position: relative;
}
.teeth1 {
border-top: 12px solid #fff;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
left: 27.5px;
}
.teeth2 {
border-top: 12px solid #fff;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
bottom: 11px;
left: 15px;
}
.teeth3 {
border-top: 12px solid #fff;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
bottom: 23px;
left: 6px;
}
.teeth4 {
border-top: 12px solid #fff;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
bottom: 36px;
right: 1px;
}
.dragon .neck {
background-color: green;
height: 200px;
width: 50px;
border-radius: 20px;
position: relative;
top: 0px;
right: 10px;
transform: rotate(4deg);
}
.scales {
position: relative;
top: -10px;
z-index: -1;
}
.s1,
.s2,
.s3,
.s4 {
height: 0;
width: 0;
border-right: 20px solid green;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
transform: rotate(7deg);
position: relative;
}
.s1 {
bottom: 180px;
right: 21px;
}
.s2 {
bottom: 160px;
right: 24px;
}
.s3 {
bottom: 140px;
right: 27px;
}
.s4 {
bottom: 120px;
right: 29px;
}
.body {
height: 150px;
width: 250px;
background-color: green;
border-radius: 100px 0 30px 0;
position: relative;
bottom: 120px;
right: 215px;
}
.tail {
width: 0;
height: 0;
border-right: 180px solid green;
border-top: 60px solid transparent;
border-bottom: 0px solid transparent;
position: relative;
bottom: 177px;
right: 340px;
transform: rotate(-3deg);
}
.leg .left,
.leg .right {
position: relative;
top: -200px;
left: 0;
}
.leg .left::after,
.leg .left::before,
.leg .right::after,
.leg .right::before {
background-color: green;
height: 65px;
width: 37px;
}
.leg .left::before {
left: -20px
}
.leg .left::after {
left: -80px
}
.leg .right::before {
left: -140px
}
.leg .right::after {
left: -200px
}
网友评论