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

news2025/1/13 7:55:37

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

LeetCode43. 字符串相乘（Java解法）

LeetCode43. 字符串相乘（Java解法）

0 题目描述 给定两个以字符串形式表示的非负整数 num1 和 num2&#xff0c;返回 num1 和 num2 的乘积&#xff0c;它们的乘积也表示为字符串形式。 注意&#xff1a;不能使用任何内置的 BigInteger 库或直接将输入转换为整数。 示例 1: 输入: num1 “2”, num2 “3” 输出…
阅读更多...
【三十天精通 Vue 3】 专栏内容介绍

【三十天精通 Vue 3】 专栏内容介绍

在这个专栏中&#xff0c;我们将带你深入了解 Vue 3 的各个方面。首先&#xff0c;我们将带你了解 Vue 3 的新特性和改进&#xff0c;包括 Composition API、Provide/Use Case、Vuex 3 等。然后&#xff0c;我们将详细介绍 Vue 3 的组件化开发、路由、状态管理等方面的内容。 …
阅读更多...
LineSegmentIntersector::Intersections中ratio含义及LineSegmentIntersector相交点说明

LineSegmentIntersector::Intersections中ratio含义及LineSegmentIntersector相交点说明

osg用osgUtil库中的LineSegmentIntersector、IntersectionVisitor类来求线段和三维模型的交点 如下代码&#xff1a; #include <QtCore/QCoreApplication> #include <osgViewer/Viewer> #include <osgViewer/ViewerEventHandlers> #include <osgViewer…
阅读更多...
Duboo介绍与入门

Duboo介绍与入门

文章目录 1、Dubbo的前世今生2、Dubbo的快速入门2.1、Dubbo的基本架构2.2、Nacos2.3、管理后台2.4、入门案例2.4.1、服务提供者搭建环境代码实现配置文件 2.4.2、服务消费者搭建环境代码实现配置文件 最后说一句 1、Dubbo的前世今生 2011年10月27日&#xff0c;阿里巴巴开源了…
阅读更多...
Vue项目解决跨域问题

Vue项目解决跨域问题

跨域&#xff08;Cross-Origin&#xff09;是指在浏览器中运行的 JavaScript 代码试图访问不同源的资源时所遇到的一类限制问题。不同源是指协议&#xff08;http、https&#xff09;、域名&#xff08;example.com、google.com&#xff09;、端口号&#xff08;80、8080&#…
阅读更多...
双时间维度，你的时间管理大师丨三叠云

双时间维度，你的时间管理大师丨三叠云

双时间维度 路径 表单 >> 表单设计 功能简介 「甘特图视图」新增 双时间维度设置 的配置项。 为了解决日常任务管理中对于“计划时间”维度的时间设置问题&#xff0c;【时间设置】项增加了【双时间维度设置】的配置项&#xff0c;用户开启后可以设置 计划开始时间 …
阅读更多...
Matlab 牛顿迭代法（1）牛顿法

Matlab 牛顿迭代法（1）牛顿法

一、牛顿迭代公式 1、定义 2、原理推导 泰勒公式&#xff1a; 常用的8个泰勒公式&#xff1a; 推导&#xff1a; 将f(x)f(x)在Xk 处的泰勒公式展开&#xff1a; f(x)f(Xk)f(Xk)(X-Xk) f(Xk)/2 *(x-Xk)^2.......... 我们吧线性的一部分先拿出来&#xff1a;f(x)f(Xk)f(X…
阅读更多...
【python知识】容器对象的推导式

【python知识】容器对象的推导式

一、说明 Python 推导式&#xff0c;是针对容器对象&#xff08;列表,字典&#xff0c;集合&#xff0c;元组&#xff09;的产生方式的语句。它可以从一个数据序列构建另一个新的数据序列的结构体。 Python 支持各种数据结构的推导式&#xff1a; 列表(list)推导式字典(dict)推…
阅读更多...
【Java|golang】1048. 最长字符串链

【Java|golang】1048. 最长字符串链

给出一个单词数组 words &#xff0c;其中每个单词都由小写英文字母组成。 如果我们可以 不改变其他字符的顺序 &#xff0c;在 wordA 的任何地方添加 恰好一个 字母使其变成 wordB &#xff0c;那么我们认为 wordA 是 wordB 的 前身 。 例如&#xff0c;“abc” 是 “abac”…
阅读更多...
拍卖小程序开发：从需求分析到设计实现

拍卖小程序开发：从需求分析到设计实现

在当今数字时代&#xff0c;拍卖小程序已经成为了一个重要的销售和交易工具。拍卖小程序的开发不仅能够提供高效的销售渠道&#xff0c;还能够为用户提供全新的购物体验。因此&#xff0c;开发一个拍卖小程序成为了许多商家的首要任务。 拍卖小程序的开发可以帮助商家拓展销售…
阅读更多...
uniapp打包

uniapp打包

