纯CSS实现 | 可可爱爱的苍蝇动画制作

手可摘棉花
872 阅读5分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第18天，点击查看活动详情。

我正在参加 码上掘金体验活动，详情：show出你的创意代码块

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

介绍

嗨,各位掘友们好,今天来给大家介绍一下纯css实现苍蝇动画效果,本文涉及的知识点看过前面的文章应该也有所了解,html+css,css3动画效果.下面来给大家详细介绍一下整个制作的过程.

代码块

code.juejin.cn/pen/7088857…

代码介绍

1.苍蝇制作

苍蝇制作分成几个部分,苍蝇头部-->包括眼睛+头部,苍蝇身体,苍蝇翅膀,苍蝇的六只脚.

1.1苍蝇头部

苍蝇头部外形是用border-radius: 50% 50% 0 0;圆角设置上边圆形下边直的,而眼睛则是叠加两个正圆实现,慢慢的调节左右两边眼睛的定位.代码如下. html:

<div class="head">
  <div class="eye eye-left">
    <div class="eye-inside"></div>
  </div>
  <div class="eye eye-right">
    <div class="eye-inside"></div>
  </div>
</div>

样式:

/* 头部+眼睛 */
.head{
  background: #595757;
  width: 88px;
  height: 84px;
  border-radius: 50% 50% 0 0;
  position: absolute;
  z-index: 3;
}
.eye{
  width: 48px;
  height: 48px;
  background: #FEFEFE;
  border: 4px solid #9E9F9F;
  border-radius: 50%;
  position: absolute;
  left: -18px;
  top: -2px;
}
.eye-inside{
  width: 20px;
  height: 20px;
  background: #231915;
  border-radius: 50%;
  position: absolute;
  left: 18px;
  top: 14px;
}
.eye-inside::after{
  content: "";
  width: 8px;
  height: 8px;
  background: #FEFEFE;
  border-radius: 50px;
  position: absolute;
  left: 1px;
  top: -1px;
}
.eye-right{
  left: 52px;
}

1.2苍蝇身体

苍蝇身体先画一个竖着的椭圆形,在上面叠加纹路形状,由于是比较弯曲的形状,你有没想到圆形,没错,我就是画了两个圆形叠加定位过去的,一个设置深灰色,一个设置跟body颜色一样,这样子就画出来了,再复制两份出来,定位需要调整一下,lef跟top的值修改就行.

html:

<div class="body">
  <div class="texture">
    <div class="item"></div>
    <div class="item item2"></div>
    <div class="item item3"></div>
  </div>
</div>

样式:

/* 身体 */
.body{
  width: 118px;
  height: 240px;
  background: #595757;
  border-radius: 45%;
  position: absolute;
  left: -15px;
  top: 48px;
  overflow: hidden;
}
.texture .item{
  width: 130px;
  height: 100px;
  background: #3E3938;
  border-radius: 70%;
  position: absolute;
  bottom: 16px;
  left: -3px;
}
.texture .item::after{
  content: "";
  width: 130px;
  height: 100px;
  background: #595757;
  border-radius: 76%;
  position: absolute;
  bottom: 17px;
  left: 0px;
}
.texture .item2{
  position: absolute;
  bottom: 60px;
  z-index: 2;
}
.texture .item2::after{
  bottom: 24px;
}
.texture .item3{
  position: absolute;
  bottom: 110px;
  z-index: 2;
}
.texture .item3::after{
  bottom: 20px;
}

1.2苍蝇翅膀

翅膀本来两边各画一个椭圆放过去,调整感觉不对,因为翅膀下边比较胖,所以我用伪类又画了两个圆一边一个叠加在上面慢慢调整重合就行.

html:

<div class="wing wing-left"></div>
<div class="wing wing-right"></div>

样式:

/* 翅膀 */
.wing{
  width: 80px;
  height: 250px;
  background: #EEEEEE;
  border-radius: 45%;
  position: absolute;
  left: -62px;
  top: 52px;
  z-index: 2;
  transform: rotate(30deg);
}
.wing::after{
  content: "";
  width: 108px;
  height: 227px;
  border-radius: 73%;
  background: #EEEEEE;
  position: absolute;
  left: -16px;
  top: 30px;
  transform: rotate(0);
}
.wing-right{
  left: 74px;
  transform: rotate(-30deg);
}
.wing-right::after{
  left: -12px;
}

1.3苍蝇六只脚

脚画的就比较麻烦了一点,因为一只脚就有两段线条组成,左边两边对称的,不像ps直接镜像就行,这个复制过去旋转了角度之后,发现右侧的小脚向下的,所以只能重新设置样式旋转角度定位.

