表白装用小可爱，css样式

最新推荐文章于 2024-10-28 10:00:00 发布
最新推荐文章于 2024-10-28 10:00:00 发布
阅读量266 收藏
点赞数 2
CC 4.0 BY-SA版权
文章标签： html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/lsq_com/article/details/113835269
这个博客分享了一段纯CSS代码，用于创建一个动态的精灵示爱动画和一个鬼魂飘浮的浪漫效果。动画包括一个可爱的表情蛋，带有眨眼的眼睛、微笑和脸颊红晕，以及心跳和阴影效果，同时还有一个透明的幽灵形象，同样具备表情。代码详细定义了各个元素的样式和动画，适合前端开发者用于创作趣味互动效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!DOCTYPE html>
<html lang="en" >

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,user-scalable=no,minimal-ui">
<title>纯CSS实现动态精灵示爱浪漫动画特效代码</title>
<meta name="keywords" content="纯CSS,动态精灵,示爱,浪漫动画,特效代码" />
<meta name="description" content="纯CSS实现动态精灵示爱浪漫动画特效代码下载。" /> 
<meta name="author" content="php中文网(www.php.cn)" />
<meta name="copyright" content="php中文网(www.php.cn)" />



<link rel="stylesheet" href="css/style.css">


</head>

<body>

  
<div class="container">
  <div class="egg">
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <div class="face">
        <div class="eyes"></div>
        <div class="smile"></div>
        <div class="cheeks"></div>
        <div class="shine"></div>
      </div>
    </ul>
  </div>
  <div class="shadow" id="egg-shadow"></div>
  <div class="heart">
    <div class="light"></div>
  </div>
  <div class="ghost">
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <div class="face">
      <div class="eyes"></div>
      <div class="smile"></div>
      <div class="cheeks"></div>
    </div>
  </div>
  <div class="shadow" id="ghost-shadow"></div>
</div>
  


</body>

</html>


@import url("https://fonts.googleapis.com/css?family=Josefin+Sans:300");
body {
  background: #48befe;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 12px;
}

.container {
  position: absolute;
  white-space: nowrap;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

ul {
  margin: 0;
  padding: 0;
}
ul li {
  list-style: none;
}

.egg {
  width: 175px;
  height: 220px;
  border-radius: 100px 100px 0px 0px;
  background: #fdfeff;
  position: relative;
  display: inline-block;
  animation: floating 5s ease-out infinite;
  left: -5%;
}
.egg .face {
  width: 130px;
  height: 130px;
  background: #ffdb10;
  position: absolute;
  margin: 15% 15%;
  border-radius: 100%;
  box-shadow: inset -10px 1px 0 #ffcc24;
}
.egg .face .eyes {
  width: 15px;
  height: 15px;
  background: #000;
  border-radius: 100%;
  position: relative;
  top: 55px;
  left: 38px;
  animation: blink 3s infinite 2s;
}
.egg .face .eyes::after {
  content: "";
  width: 15px;
  height: 15px;
  position: absolute;
  background: #000;
  border-radius: 100%;
  left: 50px;
}
.egg .face .smile {
  position: relative;
  border-bottom-left-radius: 90px;
  border-bottom-right-radius: 90px;
  width: 30px;
  height: 15px;
  background: #000;
  left: 55px;
  top: 60px;
}
.egg .face .smile::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 5px;
  background: #ff7e7e;
  border-radius: 100%;
  left: 10px;
  top: 8px;
}
.egg .face .cheeks {
  position: relative;
  width: 12px;
  height: 12px;
  background: #ff7e7e;
  border-radius: 100%;
  opacity: 0.5;
  top: 40px;
  left: 30px;
}
.egg .face .cheeks::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  background: #ff7e7e;
  border-radius: 100%;
  left: 67px;
}
.egg .face .shine {
  position: relative;
  width: 8px;
  height: 20px;
  background: #fdfeff;
  border-radius: 200px;
  top: -10px;
  left: 12px;
  transform: rotate(20deg);
}
.egg .face .shine::after {
  position: absolute;
  content: "";
  width: 8px;
  height: 8px;
  background: #fdfeff;
  border-radius: 200px;
  top: -15px;
  left: 6px;
}
.egg ul {
  display: flex;
}
.egg li {
  position: relative;
  border-radius: 200px;
}
.egg li:nth-child(odd) {
  background: #fdfeff;
}
.egg li:nth-child(even) {
  background: #48befe;
}
.egg li:nth-child(1) {
  width: 30px;
  height: 60px;
  top: 175px;
  animation: anim1 1.5s ease-out infinite;
}
.egg li:nth-child(2) {
  width: 20px;
  height: 50px;
  top: 185px;
  animation: anim2 3s ease-out infinite;
}
.egg li:nth-child(3) {
  width: 28.5px;
  height: 60px;
  top: 195px;
  animation: anim3 1s ease-in-out infinite;
}
.egg li:nth-child(4) {
  width: 20px;
  height: 50px;
  top: 210px;
  animation: anim4 2.2s ease-out infinite;
}
.egg li:nth-child(5) {
  width: 28.5px;
  height: 60px;
  top: 190px;
  animation: anim3 1.5s ease-out infinite;
}
.egg li:nth-child(6) {
  width: 20px;
  height: 60px;
  top: 200px;
  animation: anim2 4s ease-out infinite;
}
.egg li:nth-child(7) {
  width: 28.5px;
  height: 60px;
  top: 190px;
  animation: anim1 1.5s ease-out infinite;
}

