前置知识点

animation

animation 属性是一个简写属性，用于设置六个动画属性：

animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-direction

注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。

@keyframes

通过 @keyframes 规则，我们能够创建动画。

创建动画的原理是：将一套 CSS 样式逐渐变化为另一套样式，在动画过程中，能够多次改变这套 CSS 样式。

以百分比来规定改变发生的时间，或者通过关键词 “from” 和 “to”，等价于 0% 和 100%，0% 是动画的开始时间，100% 动画的结束时间。

为了获得最佳的浏览器支持，应该始终定义 0% 和 100% 选择器。

注释：请使用动画属性来控制动画的外观，同时将动画与选择器绑定。

transform

transform 属性向元素应用 2D 或 3D 转换，该属性允许我们对元素进行旋转、缩放、移动或倾斜。

实现效果大致如下：

css基础样式如下：

.emoji {  width: 120px;  height: 120px;  margin: 15px 15px 40px;  background: #ffda6a;  display: inline-block;  border-radius: 50%;  position: relative;}.emoji:after {  position: absolute;  bottom: -40px;  font-size: 18px;  width: 60px;  left: calc(50% - 30px);  color: #8a8a8a;}.emoji__face,.emoji__eyebrows,.emoji__eyes,.emoji__mouth,.emoji__tongue,.emoji__heart,.emoji__hand,.emoji__thumb {  position: absolute;}.emoji__face:before, .emoji__face:after,.emoji__eyebrows:before,.emoji__eyebrows:after,.emoji__eyes:before,.emoji__eyes:after,.emoji__mouth:before,.emoji__mouth:after,.emoji__tongue:before,.emoji__tongue:after,.emoji__heart:before,.emoji__heart:after,.emoji__hand:before,.emoji__hand:after,.emoji__thumb:before,.emoji__thumb:after {  position: absolute;  content: "";}.emoji__face {  width: inherit;  height: inherit;}.emoji--haha:after {  content: "Haha";}.emoji--haha .emoji__face {  -webkit-animation: haha-face 2s linear infinite;          animation: haha-face 2s linear infinite;}.emoji--haha .emoji__eyes {  width: 26px;  height: 6px;  border-radius: 2px;  left: calc(50% - 13px);  top: 35px;  transform: rotate(20deg);  background: transparent;  box-shadow: -25px 5px 0 0 #000000, 25px -5px 0 0 #000000;}.emoji--haha .emoji__eyes:after {  left: 0;  top: 0;  width: 26px;  height: 6px;  border-radius: 2px;  transform: rotate(-40deg);  background: transparent;  box-shadow: -25px -5px 0 0 #000000, 25px 5px 0 0 #000000;}.emoji--haha .emoji__mouth {  width: 80px;  height: 40px;  left: calc(50% - 40px);  top: 50%;  background: #000000;  border-radius: 0 0 40px 40px;  overflow: hidden;  z-index: 1;  -webkit-animation: haha-mouth 2s linear infinite;          animation: haha-mouth 2s linear infinite;}.emoji--haha .emoji__tongue {  width: 70px;  height: 30px;  background: #f55064;  left: calc(50% - 35px);  bottom: -10px;  border-radius: 50%;}

css动画绘画代码如下：

@keyframes haha-face {  10% {    transform: translateY(25px);  }  20% {    transform: translateY(15px);  }  30% {    transform: translateY(25px);  }  40% {    transform: translateY(15px);  }  50% {    transform: translateY(25px);  }  60% {    transform: translateY(0);  }  70% {    transform: translateY(-10px);  }  80% {    transform: translateY(0);  }  90% {    transform: translateY(-10px);  }}@keyframes haha-mouth {  10% {    transform: scale(0.6);    top: 45%;  }  20% {    transform: scale(0.8);    top: 45%;  }  30% {    transform: scale(0.6);    top: 45%;  }  40% {    transform: scale(0.8);    top: 45%;  }  50% {    transform: scale(0.6);    top: 45%;  }  60% {    transform: scale(1);    top: 50%;  }  70% {    transform: scale(1.2);    top: 50%;  }  80% {    transform: scale(1);    top: 50%;  }  90% {    transform: scale(1.1);    top: 50%;  }}

html标签结构如下：

<div class="emoji emoji--haha">  <div class="emoji__face">    <div class="emoji__eyes"></div>    <div class="emoji__mouth">      <div class="emoji__tongue"></div>    </div>  </div></div>

小结

绘画一个基础图案，用 @keyframes 设定，动画的转变样式，绑定于其图案的animation中，并设置动画时间、循环方式等。

下期给大家分享更多实战中的点滴，如果大家对此感兴趣，欢迎各位关注、留言，大家的支持就是我的动力！