0
0

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

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

实现思路

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

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

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

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

左边小可爱的实现

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

  1. <div id='l-ball' class='ball'>
  2.     <div class='face face-l'>
  3.       <div class='eye eye-l'></div>
  4.       <div class='eye eye-r'></div>
  5.       <div class='mouth'></div>
  6.     </div>
  7.   </div>

效果图如下：

右边小可爱的实现

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

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

  1. <div id='r-ball' class='ball'>
  2.     <div class='face face-r'>
  3.       <div class='eye eye-l eye-r-p'></div>
  4.       <div class='eye eye-r eye-r-p'></div>
  5.       <div class='mouth mouth-r'></div>
  6.       <div class='kiss-m'>
  7.         <div class='kiss'></div>
  8.         <div class='kiss'></div>
  9.       </div>
  10.     </div>
  11.   </div>
  13. <!-- CSS3代码 -->
  14. .face-r{
  15.   left:0;
  16.   top:37px;
  17. }
  19. .face-r:after{
  20.   width:10px;
  21.   height:10px;
  22.   left:5px;
  23. }
  25. .face-r:before{
  26.   width:10px;
  27.   height:10px;
  28.   right:-4px;
  29. }
  30. .eye{
  31.   width:15px;
  32.   height:14px;
  33.   border-radius:50%;
  34.   border-bottom:5px solid;
  35.   position:absolute;
  36. }
  38. .eye-r-p{
  39.   border-top:5px solid;
  40.   border-bottom:0px solid;
  41. }
  43. .eye-l{
  44.   left:10px;
  45. }
  47. .eye-r{
  48.   right:5px;
  49. }

左右摇摆动效的实现

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

  1. @keyframes close{
  2.   0%{transform:translate(0)}
  3.   20%{transform:translate(20px)}
  4.   35%{transform:translate(20px)}
  5.   55%{transform:translate(0px)}
  6.   100%{transform:translate(0px)}
  7. }
  9. @keyframes face{
  10.   0%{transform:translate(0) rotate(0);}
  11.   10%{transform:translate(0) rotate(0);}
  12.   20%{transform:translate(5px) rotate(-2deg);}
  13.   28%{transform:translate(0) rotate(0);}
  14.   35%{transform:translate(5px) rotate(-2deg);}
  15.   50%{transform:translate(0) rotate(0);}
  16.   100%{transform:translate(0) rotate(0);}
  17. }

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

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

  1. .kiss-m{
  2.   position:absolute;
  3.   left:20px;
  4.   top:22px;
  5.   opacity:0;
  6.   animation:kiss-m 4s ease infinite;
  7. }
  9. @keyframes kiss-m{
  10.   0%{opacity:0;}
  11.   55%{opacity:0;}
  12.   55.1%{opacity:1;}
  13.   66%{opacity:1;}
  14.   66.1%{opacity:0;}
  15. }

