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

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

news 2026/5/26 7:50:41

马上五一假期了，小伙伴们是不是都准备出去旅游呢，或者回老家陪陪父母。今天我用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小可爱亲吻表白特效，给你的五一假期增添点小乐趣

马上五一假期了&#xff0c;小伙伴们是不是都准备出去旅游呢&#xff0c;或者回老家陪陪父母。今天我用CSS3制作一个小可爱亲吻表白的特效&#xff0c;来给你即将到来的五一假期增添点小小的乐趣。 目录 实现思路 左边小可爱的实现 右边小可爱的实现 左右摇摆动效的实现 右…...

编程日记 2023/5/23 7:35:54

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]…...

编程日记 2023/5/29 15:41:09

Mac电脑 Vscode ： Flutter 开发环境搭建（最细节教程）

参考链接&#xff1a; MacVSCode安装flutter环境_mac vscode配置flutter_GalenWu的博客-CSDN博客 mac搭建Flutter环境以及初始化项目 - 简书 注意&#xff1a; *下载xcode 就包含git了, *苹果芯片和intel 芯片需要的环境不同&#xff0c;苹果芯片需要安装&#xff1a; Im…...

编程日记 2023/5/23 7:25:52

BEVFormer 论文学习

1. 解决了什么问题&#xff1f; 3D 视觉感知任务&#xff0c;包括基于多相机图像的 3D 目标检测和分割&#xff0c;对于自动驾驶系统非常重要。与基于 LiDAR 的方法相比&#xff0c;基于相机图像的方法能够检测到更远距离的目标&#xff0c;识别交通信号灯、交通标识等信息。有…...

编程日记 2023/5/23 7:20:51

现在的00后，实在是太卷了,我们这些老油条都想辞职了......

现在的小年轻真的卷得过分了。前段时间我们公司来了个00年的&#xff0c;工作没两年&#xff0c;跳槽到我们公司起薪20K&#xff0c;都快要超过我了。 后来才知道人家是个卷王&#xff0c;从早干到晚就差搬张床到工位睡觉了。 最近和他聊了一次天&#xff0c;原来这位小老弟家…...

编程日记 2023/5/23 7:15:51

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_…...

编程日记 2023/5/30 0:21:19

24 KVM管理虚拟机-配置VNC-TLS登录

文章目录 24 KVM管理虚拟机-配置VNC-TLS登录24.1 概述24.2 操作步骤 24 KVM管理虚拟机-配置VNC-TLS登录 24.1 概述 VNC服务端和客户端默认采用明文方式进行数据传输&#xff0c;因此通信内容可能被第三方截获。为了提升安全性&#xff0c;openEuler支持VNC服务端配置TLS模式进…...

编程日记 2023/5/31 6:56:33

C++基础讲解第六期（多态、虚函数、虚析构函数、dynamic_cast、typeid纯虚函数）

C基础讲解第六期 代码中也有对应知识注释&#xff0c;别忘看&#xff0c;一起学习&#xff01; 一、多态1. 问题引出2. 多态的概念和使用3. 多态的原理4. 虚析构函数5. 动态类型识别(dynamic_cast)(1) 自定义类型(2). dynamic_cast(3). typeid 6. 纯虚函数 纯虚函数需要补充 一…...

编程日记 2023/5/23 7:00:47

防火墙之iptables（二）

防火墙之iptables&#xff08;二&#xff09; 一.SNAT原理与应用 1.应用环境 局域网主机共享单个公网IP地址接入Internet&#xff08;私网不能被Internet中正常路由&#xff09;2.SNAT原理 修改数据包的源地址内网访问外网 将从内网发送到外网的数据包的源IP由私网IP转换成…...

编程日记 2023/5/29 15:42:47

亚马逊销量暴跌该如何查找原因?

很多卖家经常遇到一个棘手的问题&#xff0c;就是突然会遇到链接销量暴跌的问题。 比如之前链接可以稳定出单10多单的&#xff0c;突然连续几天只有两三单&#xff0c;这到底是什么原因呢? 1.查看链接的类目是否被修改 这个类目修改不一定是卖家自己修改&#xff0c;更多的时…...

