我正在参加 码上掘金体验活动,详情:show出你的创意代码块
一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第14天,点击查看活动详情。
嗨!大家好!我是手可摘棉花,一名前端开发,很开心在这里分享文章,期待着大家的点赞👍与关注➕。
介绍
前面给大家介绍了表情包动画,今天来讲一下毛毛虫挪动动画,一个在树叶上挪动的很cute的毛毛虫,下面给大家介绍一下整个动画的流程。
代码块
代码介绍
大家看到上面的代码块的展示效果图,首先由两部分组成,分成树叶和毛毛虫,一开始先画树叶,然后再画毛毛虫,最后实现毛毛虫的动画效果,是不是很简单呀。
1.树叶实现
树叶拆分一下,画一个长方形并设置一个圆角border-radius值,调成树叶差不多形状,然后画树叶枝干纹路,最后通过定位position,慢慢调节每个位置拼接在一起,过程还是比较繁琐,需要耐心调节。
html代码:
<div class="leaf">
<div class="line-c"></div>
<div class="line-1"></div>
<div class="line-1 line-2"></div>
<div class="line-1 line-3"></div>
<div class="line-1 line-4"></div>
<div class="line-1 line-5"></div>
<div class="line-1 line-6"></div>
</div>
/* 叶子 */
.leaf{
width: 300px;
height: 190px;
border-radius: 60% 0;
background: #366535;
}
.line-c{
width: 2px;
height: 351px;
background: #245820;
position: absolute;
left: 146px;
top: -82px;
transform: rotate(58deg);
}
.line-1{
width: 2px;
height: 82px;
background: #245820;
position: absolute;
left: 201px;
top: -22px;
transform: rotate(114deg);
}
.line-2{
height: 120px;
left: 112px;
top: -5px;
}
.line-3{
height: 107px;
left: 60px;
top: 49px;
transform: rotate(105deg);
}
.line-4{
height: 102px;
left: 266px;
top: 26px;
transform: rotate(-13deg);
}
.line-5{
height: 107px;
left: 201px;
top: 65px;
transform: rotate(174deg);
}
.line-6{
height: 83px;
left: 125px;
top: 106px;
transform: rotate(180deg);
}
2.毛毛虫实现
毛毛虫拆分一下,由头部和身体部分一节节组成,笑眯眯的毛毛虫的头部有眼睛+嘴巴+害羞的样子+两个触角。
用的较多的border-radius跟position定位。
html代码:
<div class="caterpillar">
<div class="head">
<div class="eye"></div>
<div class="eye eye-right"></div>
<div class="shy"></div>
<div class="shy shy-right"></div>
<div class="nose"></div>
<div class="mouth"></div>
<div class="ear ear-left"></div>
<div class="ear ear-right"></div>
</div>
<div class="body body0"></div>
<div class="body body1"></div>
<div class="body body2"></div>
<div class="body body3"></div>
<div class="body body4"></div>
<div class="body body5"></div>
</div>
css代码:
/* 毛毛虫 */
.caterpillar{
position: absolute;
top: -30px;
left: -60px;
z-index: 2;
margin: 100px;
}
.head{
width: 68px;
height: 70px;
background: #8DC445;
border-radius: 46%;
position: relative;
z-index: 7;
}
.eye{
transform: rotate(192deg);
display: block;
width: 18px;
height: 6px;
border: 1px solid #0E080C;
border-radius: 0 0 50% 50%/0 0 100% 100%;
border-top: none;
margin: 0 auto;
position: absolute;
top: 22px;
left: 8px;
}
.eye-right{
top: 22px;
left: 40px;
transform: rotate(170deg);
}
.shy{
width: 8px;
height: 10px;
background: #FDC1B9;
border: 2px solid #D69786;
border-radius: 70%;
position: absolute;
top: 33px;
left: 8px;
}
.shy-right{
left: 50px;
}
.mouth{
position: absolute;
left: 24px;
top: 50px;
width: 17px;
height: 4px;
border: 1.5px solid #0E080C;
border-radius: 0 0 50% 50%/0 0 100% 100%;
border-top: none;
margin: 0 auto;
}
.ear{
transform: rotate(221deg);
display: block;
content: "";
width: 32px;
height: 6px;
border: 1px solid #8DC445;
border-radius: 0 0 50% 50%/0 0 100% 100%;
border-top: none;
margin: 0 auto;
position: absolute;
top: -10px;
left: -3px;
}
.ear::after{
content: "";
width: 4px;
height: 4px;
background: #10824F;
border-radius: 70%;
position: absolute;
top: -1px;
left: 30px;
}
.ear-right{
transform: rotate(131deg);
display: block;
content: "";
width: 36px;
height: 8px;
border: 1px solid #8DC445;
border-radius: 0 0 50% 50%/0 0 100% 100%;
border-top: none;
margin: 0 auto;
position: absolute;
top: -13px;
left: 33px;
}
.ear-right::after{
top: -2px;
left: -2px;
}
.body{
transform: rotate(274deg);
display: block;
content: "";
width: 45px;
height: 27px;
border-radius: 0 0 50% 50%/0 0 100% 100%;
border-top: none;
margin: 0 auto;
position: absolute;
top: 25px;
left: 53px;
z-index: 6;
background: #10824F;
}
.body1{
transform: rotate(261deg);
top: 17px;
left: 72px;
width: 38px;
height: 37px;
z-index: 5;
background: #6CB951;
}
.body2{
transform: rotate(254deg);
top: 10px;
left: 91px;
width: 33px;
height: 40px;
z-index: 4;
background: #10824F;
}
.body3{
transform: rotate(250deg);
top: 5px;
left: 107px;
width: 26px;
height: 37px;
z-index: 3;
background: #6CB951;
}
.body4{
transform: rotate(250deg);
top: 5px;
left: 124px;
width: 20px;
height: 25px;
z-index: 2;
background: #10824F;
}
.body5{
transform: rotate(240deg);
top: 1px;
left: 133px;
width: 14px;
height: 27px;
z-index: 1;
background: #6CB951;
}
3.毛毛虫动画
毛毛虫要实现的是身体挪动,头部伸大缩小,以及触角的摆动。
触角的摆动
是通过动画rotate属性旋转的角度实现的。
样式代码:
/* 触角动画 */
.ear-left{
animation: rock 1s ease infinite alternate;
}
@keyframes rock{
0%{
left: 3px;
transform: rotate(242deg);
}
100%{
left: -3px;
transform: rotate(221deg);
}
}
.ear-right{
animation: rock2 1s ease infinite alternate;
}
@keyframes rock2{
from{
left: 33px;
transform: rotate(141deg);
}
to{
left: 33px;
transform: rotate(131deg);
}
}
头部动画
是通过scale属性放大缩小实现的。
样式代码:
/* 头部动画 */
.head{
animation: wave 1s ease infinite alternate;
}
@keyframes wave{
from{
transform: scale(1.1);
}
to{
transform: scale(1);
}
}
身体动画
则是由6节组成,每一节都是用不同形状的椭圆形组合,旋转椭圆形的位置以及行政,最后每一节设置一个动画,每个动画运动的时间都不同,看起来就会有挪动的感觉。
样式代码:
/* 身体动画 */
.body0{
animation: move0 2s ease infinite alternate;
}
@keyframes move0{
from{
left: 50px;
}
to{
left: 53px;
}
}
.body1{
animation: move1 1.8s ease infinite alternate;
}
@keyframes move1{
from{
left: 69px;
}
to{
left: 72px;
}
}
.body2{
animation: move2 1.6s ease infinite alternate;
}
@keyframes move2{
from{
left: 88px;
}
to{
left: 91px;
}
}
.body3{
animation: move3 1.4s ease infinite alternate;
}
@keyframes move3{
from{
left: 103px;
}
to{
left: 107px;
}
}
.body4{
animation: move4 1.2s ease infinite alternate;
}
@keyframes move4{
from{
left: 120px;
}
to{
left: 124px;
}
}
.body5{
animation: move5 1s ease infinite alternate;
}
@keyframes move5{
from{
left: 130px;
}
to{
left: 133px;
}
}
毛毛虫在树叶子挪动的动画
/* 毛毛虫在树叶挪动的动画 */
.caterpillar{
animation: moveAll 12s linear;
}
@keyframes moveAll{
from{
top: -84px;
left: 39px;
transform: scale(0.8);
}
to{
top: -30px;
left: -60px;
transform: scale(1);
}
}
最终效果:
总结
以上就是毛毛虫制作流程,以及动画的实现。大家如果喜欢的话点个赞或关注一下,我是手可摘棉花,今天的讲述就到这里了,感谢大家的观看与支持,谢谢~ 😛