niapp 的打包首先要先配置&#xff0c;配置好了才能去进行打包&#xff0c;如图所示。 这只是第一步。 注意&#xff1a; 1.运行基础路径最好用 ./ &#xff0c;如果配置了其他请自行添加路径。 2.由于uniapp 的特性&#xff0c;所以导致了不支持 history 模式&#xff0c;…
阅读更多...
第13届蓝桥杯国赛真题剖析-2022年5月29日Scratch编程初中级组

第13届蓝桥杯国赛真题剖析-2022年5月29日Scratch编程初中级组

[导读]&#xff1a;超平老师的《Scratch蓝桥杯真题解析100讲》已经全部完成&#xff0c;后续会不定期解读蓝桥杯真题&#xff0c;这是Scratch蓝桥杯真题解析第127讲。 第13届蓝桥杯Scratch国赛真题&#xff0c;这是2022年5月29日举办的全国总决赛&#xff0c;比赛仍然采取线上…
阅读更多...
三分钟教你看懂 spring 官方文档

三分钟教你看懂 spring 官方文档

新手如何学会查看官方文档API 首先进入官网&#xff1a;这里以 spring boot 为例 &#xff0c;进入spring 官方地址 我们进入 spring boot 这里我们要看文档当然是要 learn 了&#xff0c;所以点进去。 我需要的东西在 IO 模块里面&#xff0c;点 IO 进入 发送邮件是不是有了…
阅读更多...
python+nodejs+php+springboot+vue 高校大学生创业管理系统

python+nodejs+php+springboot+vue 高校大学生创业管理系统

本论文主要论述了如何使用java语言开发一个高校创新创业管理系统&#xff0c;本系统将严格按照软件开发流程进行各个阶段的工作&#xff0c;面向对象编程思想进行项目开发。在引言中&#xff0c;将论述高校创新创业管理系统的当前背景以及系统开发的目的&#xff0c;后续章节将…
阅读更多...
node注册和登录你真的清楚了吗？

node注册和登录你真的清楚了吗？

文章目录 1.创建数据表1.1 创建用户表 2安装并配置mysql文件2.1安装mysql模块2.2 在db index中 3.注册功能3.1检测表单数据合法3.2判断用户占用3.3 密码加密3.4 插入用户封装错误处理函数 4.登录功能4.1 登录密码的判断4.2 生成token字符4.3 解析token中间件 1.创建数据表 1.1…
阅读更多...
AD9208子卡设计资料： 2 路 2.6GSPS/3GSPS AD 采集、2 路 12.6G DA 回放、高性能时钟发生器HMC7044 -FMC 子卡模块

AD9208子卡设计资料： 2 路 2.6GSPS/3GSPS AD 采集、2 路 12.6G DA 回放、高性能时钟发生器HMC7044 -FMC 子卡模块

板卡概述 FMC123 是一款基于 FMC 标准规范&#xff0c;实现 2 路 14-bit、3GSPSADC 采集功能、2 路 16-bit 12.6GSPS 回放子卡模块。该模块遵循 VITA57.1 标准&#xff0c;可直接与 FPGA 载卡配合使用&#xff0c;板卡 ADC 器件采用 ADI 公司的 AD9208 芯片&#xff0c;&…
阅读更多...
如何在Linkedin领英上找客户

如何在Linkedin领英上找客户

LinkedIn是很多想要获客的朋友&#xff0c;不错的选择&#xff0c;它是一家全球职业社交平台&#xff0c;目前全球会员人数已达6亿之多。在领英&#xff0c;我们可以轻松打造职业形象、获取商业洞察、拓展职业人脉并发现更多职业机遇。 Linkedin主要的作用有以下四点 &#xf…
阅读更多...
API 文档管理得这么玩，才会效率加倍

API 文档管理得这么玩，才会效率加倍

随着互联网的迅速发展&#xff0c;越来越多的企业和开发者开始采用 API 接口作为数据交换和服务调用的标准方式。为了保证API接口的可靠性、稳定性和可维护性&#xff0c;API 文档管理变得愈发重要。 API 文档管理的重要性 API 文档管理是指在开发过程中&#xff0c;对API接口…
阅读更多...
Seurat -- ScaleData学习

Seurat -- ScaleData学习

brief seurat提供了一个教学&#xff0c;其中global scale normalization之后又对数据进行了scale。 默认是对上一步 selected highly variable features进行scale。 概要图以及系列博文可以参见链接。 如果是 SCTransform则不需要手动运行这一步。 下面是就是教程提供的流程…
阅读更多...
为什么软件iic需要用开漏输出和上拉电阻

为什么软件iic需要用开漏输出和上拉电阻

1、疑惑&#xff1a; 不知道大家有没有这种疑惑&#xff0c;在软件iic的配置过程当中&#xff0c;有些时候要输出高低电平&#xff0c;为什么使用开漏输出而不是推挽输出&#xff1f; 2.推挽输出和开漏输出的区别 推挽输出: 输出逻辑0&#xff0c;则N-MOS激活&#xff1b;输…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023