完整源代码

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

  1. <!DOCTYPE html>
  2. <html lang="en" >
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>CSS3表白特效</title>
  7. <style>
  8.   body{
  9.   background-color: red;
  10.   margin:0;
  11. }
  13. .container{
  14.   margin: auto;
  15.   position: absolute;
  16.   top: 50%; left: 50%;
  17.   -webkit-transform: translate(-50%,-50%);
  18.       -ms-transform: translate(-50%,-50%);
  19.           transform: translate(-50%,-50%);
  20.   width:248px;
  21. }
  23. .face{
  24.   width:70px;
  25.   height:30px;
  26.   position:absolute;
  27.   right:0;
  28.   top:30px;
  29.   border-top-right-radius:15px;
  30. }
  32. #r-ball{
  33.   animation: kiss 4s ease infinite;
  34.   background-color:#FD4;
  35. }
  37. @keyframes kiss{
  38.   40%{transform:translate(0px);}
  39.   50%{transform:translate(30px) rotate(20deg);}
  40.   60%{transform:translate(-33px);}
  41.   67%{transform:translate(-33px);}
  42.   77%{transform:translate(0px);}
  43. }
  45. .kiss{
  46.   background-color:red;
  47.   width:13px;
  48.   height:10px;
  49.   background-color:#FD4;
  50.   border-radius:50%;
  51.   border-left:5px solid;
  52. }
  54. .kiss-m{
  55.   position:absolute;
  56.   left:20px;
  57.   top:22px;
  58.   opacity:0;
  59.   animation:kiss-m 4s ease infinite;
  60. }
  62. @keyframes kiss-m{
  63.   0%{opacity:0;}
  64.   55%{opacity:0;}
  65.   55.1%{opacity:1;}
  66.   66%{opacity:1;}
  67.   66.1%{opacity:0;}
  68. }
  70. .mouth-r{
  71.   animation:mouth-m 4s ease infinite;
  72. }
  74. @keyframes mouth-m{
  75.   0%{opacity:1;}
  76.   54.9%{opacity:1;}
  77.   55%{opacity:0;}
  78.   66%{opacity:0;}
  79.   66.1%{opacity:1;}
  80. }
  82. .face:after{
  83.   position:absolute;
  84.   content:"";
  85.   width:18px;
  86.   height:8px;
  87.   background-color:#badc58;
  88.   left:-5px;
  89.   top:20px;
  90.   border-radius:50%;
  91. }
  93. .face:before{
  94.   position:absolute;
  95.   content:"";
  96.   width:18px;
  97.   height:8px;
  98.   background-color:#badc58;
  99.   right:-8px;
  100.   top:20px;
  101.   border-radius:50%;
  102.   z-index:-1;
  103. }
  105. .face-r{
  106.   left:0;
  107.   top:37px;
  108. }
  110. .face-r:after{
  111.   width:10px;
  112.   height:10px;
  113.   left:5px;
  114. }
  116. .face-r:before{
  117.   width:10px;
  118.   height:10px;
  119.   right:-4px;
  120. }
  121. .eye{
  122.   width:15px;
  123.   height:14px;
  124.   border-radius:50%;
  125.   border-bottom:5px solid;
  126.   position:absolute;
  127. }
  129. .eye-r-p{
  130.   border-top:5px solid;
  131.   border-bottom:0px solid;
  132. }
  134. .eye-l{
  135.   left:10px;
  136. }
  138. .eye-r{
  139.   right:5px;
  140. }
  142. .mouth{
  143.   width:30px;
  144.   height:14px;
  145.   border-radius:50%;
  146.   border-bottom:5px solid;
  147.   position:absolute;
  148.   bottom:-5px;
  149.   transform:translate(3px);
  150.   left:0;
  151.   right:0;
  152.   margin: auto;
  153. }
  155. .ball{
  156.   border: 8px solid;
  157.   width:100px;
  158.   height:100px;
  159.   border-radius:50%;
  160.   display:inline-block;
  161.   vertical-align:top;
  162.   position:relative;
  163. }
  165. #r-ball{
  166.   position:relative;
  167.   z-index:40;
  168. }
  170. #l-ball{
  171.   animation: close 4s ease infinite;
  172.   position:relative;
  173.   z-index:50;
  174.   background-color:#FD4;
  175. }
  177. .face-l{
  178.   animation: face 4s ease infinite;
  179. }
  181. @keyframes close{
  182.   0%{transform:translate(0)}
  183.   20%{transform:translate(20px)}
  184.   35%{transform:translate(20px)}
  185.   55%{transform:translate(0px)}
  186.   100%{transform:translate(0px)}
  187. }
  189. @keyframes face{
  190.   0%{transform:translate(0) rotate(0);}
  191.   10%{transform:translate(0) rotate(0);}
  192.   20%{transform:translate(5px) rotate(-2deg);}
  193.   28%{transform:translate(0) rotate(0);}
  194.   35%{transform:translate(5px) rotate(-2deg);}
  195.   50%{transform:translate(0) rotate(0);}
  196.   100%{transform:translate(0) rotate(0);}
  197. }
  199. </style>
  201. </head>
  202. <body>
  204. <div class='container'>
  205.   <div id='l-ball' class='ball'>
  206.     <div class='face face-l'>
  207.       <div class='eye eye-l'></div>
  208.       <div class='eye eye-r'></div>
  209.       <div class='mouth'></div>
  210.     </div>
  211.   </div>
  212.   <div id='r-ball' class='ball'>
  213.     <div class='face face-r'>
  214.       <div class='eye eye-l eye-r-p'></div>
  215.       <div class='eye eye-r eye-r-p'></div>
  216.       <div class='mouth mouth-r'></div>
  217.       <div class='kiss-m'>
  218.         <div class='kiss'></div>
  219.         <div class='kiss'></div>
  220.       </div>
  221.     </div>
  222.   </div>
  223. </div>
  225. </body>
  226. </html>

最后

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

标签： css3 前端 css
本文转载自: https://blog.csdn.net/xingyu_qie/article/details/130405181
版权归原作者 经海路大白狗 所有， 如有侵权，请联系我们删除。
登录后发布评论

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

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航
没有找到文章内容分段。。。