入门切图小demo——kiss~kiss~ 给你的coding之旅添点小乐趣（下）

小米露2023-11-10 16:02

紧接着上篇文章没有完成的内容，上篇我们只完成了主体的静态效果，这次我们来实现一下整体的动画效果。 上文链接：萌新小白入门切图小demo------kisskiss 给你的coding之旅添点小乐趣（上） - 掘金 (juejin.cn)

动画1------左边小可爱往右边小可爱移动，并蹭蹭两次；

动画2------右边小可爱向左边小可爱靠近移动并kiss她的小脸蛋，嘴型发生改变；

动画3------左边小可爱被kiss后有个脸红的效果。

动画1------左边小可爱往右边小可爱移动，并蹭蹭两次

实现动画效果需要使用animation 属性，首先通过@keyframes，定义动画名字，然后定义动画规则，关键帧。动画规则就是想要变化的效果，可以是平移，旋转，缩放，颜色，透明度等属性变化。每个关键帧记录当前时间帧的各个属性，所以一定时间内连续快速播放若干个帧，就成了动画。如果想要动画非常丝滑，可以设置多个关键帧进行变化调整，让动画看起来更流畅。

所以这里要实现移动动画，只需要设置平移的关键帧就可以啦，然后蹭蹭的话就是平移+旋转搭配使用

具体代码如下：

js 复制代码 
/* 左边小可爱的头向右边小可爱移动 */
.h-left{
    z-index: 1;
    animation: move 5s ease infinite;
  }

  @keyframes move{
    0%{transform:translate(0)}
    9%{transform:translate(8px)}
    25%{transform:translate(8px)}
    45%{transform:translate(0px)}
  }

  /* 左边小可爱的脸向右边小可爱蹭蹭 */
  .l-face{
    animation: cengceng 5s ease infinite;
  }

  @keyframes cengceng{
    0%{transform:translate(0) rotate(0);}
    10%{transform:translate(5px) rotate(-2deg);}
    18%{transform:translate(0) rotate(0);}
    25%{transform:translate(5px) rotate(-2deg);}
    40%{transform:translate(0) rotate(0);}
  }

效果图：

动画2------右边小可爱向左边小可爱靠近移动并kiss她的小脸蛋，嘴型发生改变

实现动画效果同样需要使用animation 属性，相信移动效果大家都可以实现啦，那问题是这个嘴形变化到kiss嘴型该如何实现呢。好像看起来挺难的，其实不然，只要我们可以理解是如何实现的，那它就变得简单啦。那我们一步一步来分析一下，首先我们通过效果图是可以看到嘴巴是从原来的嘴型过渡到kiss嘴型的，中间是不是有个旋转的过渡，然后在原来嘴型旋转到一定位置后它就变成kiss嘴型了，我们是不是可以理解为右边的小可爱有两张嘴巴，只不过开始是原来的嘴型，然后kiss嘴型被隐藏了，然后在原来嘴型旋转到Kiss嘴型位置时候，kiss嘴型才出现，而原来嘴型被隐藏了呢。没错，思路就是这样。那我们赶快用代码实现一下叭！代码如下：

给右边小可爱绘制kiss嘴型，kiss的形状相当于绘制两个弯曲的左边框。

js 复制代码 
 <div class="head h-right">
            <div class="face r-face">
                <div class="eye r-left"></div>
                <div class="eye r-right"></div>
                <div class="mouth r-mouth"></div>
                <div class="kissmouth">
                    <div class="kiss"></div>
                    <div class="kiss"></div>
                </div>
            </div>
        </div>
js 复制代码 
  /* 右边小可爱kiss的嘴形 */
.kiss{
    width:15px;
    height:14px;
    border-radius:50%;
    border-left:5px solid black;
  }
  
  /* 调整右边小可爱kiss嘴形的位置 */
.kissmouth{
    position: absolute;
    left: 35px;
    bottom: 20px;
  }

效果如下： 然后我们再实现右边小可爱的移动靠近效果，代码如下：

js 复制代码 
  /* 右边小可爱靠近左边小可爱 */
.h-right{
    animation:close 5s ease infinite;
  }

  @keyframes close{
    30%{transform:translate(0);}
    40%{transform:translate(30px) rotate(15deg);}
    50%{transform:translate(-33px) rotate(-10deg);}
    65%{transform:translate(-33px);}
    70%{transform:translate(0);}
  }

效果如下：

这时候大概效果是不是就实现啦，我们只需要再给右边小可爱的两个嘴巴相互配合 使用透明度关键帧就可以啦！继续看代码：

js 复制代码 
  /* 控制右边小可爱原来嘴型出现隐藏 */
