夏天到了，吃块西瓜清爽一夏

手可摘棉花
1,758 阅读7分钟

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

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

简介

夏天到了，想必大家在夏天吃得最多的水果就是西瓜吧，特别是天气很热的时候，能吃上一口冰西瓜，瞬间就很解渴，整个人都神清气爽了。本文给大家画了一个可爱的西瓜卡通人物，在举重，想要表达的是夏天在吃吃喝喝享受着美食的同时也别忘记了锻炼身体喔，主要使用了html+css来实现，css3实现动画，卡通人物的形象是画得比较滑稽可爱的形象，带着一副墨镜，墨镜的光片设置了闪动的效果，酷酷的感觉，嘻嘻~。下面来给大家详细介绍一下整个制作的过程。

代码块

code.juejin.cn/pen/7101178…

代码介绍

本文绘画的内容是可爱搞笑的一个在举重的西瓜卡通人物，制作分成两部分完成：一是完成西瓜卡通人物的制作；二是完成卡通人物在举重酷酷的动画效果。

1. 卡通西瓜人物绘画

卡通西瓜人物绘画实现方法是，先绘画西瓜的外形出来，画西瓜皮，西瓜籽，然后画卡通形象，墨镜，大笑的嘴巴，最后画小腿跟小手。

1.1 西瓜实现

西瓜绘画实现的外形还是有点美中不足的感觉，红色部分是画了一个三角形，底部绿色的西瓜皮是用了椭圆画的，另外一个椭圆遮罩，这样看起来有弧度。

html:

<!-- 西瓜 -->
<div class="shape">
  <div class="shape-t"></div>
  <div class="shape-b"></div>
  <div class="shape-b2"></div>
  <div class="shape-mask"></div>
  <div class="shape-mask2"></div>
</div>

样式:

/* 西瓜 */
.shape{
  position: absolute;
}
.shape-mask,.shape-mask2{
  position: absolute;
  left: -50px;
  top: 0;
  border: 100px solid transparent;
  border-bottom: 200px solid #fefefe;
  transform: rotate(50deg);
  z-index: 3;
}
.shape-mask2{
  left: 50px;
  transform: rotate(-50deg);
}
.shape-t{
  border: 100px solid transparent;
  border-bottom: 200px solid #FF5F67;
}
.shape-b{
  background: #58912F;
  width: 200px;
  height: 75px;
  border-radius: 0 0 210% 184%;
}
 .shape-b2{
  background: #FF5F67;
  width: 200px;
  height: 63px;
  border-radius: 0 0 246% 232%;
  position: absolute;
  bottom: 28px;
}

1.2 瓜子实现

瓜子实现是由很多个椭圆组成的，通过定位和旋转不同的角度摆放瓜子的位置来实现的，比较简单。

html:

<!-- 瓜子 -->
<div class="seeds">
  <div class="seeds-01"></div>
  <div class="seeds-01 seeds-02"></div>
  <div class="seeds-01 seeds-03"></div>
  <div class="seeds-01 seeds-04"></div>
  <div class="seeds-01 seeds-05"></div>
  <div class="seeds-01 seeds-06"></div>
  <div class="seeds-01 seeds-07"></div>
  <div class="seeds-01 seeds-08"></div>
  <div class="seeds-01 seeds-09"></div>
</div>

样式:

/* 瓜子 */
.seeds{
  position: absolute;
  top: 142px;
  left: 98px;
  z-index: 4;
}
.seeds-01{
  width: 8px;
  height: 14px;
  background: #2D3044;
  border-radius: 60%;
  transform: rotate(-20deg);
}
.seeds-02{
  position: absolute;
  top: 32px;
  left: -17px;
  transform: rotate(4deg);
}
.seeds-03{
  position: absolute;
  top: 32px;
  left: 17px;
  transform: rotate(34deg);
}
.seeds-04{
  position: absolute;
  top: 110px;
  left: -41px;
  transform: rotate(60deg);
}
.seeds-05{
  position: absolute;
  top: 135px;
  left: -62px;
  transform: rotate(86deg);
}
.seeds-06{
  position: absolute;
  top: 136px;
  left: -39px;
  transform: rotate(-56deg);
}
.seeds-07{
  position: absolute;
  top: 110px;
  left: 41px;
  transform: rotate(-150deg);
}
.seeds-08{
  position: absolute;
  top: 135px;
  left: 62px;
  transform: rotate(320deg);
}
.seeds-09{
  position: absolute;
  top: 148px;
  left: 41px;
  transform: rotate(62deg);
}

