CSS3实现有趣的动态表情包

前置知识点

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 转换,该属性允许我们对元素进行旋转、缩放、移动或倾斜。

实现效果大致如下:

CSS3实现有趣的动态表情包

CSS3实现有趣的动态表情包

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中,并设置动画时间、循环方式等。

发表评论

相关文章