表白文案（CSS3小可爱亲吻表白特效，给你的五一假期增添点小乐趣）
马上五一假期了 ，小伙伴们是不是都准备出去旅游呢 ，或者回老家陪陪父母 。今天我用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实现的小可爱表白小特效 ，祝福大家的生活像这对小可爱一样 ，和和美美 ，幸福健康 ，开心快乐 。也祝福小伙伴们在即将到了五一假期可以快乐 ，开心 ，健康的玩耍 。下面我给大家准备了一个非常有意思的投票 ，请喜欢的小伙伴投个票吧 。
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！