编程日记 2023/5/29 15:44:04

Vue中的脚手架和路由

私人博客 许小墨のBlog —— 菜鸡博客直通车 系列文章完整版&#xff0c;配图更多&#xff0c;CSDN博文图片需要手动上传&#xff0c;因此文章配图较少&#xff0c;看不懂的可以去菜鸡博客参考一下配图&#xff01; 系列文章目录 前端系列文章——传送门 后端系列文章——传送…...

编程日记 2023/5/23 6:45:39

Convolutional Neural network(卷积神经网络)

目录 Why CNN for Image&#xff1f; The whole CNN structure Convolution&#xff08;卷积&#xff09; Max Pooling Flatten CNN in Keras What does CNN learn&#xff1f; what does filter do what does neuron do what about output Deep Dream Application Pla…...

编程日记 2023/5/23 6:40:38

【资料分享】高边、低边晶体管开关及电路解析

高边和低边晶体管开关 电路中&#xff0c;晶体管常常被用来当做开关使用。晶体管用作开关时有两种不同的接线方式&#xff1a;高边&#xff08;high side&#xff09;和低边(low side)。 高边和低边是由晶体管在电路中的位置决定的。晶体管可以是双极性晶体管&#xff08;BJT…...

编程日记 2023/5/30 14:12:42

六级备考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…...

编程日记 2023/5/23 6:30:36

计算机图形学 | 实验九：纹理贴图和天空盒

计算机图形学 | 实验九&#xff1a;纹理贴图和天空盒 计算机图形学 | 实验九&#xff1a;纹理贴图和天空盒实验概述顶点数据立方体顶点数据天空盒顶点数组 纹理载入创建纹理纹理读取纹理绑定 使用纹理立方体着色器顶点着色器片元着色器 天空盒着色器顶点着色器片元着色器 立方体…...

编程日记 2023/5/30 14:14:13

Unity A* Pathfinding Project

先下载免费版 https://arongranberg.com/astar/download# 教程首页 https://arongranberg.com/astar/docs/getstarted.html 创建一个plane 当地面 创建一个gameobject 添加组件 PathFinder 长这样 调整每个格子大小的 创建两个layer 一个是阻挡物的 一个是地面的 这里填入阻…...

编程日记 2023/5/31 23:12:34

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 : 组织…...

编程日记 2023/5/23 6:15:32

idea中关联Git

注意&#xff1a;未安装和配置Git软件&#xff0c;请先跳转到 Git宝典_没办法&#xff0c;我就是这么菜的博客-CSDN博客 idea关联git 关联git.exe 选择你的Version Control 下的Git 选择你的Git安装目录bin下的git.exe&#xff0c;点击ok 点击Test&#xff0c;显示版本号…...

编程日记 2023/5/23 6:10:31

Java面试知识点(全)-分布式微服务-zookeeper面试知识点

Java面试知识点(全) 导航&#xff1a; https://nanxiang.blog.csdn.net/article/details/130640392 注&#xff1a;随时更新 ZooKeeper是什么&#xff1f; ZooKeeper是一个分布式的&#xff0c;开放源码的分布式应用程序协调服务&#xff0c;是Google的Chubby一个开源的实现&…...

编程日记 2023/5/23 6:05:30

（IDEA）springCloud项目导入本地jar包方法和项目打包时找不到引入本地jar包的问题解决方案

idea导入本地jar包 方法一:点击左上角File–>Project Structure–>Modules。打开Modules界面点击下方号&#xff0c;选择第一项&#xff0c;找到想要导入的本地jar包。此方法可以使项目使用导入的jar包程序不报错&#xff0c;但是在打包项目时&#xff0c;会出现找不到程…...

编程日记 2023/5/23 6:00:28

AMLP：基于大语言模型的自动化机器学习势函数构建平台

1. 项目概述&#xff1a;当AI遇见原子模拟&#xff0c;AMLP如何重塑机器学习势函数构建在计算材料科学和化学物理领域&#xff0c;分子动力学模拟是我们窥探微观世界动态行为的“显微镜”。无论是研究新材料的相变过程&#xff0c;还是探索生物大分子的折叠机制&#xff0c;其核…...