.r-mouth{
    animation: mRotate 5s ease infinite;
  }
  
  @keyframes mRotate{
    44.9%{transform:rotate(0deg);opacity: 1}
    45%{transform:rotate(90deg);opacity: 0}
    64%{transform:rotate(90deg);opacity: 0;}
    64.1%{transform:rotate(0);opacity: 1}
  }
   /* 控制右边小可爱kiss嘴形出现隐藏 */
.kissmouth{
    opacity: 0;
    animation:kiss-mouth 5s ease infinite;
  }

  @keyframes kiss-mouth{
    45%{opacity:0 }
    46%{opacity:1 }
    64%{opacity:1 }
    64.1%{opacity:0 }
  }

效果如下:

动画3------左边小可爱被kiss后有个脸红的效果。

这个效果其实就非常简单了，我们只需要把脸红的部分画出来，然后使用透明度关键帧就实现啦。代码如下：

js 复制代码 
.redface{
  width: 25px;
  height: 15px;
  border-radius:50%;
  background: radial-gradient(red,white);
}

.redFace{
  position: absolute;
  width: 82px;
  height: 30px;
  display: flex;
  left:17px;
  bottom:29px;
  justify-content: space-between;
  align-items: center;
  opacity: 0;
  z-index: 1;
  animation: faceRed 5s ease infinite;
}

@keyframes faceRed{
  50%{ opacity: 0;}
  85%{ opacity: 0.6;}
  88%{ opacity: 0.6;}
  100%{ opacity: 0;}
}

最后的效果图：

最后你也完成了嘛，喜欢我的文章的话麻烦给小博主点点赞喔😘~有什么问题欢迎评论嗷❤️❤️❤️

附上源码

html源码

js 复制代码 
<body>
    <div class="box">
        <div class="head h-left">
            <div class="face l-face">
                <div class="eye l-left"></div>
                <div class="eye l-right"></div>
                <div class="mouth l-mouth"></div>
                <div class="redFace">
                    <div class="redface"></div>
                    <div class="redface"></div>
                </div>
            </div>
        </div>
        <div class="head h-right">
            <div class="face r-face">
                <div class="eye r-left"></div>
                <div class="eye r-right"></div>
                <div class="mouth r-mouth"></div>
                <div class="kissmouth">
                    <div class="kiss"></div>
                    <div class="kiss"></div>
                </div>
            </div>
        </div>
    </div>
</body>

css源码

js 复制代码 
*{
    margin: 0;
    padding: 0;
}

/*用来装两个小可爱  */
.box{ 
    display: flex;
    width: 400px;
    height: 300px;
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    background-color: red;
    justify-content: center;
    align-items: center;
}

/* 两个小可爱的头 */
.head{
    background-color:yellow;
    width: 100px;
    height: 100px;
    border: 8px solid black;
    border-radius: 50%;
}

/* 两个小可爱的脸 */
.l-face,.r-face{
    position: relative;
    width: 100px;
    height: 100px;
  }
/* 两个小可爱的眼睛 */
.eye{
    position: absolute;
    width:15px;
    height:14px;
    border-bottom: 5px solid black;
    border-radius: 50%;
}

/* 调整左边小可爱左眼睛位置 */
.l-left{
  right:10px;
  top:25px;
}

/* 调整左边小可爱右眼睛位置 */
.l-right{
    left:35px;
    top:25px;
}

 /* 调整右边小可爱头的位置 */
.h-right{
    translate: -15px;
}

/* 调整右边小可爱左眼睛位置 */
.r-left{
  border-top:5px solid;
  border-bottom:0px solid;
  left:15px;
  top:30px;
}

/* 调整右边小可爱右眼睛位置 */
.r-right{
    border-top:5px solid;
    border-bottom:0px solid;
    right:30px;
    top:30px;
}

/* 两个小可爱的嘴巴 */
.mouth{
    width:30px;
    height:14px;
    border-radius:50%;
    border-bottom:5px solid black;
    position:absolute;
    bottom:30px;
    right:25px;
}

/* 调整右小可爱嘴巴位置 */
.r-mouth{
  bottom: 25px;
  right:40px;
}

/* 两个小可爱脸上左边的红晕 */
.face::after{
    position:absolute;
    content:"";
    width:18px;
    height:8px;
    background-color:#badc58;
    left:20px;
    bottom:40px;
    border-radius:50%;
  }
  
  /* 两个小可爱脸上右边的红晕 */
  .face::before{
      position:absolute;
      content:"";
      width:18px;
      height:8px;
      background-color:#badc58;
      right:5px;
      bottom:40px;
      border-radius:50%;
  }
  
  /* 调整右边小可爱脸上右边的红晕 */
  .r-face::before{
      width:10px;
      height:10px;
      right:27px;
  }
  
  /* 调整右边小可爱脸上左边的红晕 */
  .r-face::after{
      width:10px;
      height:10px;
      left:10px;
  }
  
  /* 左边小可爱的头向右边小可爱移动 */
