CSS3小可爱亲吻表白特效，给你的五一假期增添点小乐趣

客官°小女子只卖身不卖艺 2023-09-26 23:28 102阅读 0赞

> 马上五一假期了，小伙伴们是不是都准备出去旅游呢，或者回老家陪陪父母。今天我用CSS3制作一个小可爱**亲吻表白的特效**，来给你即将到来的五一假期增添点小小的乐趣。

![cdf2e58a26fe459ca1b0430459bd6f5a.png][]

**目录**

实现思路

左边小可爱的实现

右边小可爱的实现

左右摇摆动效的实现

右边小嘴儿的动态效果实现

完整源代码

最后

--------------------

#### 实现思路 ####

会有左右两个元素分别分别表示这2个小可爱；

然后会添加一定的圆角，定位来实现眼睛，嘴，和脸夹的效果；

通过左右2个小可爱的动画，利用animation动画实现左右摇摆的特效；

最后就是右边的小可爱**撅起小嘴儿**的可爱特效，我们开始吧。

#### 左边小可爱的实现 ####

通过**border-radius**的CSS3属性，设定50%的属性值，将脸庞设置为原型，class类为.face，然后利用**:before**和**:after**实现脸夹的小椭圆，然后是眼睛，通过设置width和height的宽高比例，再加上一定的圆角度数，来实现弯弯起的效果，嘴角也同样的一样的设置，HTML代码如下：

**效果图如下**：

![23f02abdb4c243889c421e23b68e852e.png][]

#### 右边小可爱的实现 ####

> 左边和右边的实现大体思路相同，但是左边和右边的小可爱存在对称性，一个朝右，一个朝左，所以与左边小可爱不同的是控制**position**定位的不同，大家也可以根据自己的喜好，修改定位，修改色值。

但右侧的小可爱明显扮演了主动的一方，所以眼角和嘴角也略有不同，脸夹的红晕也会有所不同，这些都是**border-radius**的不断修改参数值进行控制，代码如下：

<div id='r-ball' class='ball'>
        <div class='face face-r'>
          <div class='eye eye-l eye-r-p'></div>
          <div class='eye eye-r eye-r-p'></div>
          <div class='mouth mouth-r'></div>
          <div class='kiss-m'>
            <div class='kiss'></div>
            <div class='kiss'></div>
          </div>
        </div>
      </div>
    
    
    
    .face-r{
      left:0;
      top:37px;
    }
    
    .face-r:after{
      width:10px;
      height:10px;
      left:5px;
    }
    
    .face-r:before{
      width:10px;
      height:10px;
      right:-4px;
    }
    .eye{
      width:15px;
      height:14px;
      border-radius:50%;
      border-bottom:5px solid;
      position:absolute;
    }
    
    .eye-r-p{
      border-top:5px solid;
      border-bottom:0px solid;
    }
    
    .eye-l{
      left:10px;
    }
    
    .eye-r{
      right:5px;
    }

#### 左右摇摆动效的实现 ####

> 两个小可爱不停**左右摇摆**，这里主要使用了animation动画，来控制左右的位置，而且左侧的小可爱为了实现自己的小脸儿前后拧动的效果，也会有一个动画改变其**transform**的属性效果，CSS3代码如下：

@keyframes close{
      0%{transform:translate(0)}
      20%{transform:translate(20px)}
      35%{transform:translate(20px)}
      55%{transform:translate(0px)}
      100%{transform:translate(0px)}
    }
    
    @keyframes face{
      0%{transform:translate(0) rotate(0);}
      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);}
    }

![bee93a8bdaf54c2e9b0b9aa53862632f.png][]

#### 右边小嘴儿的动态效果实现 ####

这里先是由一个半圆角的嘴形状，然后变为两个小上下的形状，可通过改变**background**的属性来设置2个小嘴的末端色值，然后再通过**animation**的类动画来有个渐变，上下的效果。然后再通过让2个小可爱不断改变位置，达到表白的效果。当然，这里border-radius的合理设置也必不可少，CSS3代码如下：

.kiss-m{
      position:absolute;
      left:20px;
      top:22px;
      opacity:0;
      animation:kiss-m 4s ease infinite;
    }
    
    @keyframes kiss-m{
      0%{opacity:0;}
      55%{opacity:0;}
      55.1%{opacity:1;}
      66%{opacity:1;}
      66.1%{opacity:0;}
    }

#### 完整源代码 ####

> 小伙伴们可以如果看了上面的讲解还不是很清楚，可以直接复制下方源代码，放到自己的HTML文档里即可，然后用浏览器打开，就可以看见效果啦，完整源代码如下：

