注册
web

前端小练：kiss小动画分享

最近的学习中，哈士奇学习了简单的动画的平移和旋转的用法，同时对于z-index有了一部分了解，那么这次就通过学习写了个kiss动画


image.png


人狠话不多，哈士奇给大家献上代码先


<!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>

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部分，去除之前的默认值。


body{
background-color:#78e08f;
margin: 0;
padding: 0px;

}

接下来就是容器container的设置，我们的设置一个大容器用于放下两个小人，通过position中的absolute对于父容器（此处的是body）进行定位，使用translate函数将容器移到页面的正中心的位置


.container{

    width: 232px;

    height: 200px;


    position: absolute;

    left: 50%;

    top: 50%;

    transform: translate(-50%,-50%);

}

将大致的位置确定好了以后，我们就可以开始对于两个kiss小人进行操作了


首先确定两个小球的设置


.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小球就能处于同一行了


确定两个小球的位置以后我们开始确定小球的脸


.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的位置


接下来设置眼睛的相同元素的设置


.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对于自己的父容器进行定位


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

    }

给大家复习一下伪元素的用法，在哈士奇的这个代码中，before和after分别是对于父容器的第一个子元素进行操作，也就是face里面的左眼睛进行操作，针对左眼定位脸颊的位置（记住哦，如果没有给出伪元素的定位，也就是父容器的话，是无法显示伪元素的）


这样一来，我们的脸颊也做好了
最后就是属于亲脸颊时的嘴巴部分


.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（永久执行：动画会循环播放）


先聊聊左脸的动画，哈士奇希望它平移过去，然后做出小鸟依人的蹭一蹭的动作，于是就有了


#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（）则是进行旋转，使用以后动画将会根据一定的比例进行旋转


最后就是右脸小球的亲亲操作了


#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就能解决所有的平移问题吗？我们是否可以通过其他方式展示不同效果呢？


作者：疯犬丨哈士奇
来源：juejin.cn/post/7300460850010734646
0
分享
2023-11-14

0 个评论

要回复文章请先登录或注册

一个开放、互助、协作、创意的社区

关于imGeek
关于专职工程师值守
社区财富榜
赞助商
友情链接
热门标签
京ICP备2023000793号