.h-left{
    z-index: 1;
    animation: move 5s ease infinite;
  }

  @keyframes move{
    0%{transform:translate(0)}
    9%{transform:translate(8px)}
    25%{transform:translate(8px)}
    45%{transform:translate(0px)}
  }

  /* 左边小可爱的脸向右边小可爱蹭蹭 */
  .l-face{
    animation: cengceng 5s ease infinite;
  }

  @keyframes cengceng{
    0%{transform:translate(0) rotate(0);}
    10%{transform:translate(5px) rotate(-2deg);}
    18%{transform:translate(0) rotate(0);}
    25%{transform:translate(5px) rotate(-2deg);}
    40%{transform:translate(0) rotate(0);}
  }

  /* 右边小可爱kiss的嘴形 */
.kiss{
    width:15px;
    height:14px;
    border-radius:50%;
    border-left:5px solid black;
  }
  
  /* 调整右边小可爱kiss嘴形的位置 */
.kissmouth{
    position: absolute;
    left: 35px;
    bottom: 20px;
  }

  /* 右边小可爱靠近左边小可爱 */
.h-right{
    animation:close 5s ease infinite;
  }

  @keyframes close{
    30%{transform:translate(0);}
    40%{transform:translate(30px) rotate(15deg);}
    50%{transform:translate(-33px) rotate(-10deg);}
    65%{transform:translate(-33px);}
    70%{transform:translate(0);}
  }

  /* 右边小可爱原来嘴型旋转隐藏 */
.r-mouth{
    animation: mRotate 5s ease infinite;
  }
  
  @keyframes mRotate{
    44.9%{transform:rotate(0deg);opacity: 1}
    45%{transform:rotate(90deg);opacity: 0}
    64%{transform:rotate(90deg);opacity: 0;}
    64.1%{transform:rotate(0);opacity: 1}
  }

  /* 调整右边小可爱kiss嘴形出现隐藏 */
.kissmouth{
    opacity: 0;
    animation:kiss-mouth 5s ease infinite;
  }

  @keyframes kiss-mouth{
    45%{opacity:0 }
    46%{opacity:1 }
    64%{opacity:1 }
    64.1%{opacity:0 }
  }

  //脸红部分
  .redface{
    width: 25px;
    height: 15px;
    border-radius:50%;
    background: radial-gradient(red,white);
  }
  
  .redFace{
    position: absolute;
    width: 82px;
    height: 30px;
    display: flex;
    left:17px;
    bottom:29px;
    justify-content: space-between;
    align-items: center;
    opacity: 0;
    z-index: 1;
    animation: faceRed 5s ease infinite;
  }
  
  @keyframes faceRed{
    50%{ opacity: 0;}
    85%{ opacity: 0.6;}
    88%{ opacity: 0.6;}
    100%{ opacity: 0;}
  }
相关推荐
GISer_Jing1 分钟前
Axios面试常见问题详解
前端·javascript·面试
库库林_沙琪马3 分钟前
深入理解 @JsonGetter：精准掌控前端返回数据格式！
java·前端
CRPER18 分钟前
告别繁琐配置：一个现代化的 TypeScript 库开发模板，让你高效启动项目！
前端·typescript·node.js
Embrace31 分钟前
NextAuth实现Google登录报错问题
前端
小海编码日记33 分钟前
Geadle，Gradle插件，Android Studio and sdk版本对应关系
前端
粤M温同学37 分钟前
Web前端基础之HTML
前端·html
love530love43 分钟前
是否需要预先安装 CUDA Toolkit？——按使用场景分级推荐及进阶说明
linux·运维·前端·人工智能·windows·后端·nlp
泯泷2 小时前
「译」为 Rust 及所有语言优化 WebAssembly
前端·后端·rust
LinXunFeng2 小时前
Flutter - GetX Helper 如何应用于旧页面
前端·flutter·开源
紫薯馍馍2 小时前
Dify创建 echarts图表 （二）dify+python后端flask实现
前端·flask·echarts·dify
热门推荐
01Coze扣子平台完整体验和实践（附国内和国际版对比）02【图像处理与机器视觉】XJTU期末考点03KGG转MP3工具|非KGM文件|解密音频04扣子（coze）实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解05海康Visionmaster-常见问题排查方法-启动阶段06YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】07零代码入门 | Coze——让大模型接入自己的数据库08从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑09【SpeedAI科研小助手】2分钟极速解决知网维普重复率、AIGC率过高，一键全文降！文件格式不变，公式都保留的！10DeepSeek各版本说明与优缺点分析