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包程序不报错，但是在打包项目时，会出现找不到程…...
【Axure高保真原型】引导弹窗
今天和大家中分享引导弹窗的原型模板，载入页面后，会显示引导弹窗，适用于引导用户使用页面，点击完成后，会显示下一个引导弹窗，直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...
19c补丁后oracle属主变化，导致不能识别磁盘组
补丁后服务器重启，数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后，存在与用户组权限相关的问题。具体表现为，Oracle 实例的运行用户（oracle）和集…...
CocosCreator 之 JavaScript/TypeScript和Java的相互交互
引擎版本： 3.8.1 语言： JavaScript/TypeScript、C、Java 环境：Window 参考：Java原生反射机制 您好，我是鹤九日！ 回顾 在上篇文章中：CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...
unix/linux，sudo，其发展历程详细时间线、由来、历史背景
sudo 的诞生和演化，本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来，让我们拨开时间的迷雾，一同探寻 sudo 那波澜壮阔（也颇为实用主义）的发展历程。 历史背景：su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前，Unix 系统管理员和需要特权操作的…...
让AI看见世界：MCP协议与服务器的工作原理
让AI看见世界：MCP协议与服务器的工作原理 MCP（Model Context Protocol）是一种创新的通信协议，旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天，MCP正成为连接AI与现实世界的重要桥梁。…...
tree 树组件大数据卡顿问题优化
问题背景 项目中有用到树组件用来做文件目录，但是由于这个树组件的节点越来越多，导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多，导致的浏览器卡顿，这里很明显就需要用到虚拟列表的技术&…...
学校时钟系统，标准考场时钟系统，AI亮相2025高考，赛思时钟系统为教育公平筑起“精准防线”
2025年#高考 将在近日拉开帷幕，#AI 监考一度冲上热搜。当AI深度融入高考，#时间同步 不再是辅助功能，而是决定AI监考系统成败的“生命线”。 AI亮相2025高考，40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕，江西、…...
PAN/FPN
import torch import torch.nn as nn import torch.nn.functional as F import mathclass LowResQueryHighResKVAttention(nn.Module):"""方案 1: 低分辨率特征 (Query) 查询高分辨率特征 (Key, Value).输出分辨率与低分辨率输入相同。"""def __…...
SQL慢可能是触发了ring buffer
简介 最近在进行 postgresql 性能排查的时候，发现 PG 在某一个时间并行执行的 SQL 变得特别慢。最后通过监控监观察到并行发起得时间 buffers_alloc 就急速上升，且低水位伴随在整个慢 SQL，一直是 buferIO 的等待事件，此时也没有其他会话的争抢。SQL 虽然不是高效 SQL ，但…...
JS手写代码篇----使用Promise封装AJAX请求
15、使用Promise封装AJAX请求 promise就有reject和resolve了，就不必写成功和失败的回调函数了 const BASEURL ./手写ajax/test.jsonfunction promiseAjax() {return new Promise((resolve, reject) > {const xhr new XMLHttpRequest();xhr.open("get&quo…...