.ghost {
  width: 175px;
  height: 220px;
  border-radius: 100px 100px 0px 0px;
  background: #fdfeff;
  position: relative;
  display: inline-block;
  animation: floating 2s ease-out infinite;
  opacity: 0.75;
  left: 5%;
}
.ghost::before {
  content: "";
  width: 175px;
  height: 220px;
  border-radius: 100px 100px 0px 0px;
  background: #fdfeff;
  position: relative;
  display: inline-block;
  position: absolute;
  box-shadow: inset -15px 1px 0px #efefef;
}
.ghost .face {
  width: 130px;
  height: 130px;
  background: transparent;
  position: absolute;
  margin: -20% 10%;
  border-radius: 100%;
}
.ghost .face .eyes {
  opacity: 0.5;
  width: 15px;
  height: 15px;
  background: #000;
  border-radius: 100%;
  position: relative;
  top: 55px;
  left: 3px;
  animation: blink 5s infinite;
}
.ghost .face .eyes::after {
  content: "";
  width: 15px;
  height: 15px;
  position: absolute;
  background: #000;
  border-radius: 100%;
  left: 50px;
}
.ghost .face .smile {
  position: relative;
  opacity: 0.5;
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
  width: 10px;
  height: 6px;
  background: transparent;
  border: 5px solid #000;
  left: 25px;
  top: 55px;
}
.ghost .face .smile::before {
  background: #fdfeff;
  width: 30px;
  height: 7px;
  content: "";
  position: absolute;
  left: -10px;
  top: -5.5px;
}
.ghost .face .cheeks {
  position: relative;
  width: 12px;
  height: 12px;
  background: #ff7e7e;
  border-radius: 100%;
  opacity: 0.5;
  top: 43px;
  left: -4px;
}
.ghost .face .cheeks::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  background: #ff7e7e;
  border-radius: 100%;
  left: 67px;
}
.ghost ul {
  display: flex;
}
.ghost li {
  position: relative;
  border-radius: 200px;
  height: 60px;
}
.ghost li:nth-child(odd) {
  background: #fdfeff;
  width: 30px;
  top: 172px;
  z-index: -1;
}
.ghost li:nth-child(even) {
  background: #48befe;
  width: 7px;
  top: 215px;
}
.ghost li:nth-child(1) {
  animation: ghostani 3s ease-out infinite;
}
.ghost li:nth-child(3) {
  animation: ghostani 3s ease-out infinite 0.5s;
}
.ghost li:nth-child(5) {
  animation: ghostani 3s ease-out infinite 1.0s;
}
.ghost li:nth-child(7) {
  animation: ghostani 3s ease-out infinite 1.5s;
}
.ghost li:nth-child(9) {
  box-shadow: inset -15px 4px #efefef;
  animation: ghostani 3s ease-out infinite 2s;
}

.heart {
  position: absolute;
  display: inline-block;
  width: 30px;
  height: 30px;
  background: red;
  left: 45%;
  transform: rotate(45deg);
  animation: beat 0.7s linear infinite;
}
.heart::before, .heart::after {
  position: absolute;
  content: "";
  width: 30px;
  height: 30px;
  background: red;
  border-radius: 100%;
  top: -50%;
  animation: beat 0.7s linear infinite;
}
.heart::after {
  top: 0%;
  left: -50%;
}
.heart .light {
  width: 5px;
  height: 12px;
  background: white;
  position: absolute;
  border-radius: 200px;
  z-index: 3;
  left: -11px;
  top: 13px;
  transform: rotate(-10deg);
  animation: lightshift 0.7s linear infinite;
}
.heart .light::after {
  content: "";
  position: absolute;
  z-index: 3;
  width: 5px;
  height: 5px;
  background: white;
  border-radius: 200px;
  top: -5px;
  left: 1.5px;
}

.shadow {
  position: absolute;
  opacity: 0.2;
  width: 180px;
  height: 15px;
  background: #000;
  top: 275px;
  border-radius: 100%;
}

.shadow#egg-shadow {
  left: -20px;
  animation: shadow-ani 5s ease-out infinite;
}