1.3 墨镜的实现

墨镜的实现是由两个矩形链接一条弯曲的线条组成的,镜片加了两条灰色的亮光片,酷酷的,我就是这条街最靓的仔,哈哈~

html:

<!-- 眼镜 -->
<div class="glasses">
  <div class="glasses-l">
    <div class="rayCon">
      <div class="ray01"></div>
      <div class="ray02"></div>
    </div>
  </div>
  <div class="glasses-gou"></div>
  <div class="glasses-l glasses-r">
    <div class="rayCon">
      <div class="ray01"></div>
      <div class="ray02"></div>
    </div>
  </div>
</div>

样式：

/* 眼镜 */
.glasses{
  position: absolute;
  top: 198px;
  left: 32px;
  z-index: 5;
}
.glasses-l{
  width: 50px;
  height: 30px;
  border: 5px solid #589130;
  background: #2E3144;
  position: absolute;
  z-index: 5;
  overflow: hidden;
}
.rayCon{
  position: absolute;
  left: 0;
  top: 0;
}
.ray01,.ray02{
  position: absolute;
  top: 0px;
  left: 14px;
  width: 3px;
  height: 33px;
  background: #a7abc0;
  transform: rotate(20deg);
}
.ray02{
  width: 5px;
  left: 24px;
}
.glasses-r{
  position: absolute;
  left: 80px;
  top: 0;
}
.glasses-gou{
  width: 22px;
  height: 4px;
  border: 5px solid #589130;
  border-bottom: 0;
  border-radius: 50% 50% 0 0/100% 100% 0 0;
  position: absolute;
  left: 53px;
  top: 11px;
  z-index: 3;
}

1.4 嘴巴实现

嘴巴实现是由一个半圆组成,半圆里面画了一些线条,笑起来的牙齿,右边加了一个十字线

html:

<!-- 嘴巴 -->
<div class="mouth-con">
  <div class="mouth">
    <div class="line1"></div>
    <div class="line1 line2"></div>
    <div class="line1 line3"></div>
    <div class="line1 line4"></div>
  </div>
  <div class="mouth-r01"></div>
  <div class="mouth-r02"></div>
</div>

样式:

/* 嘴巴 */
.mouth-con{
  position: absolute;
  top: 275px;
  left: 76px;
  z-index: 6;
}
.mouth{
  width: 50px;
  height: 30px;
  background: #fff;
  border: 2px solid #2D3044;
  border-radius: 0 0 223px 129px/0 0 200px 200px;
  overflow: hidden;
  position: absolute;
}
.mouth .line1{
  width: 4px;
  height: 32px;
  background: #aaa;
  position: absolute;
  left: 5px;
  top: 0;
}
.mouth .line2{
  left: 15px;
}
.mouth .line3{
  left: 25px;
}
.mouth .line4{
  left: 35px;
}
.mouth-r01{
  position: absolute;
  left: 53px;
  top: 0;
  width: 17px;
  height: 3px;
  background: #2D3044;
}
.mouth-r02{
  position: absolute;
  left: 53px;
  top: 0;
  width: 17px;
  height: 3px;
  background: #2D3044;
  transform: rotate(62deg);
}

1.5 小脚实现

小脚实现比较简单，长的矩形+椭圆组成，复制一份到右边调一下左边定位就好。

html:

<!-- 小脚 -->
<div class="leg"></div>
<div class="leg leg-right"></div>

样式:

/* 小脚 */
.leg{
  width: 7px;
  height: 100px;
  border: 2px solid #2D3044;
  background: #2D3044;
  position: absolute;
  top: 350px;
  left: 60px;
  z-index: -1;
}
.leg::after{
  content: "";
  width: 30px;
  height: 18px;
  background: #2D3044;
  border-radius: 50%;
  position: absolute;
  bottom: -8px;
  left: -20px;
}
.leg-right{
  left: 130px;
}

1.6 小手实现

小手实现是由两个矩形+一个椭圆组成的，复制一份到右边然后Y轴180度旋转一下就可以，定位修改一下就好。

