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实现的小可爱表白小特效，祝福大家的生活像这对小可爱一样，和和美美，幸福健康，开心快乐。也祝福小伙伴们在即将到了五一假期可以快乐，开心，健康的玩耍。下面我给大家准备了一个非常有意思的投票，请喜欢的小伙伴投个票吧。
相关文章：
CSS3小可爱亲吻表白特效，给你的五一假期增添点小乐趣
马上五一假期了，小伙伴们是不是都准备出去旅游呢，或者回老家陪陪父母。今天我用CSS3制作一个小可爱亲吻表白的特效，来给你即将到来的五一假期增添点小小的乐趣。 目录 实现思路 左边小可爱的实现 右边小可爱的实现 左右摇摆动效的实现 右…...
Samba CentOS 7 安装
安装步骤 Samba是在Linux与Windows系统间共享文件和打印机的标准协议。要在CentOS上安装Samba,可以按以下步骤操作: 安装Samba相关包: yum install samba samba-client samba-common创建Samba配置文件/etc/samba/smb.conf: vim /etc/samba/smb.conf添加如下配置: [global]…...
Mac电脑 Vscode ： Flutter 开发环境搭建（最细节教程）
参考链接： MacVSCode安装flutter环境_mac vscode配置flutter_GalenWu的博客-CSDN博客 mac搭建Flutter环境以及初始化项目 - 简书 注意： *下载xcode 就包含git了, *苹果芯片和intel 芯片需要的环境不同，苹果芯片需要安装： Im…...
BEVFormer 论文学习
1. 解决了什么问题？ 3D 视觉感知任务，包括基于多相机图像的 3D 目标检测和分割，对于自动驾驶系统非常重要。与基于 LiDAR 的方法相比，基于相机图像的方法能够检测到更远距离的目标，识别交通信号灯、交通标识等信息。有…...
现在的00后，实在是太卷了,我们这些老油条都想辞职了......
现在的小年轻真的卷得过分了。前段时间我们公司来了个00年的，工作没两年，跳槽到我们公司起薪20K，都快要超过我了。 后来才知道人家是个卷王，从早干到晚就差搬张床到工位睡觉了。 最近和他聊了一次天，原来这位小老弟家…...
shell 数组定义与使用
一维数组 数组定义 array_name(value1 value2 ... value)也可以使用数字下表来定义数组 array_name[0]value0 array_name[1]value1 array_name[2]value2读取数组 ${array_name[index]}实例1 [rootiZj6c3slqbp8xuu2w3i4roZ devops]# cat array_name.sh #!/usr/bin/bashmy_…...
24 KVM管理虚拟机-配置VNC-TLS登录
文章目录 24 KVM管理虚拟机-配置VNC-TLS登录24.1 概述24.2 操作步骤 24 KVM管理虚拟机-配置VNC-TLS登录 24.1 概述 VNC服务端和客户端默认采用明文方式进行数据传输，因此通信内容可能被第三方截获。为了提升安全性，openEuler支持VNC服务端配置TLS模式进…...
C++基础讲解第六期（多态、虚函数、虚析构函数、dynamic_cast、typeid纯虚函数）
C基础讲解第六期 代码中也有对应知识注释，别忘看，一起学习！ 一、多态1. 问题引出2. 多态的概念和使用3. 多态的原理4. 虚析构函数5. 动态类型识别(dynamic_cast)(1) 自定义类型(2). dynamic_cast(3). typeid 6. 纯虚函数 纯虚函数需要补充 一…...
防火墙之iptables（二）
防火墙之iptables（二） 一.SNAT原理与应用 1.应用环境 局域网主机共享单个公网IP地址接入Internet（私网不能被Internet中正常路由）2.SNAT原理 修改数据包的源地址内网访问外网 将从内网发送到外网的数据包的源IP由私网IP转换成…...
亚马逊销量暴跌该如何查找原因?
很多卖家经常遇到一个棘手的问题，就是突然会遇到链接销量暴跌的问题。 比如之前链接可以稳定出单10多单的，突然连续几天只有两三单，这到底是什么原因呢? 1.查看链接的类目是否被修改 这个类目修改不一定是卖家自己修改，更多的时…...
Vue中的脚手架和路由
私人博客 许小墨のBlog —— 菜鸡博客直通车 系列文章完整版，配图更多，CSDN博文图片需要手动上传，因此文章配图较少，看不懂的可以去菜鸡博客参考一下配图！ 系列文章目录 前端系列文章——传送门 后端系列文章——传送…...
Convolutional Neural network(卷积神经网络)
目录 Why CNN for Image？ The whole CNN structure Convolution（卷积） Max Pooling Flatten CNN in Keras What does CNN learn？ what does filter do what does neuron do what about output Deep Dream Application Pla…...
【资料分享】高边、低边晶体管开关及电路解析
高边和低边晶体管开关 电路中，晶体管常常被用来当做开关使用。晶体管用作开关时有两种不同的接线方式：高边（high side）和低边(low side)。 高边和低边是由晶体管在电路中的位置决定的。晶体管可以是双极性晶体管（BJT…...
六级备考28天｜CET-6｜听力第二讲｜长对话满分技巧｜听写技巧｜2022年6月考题｜14:30~16:00
目录 1. 听力策略 2. 第一二讲笔记 3. 听力原文复现 (5)第五小题 (6)第六小题 (7)第七小题 (8)第八小题 扩展业务 expand business 4. 重点词汇 1. 听力策略 2. 第一二讲笔记 3. 听力原文复现 (5)第五小题 our guest is Molly Sundas, a university stud…...
计算机图形学 | 实验九：纹理贴图和天空盒
计算机图形学 | 实验九：纹理贴图和天空盒 计算机图形学 | 实验九：纹理贴图和天空盒实验概述顶点数据立方体顶点数据天空盒顶点数组 纹理载入创建纹理纹理读取纹理绑定 使用纹理立方体着色器顶点着色器片元着色器 天空盒着色器顶点着色器片元着色器 立方体…...
Unity A* Pathfinding Project
先下载免费版 https://arongranberg.com/astar/download# 教程首页 https://arongranberg.com/astar/docs/getstarted.html 创建一个plane 当地面 创建一个gameobject 添加组件 PathFinder 长这样 调整每个格子大小的 创建两个layer 一个是阻挡物的 一个是地面的 这里填入阻…...
SpringBoot ( 一 ) 搭建项目环境
1.搭建环境 1.1.创建项目向导 使用idea中的向导创建SpringBoot项目 1.1.1.建立新的项目 位置 : 菜单 > File > New > Project… 1.1.2.选择向导 默认的向导URL 是 https://start.spring.io 建议使用 https://start.aliyun.com 1.1.3.配置项目信息 Group : 组织…...
idea中关联Git
注意：未安装和配置Git软件，请先跳转到 Git宝典_没办法，我就是这么菜的博客-CSDN博客 idea关联git 关联git.exe 选择你的Version Control 下的Git 选择你的Git安装目录bin下的git.exe，点击ok 点击Test，显示版本号…...
Java面试知识点(全)-分布式微服务-zookeeper面试知识点
Java面试知识点(全) 导航： https://nanxiang.blog.csdn.net/article/details/130640392 注：随时更新 ZooKeeper是什么？ ZooKeeper是一个分布式的，开放源码的分布式应用程序协调服务，是Google的Chubby一个开源的实现&…...
（IDEA）springCloud项目导入本地jar包方法和项目打包时找不到引入本地jar包的问题解决方案
idea导入本地jar包 方法一:点击左上角File–>Project Structure–>Modules。打开Modules界面点击下方号，选择第一项，找到想要导入的本地jar包。此方法可以使项目使用导入的jar包程序不报错，但是在打包项目时，会出现找不到程…...
。】2022-5-15)
【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15
缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下： struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...
进程地址空间（比特课总结）
一、进程地址空间 1. 环境变量 1 ）⽤户级环境变量与系统级环境变量 全局属性：环境变量具有全局属性，会被⼦进程继承。例如当bash启动⼦进程时，环 境变量会⾃动传递给⼦进程。 本地变量限制：本地变量只在当前进程(ba…...
css实现圆环展示百分比，根据值动态展示所占比例
代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...
day52 ResNet18 CBAM
在深度学习的旅程中，我们不断探索如何提升模型的性能。今天，我将分享我在 ResNet18 模型中插入 CBAM（Convolutional Block Attention Module）模块，并采用分阶段微调策略的实践过程。通过这个过程，我不仅提升…...
【git】把本地更改提交远程新分支feature_g
创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...
AI编程--插件对比分析：CodeRider、GitHub Copilot及其他
AI编程插件对比分析：CodeRider、GitHub Copilot及其他 随着人工智能技术的快速发展，AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者，分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...
智能分布式爬虫的数据处理流水线优化：基于深度强化学习的数据质量控制
在数字化浪潮席卷全球的今天，数据已成为企业和研究机构的核心资产。智能分布式爬虫作为高效的数据采集工具，在大规模数据获取中发挥着关键作用。然而，传统的数据处理流水线在面对复杂多变的网络环境和海量异构数据时，常出现数据质…...
如何更改默认 Crontab 编辑器 ？
在 Linux 领域中，crontab 是您可能经常遇到的一个术语。这个实用程序在类 unix 操作系统上可用，用于调度在预定义时间和间隔自动执行的任务。这对管理员和高级用户非常有益，允许他们自动执行各种系统任务。 编辑 Crontab 文件通常使用文本编…...
[ACTF2020 新生赛]Include 1(php://filter伪协议)
题目 做法 启动靶机，点进去 点进去 查看URL，有 ?fileflag.php说明存在文件包含，原理是php://filter 协议 当它与包含函数结合时，php://filter流会被当作php文件执行。 用php://filter加编码，能让PHP把文件内容…...
LOOI机器人的技术实现解析：从手势识别到边缘检测
LOOI机器人作为一款创新的AI硬件产品，通过将智能手机转变为具有情感交互能力的桌面机器人，展示了前沿AI技术与传统硬件设计的完美结合。作为AI与玩具领域的专家，我将全面解析LOOI的技术实现架构，特别是其手势识别、物体识别和环境…...