.shadow#ghost-shadow {
  left: 195px;
  transform-origin: center;
  animation: shadow-ani 2s ease-out infinite;
}

@keyframes shadow-ani {
  50% {
    width: 170px;
    height: 10px;
  }
}
@keyframes blink {
  0% {
    transform: scaleY(1);
  }
  18% {
    transform: scaleY(1);
  }
  20% {
    transform: scaleY(0);
  }
  25% {
    transform: scaleY(1);
  }
  38% {
    transform: scaleY(1);
  }
  40% {
    transform: scaleY(0);
  }
  45% {
    transform: scaleY(1);
  }
  80% {
    transform: scaleY(1);
  }
}
@keyframes beat {
  20%,
  40% {
    height: 40px;
    width: 40px;
  }
}
@keyframes lightshift {
  20%,
  40% {
    left: -15px;
  }
}
@keyframes floating {
  0% {
    top: 0;
  }
  50% {
    top: -10px;
  }
  100% {
    top: 0;
  }
}
@keyframes anim1 {
  50% {
    top: 180px;
  }
}
@keyframes anim2 {
  50% {
    top: 178px;
  }
}
@keyframes anim3 {
  50% {
    top: 205px;
  }
}
@keyframes anim4 {
  50% {
    top: 205px;
  }
}
@keyframes ghostani {
  50% {
    top: 180px;
  }
}

祝各位朋友表白成功

