端午节快到了，画个快乐的小粽子

手可摘棉花
2,526 阅读8分钟

我正在参加「初夏创意投稿大赛」详情请看：初夏创意投稿大赛

嗨！大家好！我是手可摘棉花，一名前端开发，很开心在这里分享文章，期待着大家的点赞👍与关注➕。

简介

端午节快到了，画个快乐的小粽子送给大家，纯css实现的粽子动画，本文主要使用了html+css来实现，css3实现动画，爱心放大缩小渐变透明，小手动画旋转角度，小脚也是一样。下面来给大家详细介绍一下整个制作的过程。

代码块

代码介绍

本文的小粽子动画效果分成两部分完成，一是完成小粽子跟爱心绘制，二是完成爱心跟小粽子欢快走路动画。

1.小粽子+爱心绘画

小粽子制作分成粽子外形+粽叶+手+脚+眼睛+嘴巴+腮红；爱心是左边画两个，右边画三个。

1.1 粽子外形

粽子外形可看到的是一个比较圆滑的三角形，如果用三角形来画行不通，所以我画了一个三角形，再画了三个半圆旋转一下贴合过去，定位拼接起来，仔细调节一下就好。

html：

<!-- 粽子外形 -->
<div class="zongzi">
  <div class="round1"></div>
  <div class="round2"></div>
  <div class="round3"></div>
</div>

样式：

.zongzi{
  width: 0;
  height: 0;
  border-left: 120px solid transparent;
  border-right: 120px solid transparent;
  border-bottom: 200px solid #FFEDC8;
  position: relative;

}
.round1,.round2,.round3{
  width: 238px;
  height: 43px;
  background: #FFEDC8;
  border: 2px solid;
  border-radius: 100% 100% 0 0/100px 100px 0 0;
  transform: rotate(-59deg);
  position: absolute;
  left: -198px;
  top: 67px;
  z-index: -1;
}
.round2{
  left: -48px;
  top: 64px;
  transform: rotate(59deg);
  z-index: -2;
  width: 229px;
}
.round3{
  left: -126px;
  top: 193px;
  transform: rotate(180deg);
  z-index: -3;
  width: 236px;
}

1.2 粽叶

粽叶是两瓣叶子绑在一起的，先画左边，最后实现右边的。实现方法用了圆角调节一下弧度，贴合过去，添加颜色，最后再画几条线上去实现。同理，右侧粽叶也是同样方法实现。

html：

<!-- 粽叶 -->
<div class="ruoye">
  <div class="ruoye-left">
    <div class="line1 line1-bg"></div>
    <div class="line2"></div>
    <div class="line3"></div>
    <div class="line4"></div>
  </div>
  <div class="ruoye-right">
    <div class="line1 line1-bg"></div>
    <div class="line2"></div>
    <div class="line3"></div>
    <div class="line4"></div>
  </div>
</div>

样式：

.ruoye{
  position: absolute;
}

.ruoye{
  position: relative;
}
.ruoye-left{
  width: 234px;
  height: 128px;
  background: #87D15D;
  border-radius: 0 0px 288px 86px/0 0 205px 103px;
  transform: rotate(22deg);
  position: absolute;
  top: -79px;
  left: -12px;
  z-index: 2;
}
.ruoye-left::after{
  content: "";
  position: absolute;
  right: -30px;
  top: 36px;
  background: #87D15D;
  width: 112px;
  height: 33px;
  border-radius: 0 0 344px 326px/0 0 185px 211px;
  transform: rotate(-51deg);
}
.ruoye-left .line1,
.ruoye-left .line2,
.ruoye-left .line3,
.ruoye-left .line4{
  width: 234px;
  height: 2px;
  background: #49912C;
  position: absolute;
  top: -2px;
  left: 3px;
  z-index: 1;
}
.ruoye-left .line1-bg{
  background: #333;
  height: 3px;
}
.ruoye-left .line2{
  width: 242px;
  top: 28px;
  left: -2px;
}
.ruoye-left .line3{
  width: 233px;
  top: 53px;
  left: -2px;
}
.ruoye-left .line4{
  width: 211px;
  top: 76px;
  left: -2px;
}

