前端小练：kiss小动画分享

初心丨哈士奇2023-11-13 17:01

最近的学习中，哈士奇学习了简单的动画的平移和旋转的用法，同时对于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就能解决所有的平移问题吗？我们是否可以通过其他方式展示不同效果呢？

相关推荐
逐·風3 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫3 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦4 小时前
uni-app 封装刘海状态栏（适用小程序， h5, 头条小程序）
前端·小程序·uni-app
GIS程序媛—椰子4 小时前
【Vue 全家桶】6、vue-router 路由（更新中）
前端·vue.js
前端青山5 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享5 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
清灵xmf7 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨7 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL7 小时前
npm入门教程1：npm简介
前端·npm·node.js
小白白一枚1118 小时前
css实现div被图片撑开
前端·css
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10红米手机使用google play