MR.Q@
关注
表白的css,Css3爱心告白
weixin_34014076的博客
08-04 399
body {overflow:hidden;}div {width:100px;height:100px;background:#E88D8D;position:absolute;top:50vh;left:50vw;margin-left:-50px;transform:rotate(45deg);border-radius:20px;transition:all ease 1s;}div::...
css 跳动的心_如何用纯CSS为您的情人打造一颗跳动的心
cumi7754的博客
08-04 252
css 跳动的心Each year on February 14th, many people exchange cards, candies, gifts or flowers with their special “valentine”. The day of romance we call Valentine’s Day is named for a Christian martyr and...
程序员的浪漫教你表白——用纯css绘制爱心
weixin_45846805的博客
04-20 1002
分享一篇娱乐博客,最为程序员每天与枯燥的代码打交道其实我们也可以浪漫。 代码核心是利用 ::before ::after 这两个CSS伪类来辅助画爱心的两个半圆。以及@keyframes使用规则 @keyframes标签定义及使用说明 使用@keyframes规则，你可以创建动画。 创建动画是通过逐步改变从一个CSS样式设定到另一个。 在动画过程中，您可以更改CSS样式的设定多次。 指定的变化时发...
使用css3实现一个超浪漫的新年倒计时
xingyu_qie的专栏
12-21 4259
希望伴随着倒计时，2022年一切的不如意都早点烟消云散，但不管未来的2023年会怎么样，我们也应该勇敢的冲上去，哪怕失败了，至少我们冲过。
HTML & CSS 编织的浪漫表白代码
最新发布
weixin_52814911的博客
10-28 2132
这段代码是一个使用 HTML、CSS 和 JavaScript 实现的网页，主要功能是在页面上展示一个动态的心形图案，由许多粒子组成。
CSS技巧专栏：一日一例 10 -纯CSS实现表爱心的小可爱按钮特效
uu0216的博客
07-22 853
这个按钮的常态效果有一个 为爱发电一样的光影扩散的效果，这个效果我考虑可以使用 动画 + 阴影 实现。当鼠标移到按钮上，两边突然滑出两个翅膀和翅膀上一样可爱的闪动的表白文字，这个可以使用before和after两个伪元素来实现。
纯CSS3汤圆亲吻表白特效
07-24
在IT行业中，CSS3是一种强大的样式表语言，用于定义网页元素的布局、颜色、字体等视觉效果。在本案例中，"纯CSS3汤圆亲吻表白特效"是一个利用CSS3技术实现的浪漫且趣味盎然的动画效果，旨在为情侣间的表白增添独特的...
卡通爱情表白CSS3特效.zip
10-10
在压缩包中的"jiaoben7397"可能是代码文件或示例文件的名称，具体内容可能包括HTML结构、CSS样式和jQuery脚本。要深入学习和利用这个特效，你需要解压文件并查看源代码，理解各个部分是如何协同工作的。同时，如果你...
CSS3 SVG猫和狗表白动画特效
06-24
在本文中，我们将深入探讨如何使用CSS3和SVG技术创建一款可爱的“猫和狗表白动画特效”。CSS3（层叠样式表第三版）是用于描述HTML或XML（包括SVG、MathML等各种XML方言）文档样式的语言，而SVG（可缩放矢量图形）是...
情人节程序员用HTML网页表白【全屏的大雪飘落3D动效】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
而风不止
12-29 388
这是程序员表白系列中的100款网站表白之一，旨在让任何人都能使用并创建自己的表白网站给心爱的人看。 此波共有100个表白网站，可以任意修改和使用，很多人会希望向心爱的男孩女孩告白，生性腼腆的人即使那个TA站在眼前都不敢向前表白。说不出口的话就用短视频告诉TA吧~制作一个表白网页告诉TA你的心意,演示如下。 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例】 文章目录一、网页介绍一、网页效果二、
HTML5+css3网页浪漫表白女神
10-29
HTML5+css3网页浪漫表白女神,有教程，可将图片修改自己与女神的。爱情都是从告白开始的，祝你好运！
浪漫的CSS3文字组合成心形动画特效
06-11
这是一款浪漫的CSS3文字组合成心形动画特效，可用于表白使用的文字旋转心形动画代码。
html5+css3 js特效，表白神器
12-10
看程序员是如何表白的，烂漫的js特效，然你心爱的他（她），看看你内心狂热的一面吧
html动态爱心代码【四】(附源码)
weixin_74268571的博客
08-22 1万+
内含完整源码，动态效果，利用画布动态画出，可用编译器，也可记事本开发，简单实用
HTML5七夕情人节表白网页制作【粉色樱花雨3D相册】HTML+CSS+JavaScript
热门推荐
HTML网页设计
07-21 1万+
1 网页简介：基于 ,快来制作一款高端的表白网页送(他/她)浪漫的告白,制作修改简单,可自行更换背景音乐,文字和图片即可使用2.网页编辑：任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。代码如下（示例）：以下仅展示部分代码供参考~ 2.CSS代码 三、精彩专栏推荐： 看到这里了就 【点赞，好评，收藏】 三连 支持下吧，你的支持是我创作的动力。HTM
html情侣表白代码，自动打字、动态爱心、图片旋转木马特效
玖疯子
12-05 8844
给男朋友准备的520礼物，他觉得太尴尬了，于是我特地把这个项目开源，让大家一起感受一下男票的尴尬，哈哈哈哈哈哈我好恶趣味。话不多说上代码html部分： ： 二、图片旋转木马特效html部分： 三、雪花特效html部分： 这个部分可以需要在images文件夹里插入雪花图片，图片如下自取（纯白图片）： 除此之外还推荐大家在网页里插入audio标签音频作为bgm，这样的表白代码就更有氛围感了。ps:部分代码非原创，侵删。
利用CSS实现爱心跳动案例--浪漫爱心表白
xu_yuxuyu的博客
11-29 5352
CSS实现爱心跳动原理：具体步骤： 先让大家看看心动的感觉吧： 不是吧，不是吧，如此浪漫的爱心表白竟然用CSS就可以完成。是的，你没有听错！接下来小编带大家制作爱心表白： 原理： 利用两个长方形的盒子，让其使用定位或浮动等属性改变其位置，在经过平移、旋转等变形效果后，再使用圆角属性，此时爱心的形状即可完成，然后再结合动画属性最终实现爱心跳动。 具体步骤： 首先我们准备一个大盒子包裹着，在大盒子里准备两个小盒子通过变形属性使其变成爱心； 2.通过定位或者浮动属性使两个盒子重叠在一起 因为两个盒子是
html css浪漫页面,程序员的浪漫表白代码（JS+CSS+HTML）附带源码
weixin_34374684的博客
06-03 7215
以下是html代码：寒姨我爱你--帝王组仁希告白源码本页面采用HTML5编辑，目前您的浏览器无法显示，请换成谷歌(Chrome)或者火狐(Firefox)浏览器，或者其他游览器的最新版本。 亲爱的小寒寒，我爱你，虽然你看不见我对你的告白 我知道我不会甜言蜜语，但是我会用行动证明一切你说我啰嗦，有些东西因为越在乎所以越失去因为我太爱你了，所以我失去你了因为我太啰嗦了，所以你离开了我虽然你看不见...
程序员的浪漫——用纯CSS画爱心
EJoft的博客
01-02 690
本篇为娱乐博客，作为每天和代码打交道的程序员也可以很浪漫，比如 freeCodeCamp 中tutorial中的示例代码。 代码核心是利用 ::before ::after 这两个CSS伪类来辅助画爱心的两个半圆。 <style> .heart { position: absolute; margin: auto; top: 0; right: 0...
CSS3制作可爱咖啡杯爱心动画教程
资源摘要信息:"纯css3爱心咖啡纸盒杯特效代码" 纯CSS3技术实现的爱心咖啡纸盒杯特效是一段用纯...开发者在使用这类特效时，需要了解HTML结构与CSS样式的编写，熟悉CSS3新特性的应用，并通过合适的文件管理维护代码库。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值