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

话不多说，我们先来看一看效果图叭！

是不是感觉很可爱呢~~~那这种效果是如何实现的呢？我们先一起来分析一下叭！

案例分析思路

1、元素分析：主体是两个圆圆的小可爱，都有两个眼睛，一张脸，一个嘴巴和左右腮红。

2、动画分析：动画1------左边小可爱往右边小可爱移动，并蹭蹭两次；

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

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

3、容器分析：有个背景红色的容器，里面装了两个小可爱，两个小可爱也是容器（黄色的圆），装了一张脸，然后脸里面装了眼睛，嘴巴和腮红。

好的，分析完啦，我们现在一起通过代码来实现一下叭！

效果实现

第一步：实现初步效果，如下图

首先通过边框可以绘制好两个小可爱，父容器box使用display:flex变成弹性容器，通过justify-content: center和align-items: center可实现两个小可爱在box容器中水平垂直居中。代码如下：

js 复制代码

    <div>
        <div class="box">
        <div class="head"></div>
        <div class="head"></div>
    </div>

js 复制代码

    /*用来装两个小可爱  */
.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%;
}

第二步：实现两个小可爱的主体样式，如下图

可以先实现两个小可爱公共的样式结构，然后不一样的地方可以再增加样式进行布局调整。布局的调整我们可以通过使用绝对定位，再使用left,right,bottom,top这样的方位词这样就能把想要的元素放在我们想要的位置上啦！代码如下：

js 复制代码

<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>
        </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>
        </div>
</div>

js 复制代码

 /* 两个小可爱的脸 */
.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;
}
/* 调整右边小可爱左眼睛位置 */
.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;
}

第三步：实现两个小可爱的腮红效果，如下图，

这里的实现效果运用了CSS的伪元素代码::before和::after，伪元素可以提供更好的可访问性、减少HTML的冗余、简化布局与样式，同时也增强了页面的交互性和美观性，是CSS中非常有用的工具。代码如下：

js 复制代码

        /* 两个小可爱脸上左边的腮红 */
.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;
}

总结

到这里两个小可爱整体的静态结构就写好啦！不知道你有没有实现呢，要是也实现了那真是太酷啦。由于篇幅有点长，动画的实现我就写在下一篇文章啦。萌新小白上路，代码和观点仅供参考，有不对或者更好的方法还望各路大神指出啦😘~最后，可不可以给俺的文章留下一个小小的赞😍呢！笔芯（づ￣3￣）づ╭❤️～