当前位置: 首页 > news >正文

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

http://www.lryc.cn/news/69738.html

相关文章:

  • Samba CentOS 7 安装
  • Mac电脑 Vscode : Flutter 开发环境搭建(最细节教程)
  • BEVFormer 论文学习
  • 现在的00后,实在是太卷了,我们这些老油条都想辞职了......
  • shell 数组定义与使用
  • 24 KVM管理虚拟机-配置VNC-TLS登录
  • C++基础讲解第六期(多态、虚函数、虚析构函数、dynamic_cast、typeid纯虚函数)
  • 防火墙之iptables(二)
  • 亚马逊销量暴跌该如何查找原因?
  • Vue中的脚手架和路由
  • Convolutional Neural network(卷积神经网络)
  • 【资料分享】高边、低边晶体管开关及电路解析
  • 六级备考28天|CET-6|听力第二讲|长对话满分技巧|听写技巧|2022年6月考题|14:30~16:00
  • 计算机图形学 | 实验九:纹理贴图和天空盒
  • Unity A* Pathfinding Project
  • SpringBoot ( 一 ) 搭建项目环境
  • idea中关联Git
  • Java面试知识点(全)-分布式微服务-zookeeper面试知识点
  • (IDEA)springCloud项目导入本地jar包方法和项目打包时找不到引入本地jar包的问题解决方案
  • 非线性系统的线性化与泰勒级数
  • HOOPS全新文档系统上线!三维模型文件转换更便捷!
  • 第三篇:强化学习发展历史
  • 如何学会战略性思维?
  • 设备采购信息管理系统
  • Puppeteer入门实践
  • 生成VLC 及其模块的全面帮助
  • 什么是客户自助服务门户及其搭建方法
  • 【5.19】三、白盒测试方法—逻辑覆盖法
  • Linux安装MySQL后无法通过IP地址访问处理方法
  • 使用Python实现Rest API指南