入门切图小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;}
  }
相关推荐
乌兰麦朵13 分钟前
Vue吹的颅内高潮，全靠选择性失明和 .value 的PUA！
前端·vue.js
Code季风13 分钟前
Gin Web 层集成 Viper 配置文件和 Zap 日志文件指南（下）
前端·微服务·架构·go·gin
蓝倾14 分钟前
如何使用API接口实现淘宝商品上下架监控？
前端·后端·api
舂春儿15 分钟前
如何快速统计项目代码行数
前端·后端
毛茸茸16 分钟前
⚡ 从浏览器到编辑器只需1秒，这个React定位工具改变了我的开发方式
前端
Pedantic16 分钟前
我们什么时候应该使用协议继承？——Swift 协议继承的应用与思
前端·后端
Software攻城狮17 分钟前
vite打包的简单配置
前端
Codebee17 分钟前
如何利用OneCode注解驱动，快速训练一个私有的AI代码助手
前端·后端·面试
流星稍逝18 分钟前
用vue3的写法结合uniapp在微信小程序中实现图片压缩、调整分辨率、做缩略图功能
前端·vue.js
知了一笑21 分钟前
独立开发问题记录-margin塌陷
前端
热门推荐
01Java学习第十五部分——MyBatis02集群聊天服务器---MySQL数据库的建立03Coze扣子平台完整体验和实践（附国内和国际版对比）04基于odoo17的设计模式详解---装饰模式05使用Ruby接入实时行情API教程06扣子（coze）实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解07Everything文件检索工具 几秒检索几百G的文件08基于odoo17的设计模式详解---单例模式09DeepSeek各版本说明与优缺点分析10【无标题】