最近的学习中，哈士奇学习了简单的动画的平移和旋转的用法，同时对于z-index有了一部分了解，那么这次就通过学习写了个kiss动画
人狠话不多，哈士奇给大家献上代码先
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="container">
<div class="ball" id="l-ball">
<div class="face face-l">
<div class="eye-l eye-ll"></div>
<div class="eye-l eye-lr"></div>
<div class="mouth"></div>
</div>
</div>
<div class="ball" id="r-ball">
<div class="face face-r">
<div class="eye-r eye-rl"></div>
<div class="eye-r eye-rr"></div>
<div class="mouth-r"></div>
<div class="kiss-r">
<div class="kiss"></div>
<div class="kiss"></div>
</div>
</div>
</div>
</div>
</body>
</html>
css
body{
background-color:#78e08f;
margin: 0;
padding: 0px;
}
.container{
width: 232px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.ball{
width: 100px;
height: 100px;
border: 6px solid #000;
border-radius: 50%;
background-color: white;
position: relative;
display: inline-block;/*令块元素变为具有行内块元素的特点表现为可以使得div处于同一行*/
}
.face-l{
width: 70px;
height: 30px;
position: absolute;
right: 0px;
top: 30px;
}
.face-r{
width: 70px;
height: 30px;
position: absolute;
top: 30px;
}
.eye-l{
width: 15px;
height: 14px;
border-bottom:5px solid #000;
border-radius: 50%;
position: absolute;
}
.eye-r{
width: 15px;
height: 14px;
border-top:5px solid #000;
border-radius: 50%;
position: absolute;
}
.eye-ll{
left: 10px;
}
.eye-lr{
right: 5px;
}
.eye-rl{
left: 10px;
}
.eye-rr{
right: 5px;
}
.mouth{
width: 30px;
height: 14px;
border-bottom: 5px solid #000;
border-radius: 50%;
position: absolute;
margin: 0 auto;
left: 0;
right: 0;
bottom: -5px;
}
.face-l::before{/*伪元素 必须有定位才能显现*/
content: '';
width: 18px;
height: 8px;
border-radius: 50%;
background-color: red;
position: absolute;
right: -8px;
top: 20px;
}
.face-l::after{/*伪元素 必须有定位才能显现*/
content: '';
width: 18px;
height: 8px;
border-radius: 50%;
background-color: red;
position: absolute;
left:-5px;
top: 20px;
}
.face-r::before{/*伪元素 必须有定位才能显现*/
content: '';
width: 10px;
height: 10px;
border-radius:100%;
background-color: red;
position: absolute;
right: 3px;
top: 20px;
}
.face-r::after{/*伪元素 必须有定位才能显现*/
content: '';
width: 10px;
height: 10px;
border-radius: 100%;
background-color: red;
position: absolute;
top: 20px;
}
#l-ball{
z-index: 2;/*设置元素层级，使得左边的小人可以覆盖在右边的小人脸上*/
animation: close-l 4s ease infinite;/*平移4s*/
}
@keyframes close-l{
0%{
transform: translate(0);
}
20%{
transform: translate(20px);
}
35%{
transform: translate(20px);
}
55%{
transform: translate(0);
}
100%{
transform: translate(0);
}
}
.face-l{
animation:face-l 4s ease infinite;
}
@keyframes face-l{
0%{
transform: translate(0) rotate(0);/*translate 平移 rotate旋转*/
}
10%{
transform: translate(0) rotate(0);
}
20%{
transform: translate(5px) rotate(2deg);
}
28%{
transform: translate(0) rotate(0);
}
35%{
transform: translate(5px) rotate(2deg);/*需要写清楚像素，否则没有动画*/
}
50%{
transform: translate(0) rotate(0);
}
100%{
transform: translate(0) rotate(0);
}
}
.kiss-r{
margin: 0 auto;
position: absolute;
left: 35px;
right: 0;
bottom: -5px;
opacity: 0;
animation: kiss-r 4s ease infinite;
}
.kiss{
width: 13px;
height: 10px;
border-radius: 50%;
border-left: 5px solid #000;
display: block;
}
.mouth-r{
width: 30px;
height: 14px;
border-bottom: 5px solid #000;
border-radius: 50%;
position: absolute;
margin: 0 auto;
left: 0;
right: 0;
bottom: -5px;
animation: mouth-r 4s ease infinite;
}
#r-ball{
animation: close-r 4s ease infinite;
}
@keyframes close-r{
0%{
transform: translate(0);
}
50%{
transform: translate(0);
}
70%{
transform: translate(-45px)rotate(15deg);
}
85%{
transform: translate(-45px)rotate(-10deg);
}
100%{
transform: translate(0);
}
}
@keyframes mouth-r{
0%{
opacity: 1;
}
50%{
opacity: 1;
}
50.5%{
opacity: 0;
}
/*70%{
opacity: 1;
}*/
84.9%{
opacity: 0;
}
85%{
opacity: 1;
}
100%{
opacity: 1;
}
}
@keyframes kiss-r{
0%{
opacity: 0;
}
50%{
opacity: 0;
}
50.5%{
opacity: 1;
}
84.9%{
opacity: 1;
}
85%{
opacity: 0;
}
100%{
opacity: 0;
}
}接下来哈士奇为大家依次聊聊这段代码 首先是html的部分：
html主要是使用div对整个页面做出一个布局，哈士奇此次的小人主要是小人的两张脸和五官，因此我们在html的代码创建的过程中需要留出脸 眼睛 嘴巴的部分进行后面的css代码的操作。
在这里有些同学可能会问到，这里的kiss和mouth怎么回事，稍后我们就知道了！
那么再给大家讲讲css的部分：
首先我们通过整个页面的设置，将整个页面背景设置，也就是body部分，去除之前的默认值。
css
body{
background-color:#78e08f;
margin: 0;
padding: 0px;
}接下来就是容器container的设置，我们的设置一个大容器用于放下两个小人，通过position中的absolute对于父容器（此处的是body）进行定位，使用translate函数将容器移到页面的正中心的位置
html
.container{
width: 232px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}将大致的位置确定好了以后，我们就可以开始对于两个kiss小人进行操作了
首先确定两个小球的设置
css
.ball{
width: 100px;
height: 100px;
border: 6px solid #000;
border-radius: 50%;
background-color: white;
position: relative;
display: inline-block;/*令块元素变为具有行内块元素的特点表现为可以使得div处于同一行*/
}通过border将外形线条确定，这样一来就可以制造出小人外面一圈的线，通过border-radius确定弧度，最后通过relative的相对定位，针对元素的原本位置进行定位。那么为什么要使用display呢？我们都知道，inlie-block可以使得块级元素div转化为具有行内块的特点的元素，因此div中的两个ball小球就能处于同一行了
确定两个小球的位置以后我们开始确定小球的脸
css
.face-l{
width: 70px;
height: 30px;
position: absolute;
right: 0px;
top: 30px;
}
.face-r{
width: 70px;
height: 30px;
position: absolute;
top: 30px;
}通过左右两脸的设置确定他们相对于他们父容器l-ball 和r-ball的位置
接下来设置眼睛的相同元素的设置
css
.eye-l{
width: 15px;
height: 14px;
border-bottom:5px solid #000;
border-radius: 50%;
position: absolute;
}
.eye-r{
width: 15px;
height: 14px;
border-top:5px solid #000;
border-radius: 50%;
position: absolute;
}对于我们来说，这里的两个眼睛其实就是两个弧线，所以我们只需要确定两根线，然后使用boder-radius进行弯曲，就能把眼睛制造出来了，再通过absolute对于自己的父容器进行定位
css
.eye-ll{
left: 10px;
}
.eye-lr{
right: 5px;
}
.eye-rl{
left: 10px;
}
.eye-rr{
right: 5px;
}微调设置眼睛的具体位置
再进行嘴巴的设计
css
.mouth{
width: 30px;
height: 14px;
border-bottom: 5px solid #000;
border-radius: 50%;
position: absolute;
margin: 0 auto;
left: 0;
right: 0;
bottom: -5px;
}也是进行一个弯曲的曲线的设计
接下来难度要升级了，两个脸颊红红的部分应该如何实现呢？ 这里我们使用到了伪元素进行创建
css
.face-l::before{/*伪元素 必须有定位才能显现*/
content: '';
width: 18px;
height: 8px;
border-radius: 50%;
background-color: red;
position: absolute;
right: -8px;
top: 20px;
}
.face-l::after{/*伪元素 必须有定位才能显现*/
content: '';
width: 18px;
height: 8px;
border-radius: 50%;
background-color: red;
position: absolute;
left:-5px;
top: 20px;
}
.face-r::before{/*伪元素 必须有定位才能显现*/
content: '';
width: 10px;
height: 10px;
border-radius:100%;
background-color: red;
position: absolute;
right: 3px;
top: 20px;
}
.face-r::after{/*伪元素 必须有定位才能显现*/
content: '';
width: 10px;
height: 10px;
border-radius: 100%;
background-color: red;
position: absolute;
top: 20px;
}给大家复习一下伪元素的用法，在哈士奇的这个代码中，before和after分别是对于父容器的第一个子元素进行操作，也就是face里面的左眼睛进行操作，针对左眼定位脸颊的位置（记住哦，如果没有给出伪元素的定位，也就是父容器的话，是无法显示伪元素的）
这样一来，我们的脸颊也做好了 最后就是属于亲脸颊时的嘴巴部分
css
.kiss-r{
margin: 0 auto;
position: absolute;
left: 35px;
right: 0;
bottom: -5px;
opacity: 0;
animation: kiss-r 4s ease infinite;
}
.kiss{
width: 13px;
height: 10px;
border-radius: 50%;
border-left: 5px solid #000;
display: block;
}
.mouth-r{
width: 30px;
height: 14px;
border-bottom: 5px solid #000;
border-radius: 50%;
position: absolute
margin: 0 auto;
left: 0;
right: 0;
bottom: -5px;
animation: mouth-r 4s ease infinite;
}哈士奇在设计中，想要右边的小球能够在最后亲到左边小球，那么光移动嘴巴是不行的，还需要让嘴巴变形成为嘟嘴的样子，因此哈士奇在mouth-r中设置了嘴巴的样式，接下来又在kiss中设置了嘴巴转变后的样式。这就是为什么右边的小球要设置kiss和mouth的原因了！
在kiss-r中大家看到opacity，如果opacity：0； 那么代表着这个块是隐藏状态，如果opacity：1； 那么就是显示的状态
最后就是动画设置的部分了，有些小伙伴已经看出来了哈士奇已经写过的 animation: mouth-r 4s ease infinite;
那么在这给大家讲讲这是个啥意思
animation（声明动画）: mouth-r（动画的名字） 4s（时间） ease（规定慢速开始，然后变快，然后慢速结束的过渡效果） infinite（永久执行：动画会循环播放）
先聊聊左脸的动画，哈士奇希望它平移过去，然后做出小鸟依人的蹭一蹭的动作，于是就有了
css
#l-ball{
z-index: 2;/*设置元素层级，使得左边的小人可以覆盖在右边的小人脸上*/
animation: close-l 4s ease infinite;/*平移4s*/
}
@keyframes close-l{
0%{
transform: translate(0);
}
20%{
transform: translate(20px);
}
35%{
transform: translate(20px);
}
55%{
transform: translate(0);
}
100%{
transform: translate(0);
}
}
.face-l{
animation:face-l 4s ease infinite;
}
@keyframes face-l{
0%{
transform: translate(0) rotate(0);/*translate 平移 rotate旋转*/
}
10%{
transform: translate(0) rotate(0);
}
20%{
transform: translate(5px) rotate(2deg);
}
28%{
transform: translate(0) rotate(0);
}
35%{
transform: translate(5px) rotate(2deg);/*需要写清楚像素，否则没有动画*/
}
50%{
transform: translate(0) rotate(0);
}
100%{
transform: translate(0) rotate(0);
}
}首先就是在元素中声明需要准备动画，然后在下方使用@keyframes 动画名 写出一个动画的具体内容（我们需要写出什么时候动画要做什么）
比如4s中0%的时候我希望动画开始平移，就写transform：translate（）写出平移的位置是多少像素，那么在下一个%出现前，浏览器就会执行你的操作，表示在%~%之间执行动画的操作
rotate（）则是进行旋转，使用以后动画将会根据一定的比例进行旋转
最后就是右脸小球的亲亲操作了
css
#r-ball{
animation: close-r 4s ease infinite;
}
@keyframes close-r{
0%{
transform: translate(0);
}
50%{
transform: translate(0);
}
70%{
transform: translate(-45px)rotate(15deg);
}
85%{
transform: translate(-45px)rotate(-10deg);
}
100%{
transform: translate(0);
}
}
@keyframes mouth-r{
0%{
opacity: 1;
}
50%{
opacity: 1;
}
50.5%{
opacity: 0;
}
/*70%{
opacity: 1;
}*/
84.9%{
opacity: 0;
}
85%{
opacity: 1;
}
100%{
opacity: 1;
}
}
@keyframes kiss-r{
0%{
opacity: 0;
}
50%{
opacity: 0;
}
50.5%{
opacity: 1;
}
84.9%{
opacity: 1;
}
85%{
opacity: 0;
}
100%{
opacity: 0;
}
}前面还是进行平移操作，到了后面，小球需要进行亲亲，那么哈士奇通过opacity实时操作嘴巴的出现时间，最后在亲的前面的时间把嘟嘴展现出来。
你学会了吗？快去给你的女友写个亲亲动画吧！！
总结与联想
总结
今天哈士奇给大家分享了一个前端小动画的展现，并且逐步为大家解释了一个前端小动画应该如何写出来，在这其中涉及到了transform opacity animation z-index的使用，大家可以简单上手做做哦
联想
那么动画是否还有其他的关键词呢？ease就能解决所有的平移问题吗？我们是否可以通过其他方式展示不同效果呢？