<!-- 小手 -->
<div class="hand hand-l">
  <div class="arm"></div>
  <div class="arm-con">
    <div class="arm-s"></div>
    <div class="arm-z"></div>
  </div>
</div>
<div class="hand hand-r">
  <div class="arm"></div>
  <div class="arm-con">
    <div class="arm-s"></div>
    <div class="arm-z"></div>
  </div>
</div>

/* 小手 */
.hand{
  position: absolute;
  left: -34px;
  top: 250px;
  z-index: 3;
}
.arm{
  width: 57px;
  height: 7px;
  border: 2px solid #2D3044;
  background: #2D3044;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  transform: rotate(26deg);
}
.arm::after{
  content: "";
  position: absolute;
  top: -3px;
  left: -6px;
  width: 12px;
  height: 12px;
  background: #2D3044;
  border-radius: 50%;
}
.arm-con{
  position: absolute;
  top: -15px;
  left: -9px;
  transform: rotate(21deg);
}
.arm-s{
  width: 5px;
  height: 33px;
  border: 2px solid #2D3044;
  background: #2D3044;
  position: absolute;
  left: 13px;
  top: -45px;
  z-index: 1;
}
.arm-z{
  width: 20px;
  height: 14px;
  background: #2D3044;
  border-radius: 50%;
  position: absolute;
  left: 10px;
  top: -55px;
}

.hand-r{
  left: 234px;
  transform: rotateY(180deg);
}

2. 卡通西瓜动画效果

卡通西瓜动画有几个部分加了动画，小手动画，墨镜动画，嘴巴动画。

2.1 小手动画

小手动画的难度在于做动画的时候因为是两个关节的，所以动起来的时候需要调节一下角度，要紧贴合在一起，这个我调了比较久，最终效果就是上面代码块那个的显示效果，手臂举起来的时候是伸直的，这里我是先做了第一个关节之后再做第二个关节的，通过定位一个基点transform-origin: right bottom;来控制旋转 transform: rotate(21deg);实现举重的动画效果。

样式：

/* 小手-左边动画 */
.hand-l .arm{
  transform-origin: right bottom;
  animation: swing 1s linear infinite alternate;
}
@keyframes swing{
  0%{
    transform: rotate(21deg);
  }
  100%{
    transform: rotate(75deg);
  }
}
.hand-l .arm-con{
  transform-origin: right bottom;
  animation: swing2 1s linear infinite alternate;
}
@keyframes swing2{
  0%{
    transform: rotate(21deg);
  }
  100%{
    top: -30px;
    left: 38px;
    transform: rotate(-19deg);
  }
}
/* 小手动画-右 */
.hand-r .arm{
  transform-origin: right bottom;
  animation: swingR 1s linear infinite alternate;
}
@keyframes swingR{
  0%{
    transform: rotate(21deg);
  }
  100%{
    transform: rotate(75deg);
  }
}
.hand-r .arm-con{
  transform-origin: right bottom;
  animation: swingR2 1s linear infinite alternate;
}
@keyframes swingR2{
  0%{
    transform: rotate(21deg);
  }
  100%{
    top: -30px;
    left: 38px;
    transform: rotate(-19deg);
  }
}

2.2 嘴巴动画

嘴巴动画是控制高度变化去实现的，这个不难。

样式：

/* 嘴巴动画 */
.mouth-con{
  animation: smile 0.3s ease infinite alternate;
}
@keyframes smile{
  0%{
    top: 260px;
  }
  50%{
    top: 288px;
  }
  100%{
    top: 275px;
  }
}

2.3 墨镜闪光片动画

墨镜闪光片动画是控制left值来移动过程，速度的节点比较重要，前段距离设置距离比较短，从慢到快的动画过程。

样式：

.rayCon{
  animation: flash 1s linear infinite;
}
@keyframes flash{
  0%{
    left: 0;
  }
  20%{
    left: 10px;
  }
  100%{
    left: 80px;
  }
}

总结

本文主要介绍了一下西瓜的创意动画，希望这个夏天我们都可以冰爽一夏，西瓜吃起来，看着这个可爱的西瓜动画吃得更香喔，以上内容就讲到这里，感谢观看，谢谢，觉得写得好，给个赞支持一下哈！！ ღ( ´･ᴗ･` )比心

avatar
文章
阅读
粉丝