html:

<div class="leg leg-left">
  <div class="leg-item leg-item1"></div>
  <div class="leg-item leg-item2"></div>
  <div class="leg-item leg-item3"></div>
</div>
<div class="leg leg-right">
  <div class="leg-item leg-item1"></div>
  <div class="leg-item leg-item2"></div>
  <div class="leg-item leg-item3"></div>
</div>

样式:

/* 腿 */
.leg{
  position: absolute;
  top: 100px;
  left: -93px;
}
.leg-item{
  width: 80px;
  height: 4px;
  background: #9E9F9F;
  position: absolute;
  top: 0;
  left: 0;
  transform: rotate(10deg);
}
.leg-item2{
  top: 40px;
  left: -29px;
  transform: rotate(-1deg);
}
.leg-item3{
  top: 83px;
  left: -33px;
  transform: rotate(-1deg);
}
.leg-item::before{
  content: "";
  width: 32px;
  height: 10px;
  background: #9E9F9F;
  border-radius: 50%;
  position: absolute;
  top: -11px;
  left: -29px;
  transform: rotate(35deg);
}
.leg-item::after{
  content: "";
  width: 32px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: -8px;
  left: -32px;
  transform: rotate(39deg);
}
.leg-right{
  left: 200px;
  top: 182px;
  transform: rotate(163deg);
}
.leg-right .leg-item{
  top: 0;
  left: -22px;
  transform: rotate(10deg);
}
.leg-right .leg-item2{
  top: 40px;
  left: -22px;
  transform: rotate(-1deg);
}
.leg-right .leg-item3{
  top: 83px;
  left: -12px;
  transform: rotate(-1deg);
}
.leg-right .leg-item::before{
  top: 6px;
  left: -27px;
  transform: rotate(-44deg);
}
.leg-right .leg-item::after{
  top: 1px;
  left: -31px;
  transform: rotate(-47deg);
  background: #fff;
}

2.苍蝇动画效果

本文给苍蝇的翅膀,小脚,跟眼睛三个地方添加了动画效果,下面分别介绍一下.

2.1 苍蝇眼睛动画

主要控制两边的眼睛来回滚动,通过定位修改左右left的值的变化,循环滚动infinite,来回变化是用alternate. 代码:

/* 眼睛动画 */
.eye-inside{
  transition: all 0.3s;
  animation: turn 0.5s linear infinite alternate;
}
@keyframes turn{
  0%{
    left: 18px;
  }
  100%{
    left: 7px;
  }
}

2.2 苍蝇小脚动画

小脚动画比较负责,我调节了好久,怎么才能让苍蝇动起来更自然一点,两边脚是分开写的.通过选择不同的角度来控制脚动画. 代码:

/* 小脚动画 */
.leg-left .leg-item1,
.leg-left .leg-item2,
.leg-left .leg-item3{
  transform-origin: right bottom;
  animation: swing 0.5s linear infinite alternate;
}
@keyframes swing{
  0%{
    transform: rotate(14deg);
  }
  100%{
    transform: rotate(10deg);
  }
}
.leg-right .leg-item1,
.leg-right .leg-item2,
.leg-right .leg-item3{
  transform-origin: right bottom;
  animation: swing2 0.5s linear infinite alternate;
}
@keyframes swing2{
  0%{
    transform: rotate(10deg);
  }
  100%{
    transform: rotate(14deg);
  }
}

2.3 苍蝇翅膀动画

翅膀动画也是通过控制固定基点位置,然后来调节苍蝇摆动翅膀的效果样式是transform-origin: right top;,摆动的幅度是transform: rotate(35deg);调整角度来完成.

代码:

/* 翅膀动画 */
.wing-left{
  left: -11px;
  top: 84px;
  transform-origin: right top;
  animation: fly 0.3s linear infinite alternate;
}
@keyframes fly{
  0%{
    transform: rotate(35deg);
  }
  100%{
    transform: rotate(30deg);
  }
}
.wing-right{
  left: 19px;
  top: 88px;
  transform-origin: left top;
  animation: fly2 0.3s linear infinite alternate;
}
@keyframes fly2{
  0%{
    transform: rotate(-35deg);
  }
  100%{
    transform: rotate(-30deg);
  }
}

总结

本文主要讲了苍蝇的制作跟摆动动画的制作,大家学习起来,动手制作,不会很难.以上就这些内容,感谢观看,谢谢~

avatar
文章
阅读
粉丝