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

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

news 2026/2/9 1:04:18

马上五一假期了，小伙伴们是不是都准备出去旅游呢，或者回老家陪陪父母。今天我用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

SCAU期末笔记 - 数据分析与数据挖掘题库解析

这门怎么题库答案不全啊日 来简单学一下子来 一、选择题&#xff08;可多选&#xff09; 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘&#xff1a;专注于发现数据中…...

编程新知 2026/1/24 14:15:43

根据万维钢·精英日课6的内容，使用AI（2025）可以参考以下方法：

根据万维钢精英日课6的内容&#xff0c;使用AI&#xff08;2025&#xff09;可以参考以下方法&#xff1a; 四个洞见 模型已经比人聪明&#xff1a;以ChatGPT o3为代表的AI非常强大&#xff0c;能运用高级理论解释道理、引用最新学术论文&#xff0c;生成对顶尖科学家都有用的…...

编程新知 2026/1/10 1:08:51

Spring数据访问模块设计

前面我们已经完成了IoC和web模块的设计&#xff0c;聪明的码友立马就知道了&#xff0c;该到数据访问模块了&#xff0c;要不就这俩玩个6啊&#xff0c;查库势在必行&#xff0c;至此&#xff0c;它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据&#xff08;数据库、No…...

编程新知 2026/2/4 16:13:50

2023赣州旅游投资集团

单选题 1.“不登高山&#xff0c;不知天之高也&#xff1b;不临深溪&#xff0c;不知地之厚也。”这句话说明_____。 A、人的意识具有创造性 B、人的认识是独立于实践之外的 C、实践在认识过程中具有决定作用 D、人的一切知识都是从直接经验中获得的 参考答案: C 本题解…...

编程新知 2025/11/8 16:42:13

安宝特案例丨Vuzix AR智能眼镜集成专业软件，助力卢森堡医院药房转型，赢得辉瑞创新奖

在Vuzix M400 AR智能眼镜的助力下&#xff0c;卢森堡罗伯特舒曼医院&#xff08;the Robert Schuman Hospitals, HRS&#xff09;凭借在无菌制剂生产流程中引入增强现实技术&#xff08;AR&#xff09;创新项目&#xff0c;荣获了2024年6月7日由卢森堡医院药剂师协会&#xff0…...

编程新知 2026/1/24 13:01:05

力扣热题100 k个一组反转链表题解

题目: 代码: func reverseKGroup(head *ListNode, k int) *ListNode {cur : headfor i : 0; i < k; i {if cur nil {return head}cur cur.Next}newHead : reverse(head, cur)head.Next reverseKGroup(cur, k)return newHead }func reverse(start, end *ListNode) *ListN…...

编程新知 2026/1/31 8:25:07

怎么让Comfyui导出的图像不包含工作流信息，

为了数据安全&#xff0c;让Comfyui导出的图像不包含工作流信息&#xff0c;导出的图像就不会拖到comfyui中加载出来工作流。 ComfyUI的目录下node.py 直接移除 pnginfo&#xff08;推荐&#xff09;​​ 在 save_images 方法中&#xff0c;​​删除或注释掉所有与 metadata …...

编程新知 2025/8/13 15:12:54

0x-3-Oracle 23 ai-sqlcl 25.1 集成安装-配置和优化

是不是受够了安装了oracle database之后sqlplus的简陋&#xff0c;无法删除无法上下翻页的苦恼。 可以安装readline和rlwrap插件的话&#xff0c;配置.bahs_profile后也能解决上下翻页这些&#xff0c;但是很多生产环境无法安装rpm包。 oracle提供了sqlcl免费许可&#xff0c…...

编程新知 2025/11/27 2:47:09

xmind转换为markdown

文章目录 解锁思维导图新姿势&#xff1a;将XMind转为结构化Markdown 一、认识Xmind结构二、核心转换流程详解1.解压XMind文件&#xff08;ZIP处理&#xff09;2.解析JSON数据结构3&#xff1a;递归转换树形结构4&#xff1a;Markdown层级生成逻辑 三、完整代码 解锁思维导图新…...

编程新知 2025/12/15 17:19:38

Android写一个捕获全局异常的工具类

项目开发和实际运行过程中难免会遇到异常发生&#xff0c;系统提供了一个可以捕获全局异常的工具Uncaughtexceptionhandler&#xff0c;它是Thread的子类&#xff08;就是package java.lang;里线程的Thread&#xff09;。本文将利用它将设备信息、报错信息以及错误的发生时间都…...

编程新知 2026/1/27 19:33:55