编程新知 2026/5/26 3:20:00

Hitboxer：开源SOCD清理工具，3分钟提升游戏操作精准度

Hitboxer&#xff1a;开源SOCD清理工具&#xff0c;3分钟提升游戏操作精准度 【免费下载链接】socd Key remapper for epic gamers 项目地址: https://gitcode.com/gh_mirrors/so/socd 你是否在激烈的游戏对抗中经历过这样的挫败&#xff1a;同时按下左右方向键时角色卡…...

编程新知 2026/5/26 3:07:53

Postgresql基础实践教程（九）

⭐️⭐️⭐️⭐️⭐️ 完整数据详见 练习数据免费 ⭐️⭐️⭐️⭐️⭐️ 七十二、WITH查询&#xff08;公用表表达式CTE&#xff09; 1. SELECT 中的 WITH 2. 递归查询 3. 公用表表达式的物化 4. WITH中的数据修改语句 WITH提供了一种在主查询中写辅助语句的方法。这些语…...

编程新知 2026/5/25 22:50:43

基于PIC32的嵌入式MIDI合成器：从波表合成到硬件实现

1. 项目概述&#xff1a;一个基于嵌入式微控制器的MIDI声音合成器如果你对电子音乐制作、嵌入式开发&#xff0c;或者DIY硬件合成器感兴趣&#xff0c;那么“REMI Synth”这个项目绝对值得你花时间深入了解。它本质上是一个数字单音MIDI控制的声音合成器&#xff0c;核心是一块…...

编程新知 2026/5/25 21:39:58

claude code用户如何迁移到taotoken解决封号与token不足问题

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 Claude Code 用户如何迁移到 Taotoken 解决封号与 Token 不足问题 应用场景类&#xff0c;针对 Claude Code 用户常遇封号与 Token…...

编程新知 2026/5/25 19:29:59

如何通过Joy-Con Toolkit实现专业级Switch手柄控制与硬件逆向工程

如何通过Joy-Con Toolkit实现专业级Switch手柄控制与硬件逆向工程 【免费下载链接】jc_toolkit Joy-Con Toolkit 项目地址: https://gitcode.com/gh_mirrors/jc/jc_toolkit 在游戏开发、硬件调试和嵌入式系统研究中&#xff0c;与游戏手柄等专业输入设备进行深度交互一直…...

编程新知 2026/5/25 18:51:09

Lovable电商网站搭建：如何用不到3人技术团队，72小时内上线PCI-DSS合规MVP版本？

更多请点击&#xff1a; https://codechina.net 第一章&#xff1a;Lovable电商网站搭建 Lovable 是一个面向中小商户的轻量级电商解决方案&#xff0c;采用现代 Web 技术栈构建&#xff0c;强调可扩展性、用户体验与快速部署能力。本章将指导你从零开始搭建一个具备商品展示、…...

编程新知 2026/5/25 18:08:09

Claude Code用户告别封号与Token焦虑，无缝切换至Taotoken平台

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 Claude Code用户告别封号与Token焦虑&#xff0c;无缝切换至Taotoken平台 对于依赖Claude Code进行编程辅助的开发者而言&#xff…...

编程新知 2026/5/25 17:32:27

GEP协议深度解读：AI智能体自我进化的基因工程

OpenAI 官宣全面支持MCP协议，标志着AI应用架构的"连接标准"已定。如果说MCP是AI时代的USB-C，解决了模型与工具的连接问题，那么GEP（Genome Evolution Protocol，基因组进化协议）则正在解决另一个更本质的问题——智能体的自我进化与生命周期管理。 作为下一代AI基…...

编程新知 2026/5/25 17:30:24

告别繁琐审核！实测AI Agent如何重塑复杂非结构化票据与合同处理流程？

摘要&#xff1a;在企业数字化转型步入深水区的2026年&#xff0c;处理复杂非结构化票据与合同已成为横亘在财务、法务部门面前的“最后一公里”难题。传统RPA因UI变动易崩溃、主流智能体因缺乏API适配而无法落地&#xff0c;导致大量业务仍依赖低效的人工操作。本文由「企服AI…...

编程新知 2026/5/25 16:06:36