CSS3实现有趣的动态表情包

Posted 2022-08-02 博读代码

前置知识点

animation

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

• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-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"><divclass="emoji__face">
    <divclass="emoji__eyes"></div>
    <divclass="emoji__mouth">
      <divclass="emoji__tongue"></div>
    </div>
  </div></div>

小结

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

​

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