CSS3实现有趣的动态表情包

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

kingroyal

• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction

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

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

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

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

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

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

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

实现效果大致如下：

如下：

.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%;
}

如下：

@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%;
 }
}

如下：

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

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

​

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