.ruoye-right{
  width: 100px;
  height: 124px;
  background: #87D15D;
  border-radius: 0 0px 93px 66px/0 0 125px 70px;
  transform: rotate(-24deg);
  position: absolute;
  right: -1px;
  top: -102px;
}
.ruoye-right .line1,
.ruoye-right .line2,
.ruoye-right .line3,
.ruoye-right .line4{
  width: 98px;
  height: 2px;
  background: #49912C;
  position: absolute;
  top: -2px;
  left: 3px;
  z-index: 1;
}
.ruoye-right .line1-bg{
  background: #333;
  height: 3px;
}
.ruoye-right .line2{
  width: 92px;
  top: 20px;
  left: 9px;
}
.ruoye-right .line3{
  width: 92px;
  top: 40px;
  left: 9px;
}
.ruoye-right .line4{
  width: 92px;
  top: 60px;
  left: 9px;
}

1.3 眼睛+腮红+嘴巴

眼睛比较简单就是画了两个椭圆里面白色的小椭圆；腮红也是椭圆,里面是三条线；嘴巴是半椭圆，里面小椭圆。用几个用的圆角样式比较多。

html：

<!-- 眼睛 -->
<div class="eye"></div>
<div class="eye eye-right"></div>
<!-- 腮红 -->
<div class="shy">
  <div class="line1"></div>
  <div class="line2"></div>
  <div class="line3"></div>
</div>
<div class="shy shy-right">
  <div class="line1"></div>
  <div class="line2"></div>
  <div class="line3"></div>
</div>
<!-- 嘴巴 -->
<div class="mouth">
  <div class="round"></div>
</div>

样式：

/* 眼睛 */
.eye{
  width: 20px;
  height: 24px;
  background: #27211C;
  border-radius: 60%;
  position: absolute;
  top: 44px;
  left: 80px;
}
.eye-right{
  left: 136px;
}
.eye::after{
  content: "";
  position: absolute;
  right: 5px;
  top: 8px;
  width: 5px;
  height: 7px;
  background: #FCF9F8;
  border-radius: 50%;
}
/* 腮红 */
.shy{
  width: 24px;
  height: 15px;
  background: #FD8070;
  border-radius: 50%;
  position: absolute;
  top: 73px;
  left: 56px;
}
.shy-right{
  top: 73px;
  left: 152px;
}
.shy .line1,
.shy .line2,
.shy .line3{
  width: 2px;
  height: 7px;
  background: #FEAC99;
  border-radius: 60%;
  position: absolute;
  left: 6px;
  top: 4px;
}
.shy .line2{
  left: 11px;
}
.shy .line3{
  left: 16px;
}
/* 嘴巴 */
.mouth{
  width: 19px;
  height: 28px;
  background: #FABC9D;
  border: 2px solid #2A160E;
  border-radius: 2px 16px 37px 13px/2px 8px 47px 40px;
  position: absolute;
  top: 73px;
  left: 107px;
  overflow: hidden;
}
.mouth .round{
  width: 18px;
  height: 20px;
  background: #FA756A;
  border-radius: 38%;
  position: absolute;
  top: 10px;
  left: 0;
}

1.4 手+脚

手跟脚的实现类似原理，都是画了线条，再画个椭圆拼接在尾巴。

html：

<!-- 手 -->
<div class="hand hand-left">
<div class="round"></div>
</div>
<div class="hand hand-right">
<div class="round"></div>
</div>
<!-- 脚 -->
<div class="leg leg-left"></div>
<div class="leg leg-right"></div>

样式：

/* 手 */
.hand{
  width: 3px;
  height: 80px;
  background: #2A160E;
  transform: rotate(-52deg);
  position: absolute;
  left: 25px;
  top: 12px;
  z-index: -3;
}
.hand .round{
  width: 14px;
  height: 18px;
  background: #2A160E;
  border-radius: 0px 28px 12px;
  position: absolute;
  left: -14px;
  top: -13px;
  z-index: 2;
  transform: rotate(155deg);
}

.hand-right{
  left: 200px;
  top: -19px;
  transform: rotate(27deg);
}
.hand-right .round{
  transform: rotate(-92deg);
  left: 2px;
}

