前言

前面已经给大家画了小乌龟爬行动画和心动的小兔子动画,今天来给大家画了简单的表情包动画,笔画较少方便学习,希望大家看了本篇文章都能学会表情包动画制作.

代码块

知识点介绍

本篇文章采用的是html+css布局,动画效果用了css3属性.在写代码之前首先了解一下css的属性.

flex布局

文章中虽然用的较少,但是还是比较实用,比如floa浮动布局,还是清除浮动,不然高度就会塌陷,多部分用于手机端h5的布局,原因pc低浏览器不兼容,比如属性: display: flex;justify-content: center; 实现的是内容水平方向居中。 display: flex; flex-direction: column; justify-content: space-between; align-items: center; 这段是实现div竖着排列,水平居中,垂直两端对齐。

border-radius 属性

圆角属性,我们有时看到这样设置border-radius: 120px 140px 120px 120px/140px 120px;

示例:

参考: border-radius的文档

CSS3 transform 属性

本文用到skew切斜角度,rotate旋转角度,提前了解熟悉一下.

参考文档:transform

animation 属性 animation主要用来写动画,比如水平移动,旋转等.

示例:

<style> 
div
{
	width:100px;
	height:100px;
	background:red;
	position:relative;
	animation:mymove 5s infinite;
	-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
}

@keyframes mymove
{
	from {left:0px;}
	to {left:200px;}
}

@-webkit-keyframes mymove /*Safari and Chrome*/
{
	from {left:0px;}
	to {left:200px;}
}
</style>

上面实现的效果div水平移动,通过相对位置设置了left的值从0到200移动.

代码介绍

本文实现的效果是表情包动画,一个小人wink动画,具体用到的主要的样式属性就在上面介绍了,还有就是图片小人微笑嘴巴笔画需要伪类去设置遮罩,其他的还比较简单. html:

<div class="wrap">
  <div class="wink">
    <div class="head"></div>
    <div class="box">
      <div class="eye">
        <div class="line1"></div>
        <div class="round">
          <i class="circle1"></i>
          <i class="circle2"></i>
        </div>
        <div class="line2"></div>
      </div>
      <div class="eye eye-right">
        <div class="line1"></div>
        <div class="round">
          <i class="circle1"></i>
          <i class="circle2"></i>
        </div>
        <div class="line2"></div>
      </div>
      <div class="mouth"></div>
    </div>

    <div class="body">
      <div class="line1"></div>
      <div class="line2"></div>
    </div>

    <div class="star1">✦</div>

  </div>
</div>

css

.wrap{
  margin: 100px auto;
  width: 100%;
  display: flex;
  justify-content: center;
}
.wink{
  position: relative;
}
.head{
  width: 140px;
  height: 120px;
  background: #fff;
  border-radius: 120px 140px 120px 120px/140px 120px;
  border: 2px solid #333;
  
}
.body{
  width: 70px;
  background: #fff;
  border-top: none;
  border-bottom: none;
  margin: -6px auto;
  display: flex;
}
.body .line1,.body .line2{
  border: 1.2px solid #333;
  width: 0;
  height: 50px;
  transform: skew(-8deg);
}
.body .line2{
  margin-left: 60px;
}
.box{
  position: absolute;
  top: 40px;
  left: 26px;
}
.eye{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  position: absolute;
}
.eye .line1,.eye .line2{
  width: 36px;
  height: 3px;
  background: #333;
}
.eye .round{
  width: 24px;
  height: 5px;
  background: #333;
  position: relative;
  overflow: hidden;
}
.eye .round .circle1,.eye .round .circle2{
  position: absolute;
  top: 2px;
  left: 6px;
  width: 4px;
  height: 4px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 30px 2px #fff;
}
.eye .round .circle2{
  background: #ccc;
  top: 6px;
  left: 16px;
  width: 2px;
  height: 2px;
}
.eye-right{
  margin-left: 62px;
}
.mouth{
  width: 30px;
  height: 30px;
  border: 2px solid #333;
  background: #fff;
  border-radius: 60%;
  margin-top: 24px;
  margin-left: 30px;
  position: relative;
}
.mouth::after{
  content: "";
  width: 36px;
  height: 23px;
  background: #fff;
  position: absolute;
  top: -3px;
  left: -3px;
}
/* 星星 */
.star1{
  font-size: 52px;
  color: #E9CF17;
  position: absolute;
  top: -6px;
  left: 148px;
  transform: rotate(9deg) skew(27deg,-13deg);
  animation: flash 0.8s ease infinite alternate;
}

/* 眨眼动画 */
.eye .round{
  animation: winkY 1s ease-in-out infinite alternate;
}
@keyframes winkY{
  from{
    height: 10px;
  }
  to{
    height: 2px;
  }
}
/* 小星星动画 */
@keyframes flash{
  0%{
    transform: scale(1.5);
    opacity: 0.3;
  }
  50%{
    transform: scale(1.2);
    opacity: 0.7;
  }
  100%{
    transform: scale(1);
    opacity: 1;
  }
}

展示效果:

wink表情包.gif

总结

好了，以上就是我的分享,我是手可摘棉花,这么简单的动画效果相信大家已经喜欢上了,可以自己手动学习起来,期待着大家的点赞或关注~😛

纯CSS实现 | 简单的wink表情包动画

前言

代码块

知识点介绍

代码介绍

总结