<!DOCTYPE html>
    <html lang="en" >
    <head>
    <meta charset="UTF-8">
    <title>CSS3表白特效</title>
    
    <style>
      body{
      background-color: red;
      margin:0;
    }
    
    .container{
      margin: auto;
      position: absolute;
      top: 50%; left: 50%;
      -webkit-transform: translate(-50%,-50%);
          -ms-transform: translate(-50%,-50%);
              transform: translate(-50%,-50%);
      width:248px;
    }
    
    .face{
      width:70px;
      height:30px;
      position:absolute;
      right:0;
      top:30px;
      border-top-right-radius:15px;
    }
    
    #r-ball{
      animation: kiss 4s ease infinite;
      background-color:#FD4;
    }
    
    @keyframes kiss{
      40%{transform:translate(0px);}
      50%{transform:translate(30px) rotate(20deg);}
      60%{transform:translate(-33px);}
      67%{transform:translate(-33px);}
      77%{transform:translate(0px);}
    }
    
    .kiss{
      background-color:red;
      width:13px;
      height:10px;
      background-color:#FD4;
      border-radius:50%;
      border-left:5px solid;
    }
    
    .kiss-m{
      position:absolute;
      left:20px;
      top:22px;
      opacity:0;
      animation:kiss-m 4s ease infinite;
    }
    
    @keyframes kiss-m{
      0%{opacity:0;}
      55%{opacity:0;}
      55.1%{opacity:1;}
      66%{opacity:1;}
      66.1%{opacity:0;}
    }
    
    .mouth-r{
      animation:mouth-m 4s ease infinite;
    }
    
    @keyframes mouth-m{
      0%{opacity:1;}
      54.9%{opacity:1;}
      55%{opacity:0;}
      66%{opacity:0;}
      66.1%{opacity:1;}
    }
    
    .face:after{
      position:absolute;
      content:"";
      width:18px;
      height:8px;
      background-color:#badc58;
      left:-5px;
      top:20px;
      border-radius:50%;
    }
    
    .face:before{
      position:absolute;
      content:"";
      width:18px;
      height:8px;
      background-color:#badc58;
      right:-8px;
      top:20px;
      border-radius:50%;
      z-index:-1;
    }
    
    .face-r{
      left:0;
      top:37px;
    }
    
    .face-r:after{
      width:10px;
      height:10px;
      left:5px;
    }
    
    .face-r:before{
      width:10px;
      height:10px;
      right:-4px;
    }
    .eye{
      width:15px;
      height:14px;
      border-radius:50%;
      border-bottom:5px solid;
      position:absolute;
    }
    
    .eye-r-p{
      border-top:5px solid;
      border-bottom:0px solid;
    }
    
    .eye-l{
      left:10px;
    }
    
    .eye-r{
      right:5px;
    }
    
    .mouth{
      width:30px;
      height:14px;
      border-radius:50%;
      border-bottom:5px solid;
      position:absolute;
      bottom:-5px;
      transform:translate(3px);
      left:0;
      right:0;
      margin: auto;
    }
    
    .ball{
      border: 8px solid;
      width:100px;
      height:100px;
      border-radius:50%;
      display:inline-block;
      vertical-align:top;
      position:relative;
    }
    
    #r-ball{
      position:relative;
      z-index:40;
    }
    
    
    #l-ball{
      animation: close 4s ease infinite;
      position:relative;
      z-index:50;
      background-color:#FD4;
    }
    
    .face-l{
      animation: face 4s ease infinite;
    }
    
    @keyframes close{
      0%{transform:translate(0)}
      20%{transform:translate(20px)}
      35%{transform:translate(20px)}
      55%{transform:translate(0px)}
      100%{transform:translate(0px)}
    }
    
    @keyframes face{
      0%{transform:translate(0) rotate(0);}
      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);}
    }
    
    </style>
    
    </head>
    <body>
    
    <div class='container'>
      <div id='l-ball' class='ball'>
        <div class='face face-l'>
          <div class='eye eye-l'></div>
          <div class='eye eye-r'></div>
          <div class='mouth'></div>
        </div>
      </div>
      <div id='r-ball' class='ball'>
        <div class='face face-r'>
          <div class='eye eye-l eye-r-p'></div>
          <div class='eye eye-r eye-r-p'></div>
          <div class='mouth mouth-r'></div>
          <div class='kiss-m'>
            <div class='kiss'></div>
            <div class='kiss'></div>
          </div>
        </div>
      </div>
    </div>
    
    </body>
    </html>

#### 最后 ####

希望你可以喜欢这个CSS3实现的小可爱表白小特效，祝福大家的生活像这对小可爱一样，和和美美，幸福健康，开心快乐。也祝福小伙伴们在即将到了五一假期可以快乐，开心，健康的玩耍。下面我给大家准备了一个非常有意思的投票，**请喜欢的小伙伴投个票**吧。

[cdf2e58a26fe459ca1b0430459bd6f5a.png]: https://img-blog.csdnimg.cn/cdf2e58a26fe459ca1b0430459bd6f5a.png
[23f02abdb4c243889c421e23b68e852e.png]: https://img-blog.csdnimg.cn/23f02abdb4c243889c421e23b68e852e.png
[bee93a8bdaf54c2e9b0b9aa53862632f.png]: https://img-blog.csdnimg.cn/bee93a8bdaf54c2e9b0b9aa53862632f.png