/* 脚 */
.leg{
  width: 3px;
  height: 80px;
  background: #2A160E;
  transform: rotate(3deg);
  position: absolute;
  left: 112px;
  top: 202px;
  z-index: -3;
}
.leg::after{
  content: "";
  width: 27px;
  height: 15px;
  background: #2A160E;
  border-radius: 60%;
  position: absolute;
  left: -1px;
  bottom: -4px;
  z-index: 2;
  transform: rotate(-3deg);
}
.leg-right{
  left: 166px;
  top: 183px;
  transform: rotate(-36deg);
}
.leg-right::after{
  transform: rotate(-4deg);
}

1.5 粽子的阴影

html:

 <div class="z-shadow"></div>

样式：

.z-shadow{
  width: 220px;
  height: 16px;
  background: #CECECE;
  border-radius: 60%;
  position: absolute;
  top: 271px;
  left: 25px;
  z-index: -4;
}

1.6 爱心

画爱心一开始是想到了画了正方形，再画两个圆形拼接定位过去成爱心形状，但是看起来比较规矩。所以我后面选择画了两个椭圆拼接的，因为爱心是有黑色边框的，所以画的椭圆重叠部分是有黑色线条，画了红色遮罩着黑色重叠部分的线条。

html：

<!-- 心 -->
  <div class="i-heart i-heart-pos1">
    <div class="i-heart-l"></div>
    <div class="i-heart-r"></div>
    <div class="mask"></div>
  </div>
  <div class="i-heart i-heart-pos2">
    <div class="i-heart-l"></div>
    <div class="i-heart-r"></div>
    <div class="mask"></div>
  </div>
  <div class="i-heart i-heart-pos3">
    <div class="i-heart-l"></div>
    <div class="i-heart-r"></div>
    <div class="mask"></div>
  </div>
  <div class="i-heart i-heart-pos4">
    <div class="i-heart-l"></div>
    <div class="i-heart-r"></div>
    <div class="mask"></div>
  </div>
  <div class="i-heart i-heart-pos5">
    <div class="i-heart-l"></div>
    <div class="i-heart-r"></div>
    <div class="mask"></div>
  </div>

样式：

.i-heart{
  position: relative;
  transform: rotate(-20deg);
}
.i-heart::before{
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #F1D6D5;
  position: absolute;
  left: -44px;
  top: -17px;
  z-index: 5;
}
.i-heart-l,.i-heart-r{
  position: absolute;
  top: -30px;
  left: -50px;
  width: 42px;
  height: 80px;
  background: #FF5E46;
  border: 2px solid #120105;
  border-radius: 60%;
  transform: rotate(-31deg);
}
.i-heart-r{
  top: -28px;
  left: -29px;
  transform: rotate(15deg);
  width: 42px;
  height: 74px;
}
.i-heart .mask{
  position: absolute;
  left: -38px;
  top: -15px;
  width: 28px;
  height: 57px;
  background: #FF5E46;
  border-radius: 60%;
}
.i-heart .mask::after{
  content: "";
  position: absolute;
  left: 8px;
  top: 40px;
  width: 24px;
  height: 20px;
  background: #FF5E46;
  border-radius: 60%;
}
.i-heart-pos1{
  transform: rotate(-41deg);
  top: -91px;
  left: -28px;
  z-index: -4;
}

.i-heart-pos2{
  transform: rotate(-41deg) scale(0.7);
  top: -273px;
  left: -88px;
}
.i-heart-pos2::before,
.i-heart-pos3::before,
.i-heart-pos4::before,
.i-heart-pos5::before{
  left: -2px;
}
.i-heart-pos3{
  top: -222px;
  left: 70px;
  transform: rotate(30deg) rotateY(180deg) scale(0.7);
  z-index: -4;
}
.i-heart-pos4{
  top: -150px;
  left: 110px;
  transform: rotate(30deg) rotateY(180deg) scale(0.4);
  z-index: -4;
}
.i-heart-pos5{
  top: -44px;
  left: 71px;
  transform: rotate(30deg) rotateY(180deg) scale(0.7);
}

2.动画效果

本文给爱心跟小粽子加了动画效果。

2.1 爱心放大动画

样式：

