马上五一假期了，小伙伴们是不是都准备出去旅游呢，或者回老家陪陪父母。今天我用CSS3制作一个小可爱亲吻表白的特效，来给你即将到来的五一假期增添点小小的乐趣。
目录
实现思路
左边小可爱的实现
右边小可爱的实现
左右摇摆动效的实现
右边小嘴儿的动态效果实现
完整源代码
最后
实现思路
会有左右两个元素分别分别表示这2个小可爱；
然后会添加一定的圆角，定位来实现眼睛，嘴，和脸夹的效果；
通过左右2个小可爱的动画，利用animation动画实现左右摇摆的特效；
最后就是右边的小可爱撅起小嘴儿的可爱特效，我们开始吧。
左边小可爱的实现
通过border-radius的CSS3属性，设定50%的属性值，将脸庞设置为原型，class类为.face，然后利用:before和:after实现脸夹的小椭圆，然后是眼睛，通过设置width和height的宽高比例，再加上一定的圆角度数，来实现弯弯起的效果，嘴角也同样的一样的设置，HTML代码如下：
<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>效果图如下：
右边小可爱的实现
左边和右边的实现大体思路相同，但是左边和右边的小可爱存在对称性，一个朝右，一个朝左，所以与左边小可爱不同的是控制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>
<!-- CSS3代码 -->
.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);}
}
右边小嘴儿的动态效果实现
这里先是由一个半圆角的嘴形状，然后变为两个小上下的形状，可通过改变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实现的小可爱表白小特效，祝福大家的生活像这对小可爱一样，和和美美，幸福健康，开心快乐。也祝福小伙伴们在即将到了五一假期可以快乐，开心，健康的玩耍。下面我给大家准备了一个非常有意思的投票，请喜欢的小伙伴投个票吧。