/* 爱心动画 */
.i-heart-pos1{
  animation: blow 0.8s ease-in-out infinite alternate;
  transform-origin: right center;
}
@keyframes blow{
  0%{
    top: -135px;
    left: -17px;
    transform: rotate(-28deg) scale(1);
    opacity: 0.5;
  }
  100%{
    top: -150px;
    left: 17px;
    transform: rotate(-28deg) scale(1.2);
    opacity: 1;
  }
}
.i-heart-pos2{
  animation: blow2 0.8s ease-in-out infinite alternate;
  transform-origin: center center;
}
@keyframes blow2{
  0%{
    top: -273px;
    left: -88px;
    transform: rotate(-41deg) scale(0.7);
    opacity: 0.5;
  }
  100%{
    top: -288px;
    left: -70px;
    transform: rotate(-41deg) scale(0.8);
    opacity: 1;
  }
}
.i-heart-pos3{
  animation: blow3 0.8s ease-in-out infinite alternate;
  transform-origin: center center;
}
@keyframes blow3{
  0%{
    top: -222px;
    left: 70px;
    transform: rotate(30deg) rotateY(180deg) scale(0.7);
    opacity: 0.5;
  }
  100%{
    top: -232px;
    left: 57px;
    transform: rotate(30deg) rotateY(180deg) scale(0.8);
    opacity: 1;
  }
}
.i-heart-pos4{
  animation: blow4 0.8s ease-in-out infinite alternate;
  transform-origin: center center;
}
@keyframes blow4{
  0%{
    top: -150px;
    left: 110px;
    transform: rotate(30deg) rotateY(180deg) scale(0.4);
    opacity: 0.5;
  }
  100%{
    top: -155px;
    left: 104px;
    transform: rotate(30deg) rotateY(180deg) scale(0.5);
    opacity: 1;
  }
}
.i-heart-pos5{
  animation: blow5 0.8s ease-in-out infinite alternate;
  transform-origin: center center;
}
@keyframes blow5{
  0%{
    top: -44px;
    left: 71px;
    transform: rotate(30deg) rotateY(180deg) scale(0.7);
    opacity: 0.5;
  }
  100%{
    top: -54px;
    left: 62px;
    transform: rotate(30deg) rotateY(180deg) scale(0.8);
    opacity: 1;
  }
}

2.2 手跟脚动画

手跟脚动画用css3的rotate旋转属性实现的，想要控制一个基点固定住的东西用transform-origin: right bottom;这个属性去实现的。粽子身体要有跳动走路的效果，也需要给整个粽子加一下旋转跟y轴移动幅度的动画才行。

样式：

/* 手动画 */
.hand-left{
  animation: reach 0.75s ease-in-out infinite alternate;
  transform-origin: right bottom;
}
@keyframes reach{
  0%{
    transform: rotate(-52deg);
  }
  100%{
    transform: rotate(-152deg);
  }
}
.hand-right{
  animation: reach2 0.75s ease-in-out infinite alternate;
  transform-origin: left bottom;
}
@keyframes reach2{
  0%{
    transform: rotate(27deg);
  }
  100%{
    transform: rotate(134deg);
  }
}

/* 脚动画 */
.leg-left{
  transform-origin: center top;
  animation: jump 0.75s ease-in-out infinite alternate;
}
@keyframes jump{
  0%{
    top: 202px;
    transform: rotate(3deg);
  }
  100%{
    top: 188px;
    transform: rotate(-12deg);
  }
}
.leg-right{
  transform-origin: center top;
  animation: jump2 0.75s ease-in-out infinite alternate;
}
@keyframes jump2{
  0%{
    top: 183px;
    transform: rotate(-36deg);
  }
  100%{
    top: 203px;
    transform: rotate(-3deg);
  }
}

.zongzi-body{
  animation: jump3 0.75s ease-in-out infinite alternate;
}
@keyframes jump3{
  0%{
    transform: rotate(-10deg) translateY(0);
  }
  100%{
    transform: rotate(-6deg) translateY(-15px);
  }
}

总结

本文主要介绍了快乐的小粽子动画实现的流程，本文使用最多的是圆角，定位，旋转，还有伪类遮挡效果。以上就介绍到这里，欢迎大家来学习，感谢观看，谢谢，觉得还不错给个赞支持一下~~ 😛 ❥(^_-)

avatar
文章
阅读
粉丝