制作跳动的爱心网页效果

已于 2024-05-11 12:17:52 修改
阅读量447 收藏
点赞数 10
分类专栏： HTML5+CSS3网页设计 文章标签： html5 css3 前端 前端框架 html css xss
于 2024-05-11 12:17:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bengbeng2345/article/details/138709558
版权

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>跳动的爱心</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="heart">
  <div class="petal"></div>
  <div class="petal"></div>
</div>
<script src="script.js"></script>
</body>
</html>

css （命名为styles.css）

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f7f7f7;
}

.heart {
  position: relative;
  width: 100px;
  height: 90px;
  transform: rotate(45deg);
}

.petal {
  position: absolute;
  top: 0;
  width: 52px;
  height: 80px;
  border-radius: 50px 50px 0 0;
  background: red;
}

.petal:first-child {
  left: 50px;
  border-bottom-right-radius: 40px 50px;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}

.petal:last-child {
  left: 0;
  border-top-left-radius: 50px 45px;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}

@keyframes heartbeat {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.heart {
  animation: heartbeat 1s infinite;
}

效果： 

鸣弦artha
关注
专栏目录
【爱心跳动——HTML实现 （效果+代码）】| 前端面试：解释什么是浏览器的同源策略（Same-Origin Policy）以及限制。
追光者♂：记录、分享、总结、提升，现象级专栏《Python从入门到人工智能》作者，无惧黑暗，坚信曙光
02-12 2万+
目录效果代码说明 效果 代码 爱心跳动.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>html</title> <style> *{ padding: 0; margin: 0; } body{
HTML和CSS制作跳动的心
qq_67413159的博客
04-06 1958
首先做两个圆，给两个圆添加定位使一部分重叠其形成如下形状。 在做一个正方形，给它做旋转和定位，与上面两个圆组合成如下形状。 最后给这个心添加动画就可以了。 具体代码如下： <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.
HTML做成一个炫酷跳动爱心的页面
德乐懿的博客
06-08 2098
最后，我们使用JavaScript（虽然在这个例子中我们不需要它来实现跳动效果，因为CSS动画已经足够了，但如果你想通过JavaScript控制动画，你可以在这里添加代码）。要创建一个炫酷跳动爱心的HTML页面，你可以使用HTML、CSS和JavaScript的组合。以下是一个简单的示例，它使用CSS动画和JavaScript来实现跳动效果。保存上面的代码为一个.html文件，然后在浏览器中打开它，你将看到一个跳动的爱心。// JavaScript代码将在这里。/* CSS样式将在这里 */
HTML+css：可以跳动的爱心网页的制作
m0_64450406的博客
07-22 228
【代码】HTML+css：可以跳动的爱心网页的制作。
情人节特别定制：多种语言编写动态爱心网页（附完整代码）
商务合作 | 共同学习 | 携手共进
08-22 1万+
本文分别使用 html+three.js、html+css+js、Python+flask 三种方式绘制动态爱心网页，均附完整代码，复制粘贴即可运行。
跳动爱心代码-李峋爱心代码（手把手教学）
热门推荐
J_Jie_的博客
11-09 3万+
电视剧 点燃我，温暖你 打火机与公主裙 李洵爱心跳动效果。获取完整代码，公众号「先取个名字吧」 回复爱心代码。本文分为两种方式讲解如何运行代码，第一种方式比较简单推荐新手（完全不懂编程的），第二种方式需要有一定的编程基础的人。跟着我一步步来，你也将成为有一定编程基础的人！🌝。
CSS 跳动爱心——情人节
qq_42758330的博客
02-11 1584
马上又到情人节了 ，今天用HTML+CSS写一个跳动爱心的小网页，超级简单，可以根据自己的需求改动。快来看看吧！ 首先html部分代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>I love you</title> </head> <body> <div class="h
HTML制作跳动的心形网页
snowy_and_sunny的博客
04-15 757
作为一名码农 也有自己浪漫的小心思嗷~ 该网页 代码整体难度不大 操作性较强 祝大家都幸福hhhhh。
CSS3制作跳动心形动画特效代码
03-20
在本教程中，我们将深入探讨如何使用CSS3来制作一个...以上就是利用CSS3制作跳动心形动画的整个过程，这只是一个基础示例，实际应用中可以根据需求调整动画效果，如颜色变化、速度、延迟等，以实现更丰富的视觉体验。
爱心跳动-HTML实现.rar
02-12
这是一个由前端技术实现的“爱心跳动”特效，十分好看！可以直接点击运行，当然也包含全部源代码，欢迎大家下载！该内容已经在博客中记录，建议结合专栏【前端之梦~代码之美(H5+CSS3+JS.】学习，效果会更好！祝大家...
Html跳动爱心(效果+代码)-追光者.zip
12-23
总的来说，这个"Html跳动爱心(效果+代码)-追光者.zip"文件提供了一个很好的机会，让我们了解并实践前端开发中的动态效果制作。无论是对HTML的基本结构的理解，CSS动画的运用，还是JavaScript的交互设计，都能从这个...
HTML5实现跳动的心
06-24
HTML5是现代网页开发的核心标准，它为网页设计师和开发者提供了强大的工具，使得创建互动、动态...通过学习和理解这个项目，我们可以深入掌握网页动态效果的制作，同时也可以利用这些知识创造出更多吸引人的互动体验。
纯CSS3制作红心跳动动画特效
06-24
让我们一起深入了解CSS3的核心概念以及如何将它们应用到这个红心跳动爱心动画的实现中。 首先，CSS3是层叠样式表（Cascading Style Sheets）的第三个主要版本，它引入了许多新的特性和功能，使得网页设计更加动态和...
HTML5 + CSS3 + JavaScript 编程语言学习教程
孤客科技
10-31 1256
HTML5是超文本标记语言的最新版本，它为网页结构提供了更丰富的语义和功能。HTML5 使得网页不仅可以展示文本和图像，还可以处理音频、视频、图形和动画。CSS3（层叠样式表）是用于描述 HTML 文档外观的语言。它允许开发者控制网页的布局、颜色、字体以及其他视觉效果。JavaScript是一种高效的脚本语言，广泛用于网页开发。它可以实现网页的动态效果和交互功能，使网页更加生动和用户友好。通过本教程，你应该对HTML5CSS3和JavaScript的基本概念、语法和应用有了更深入的了解。
【HTML5】html5开篇基础（6）
Easonmax的博客
10-30 990
该标签支持多种视频格式，并提供了一些属性和方法来控制视频的播放。对于autoplay在谷歌中不添加muted是自动播放不了的。标签也支持多种音频格式，并且提供了一些控制音频播放的属性。在学习html5和css3的基础上使我们的前端使用更高级。对于audio中controls和src是最重要的。对于video中controls和src是最重要的。在谷歌中autoplay是禁用的，用不了。在学习html5的基础上更加熟练运用前端。我们通常用MP4，这在所有游览器中通用。学习前端知识，更好的运用它。
css边框修饰
weixin_74261199的博客
10-30 724
② 分别设置边框四个方向的宽度。② 分别设置四个方向的边框颜色。② 分别设置四个方向的圆角边框。属性设置四个方向的边框颜色。属性整体设置四个圆角。整体设置上下左右边框。
CSS3新增背景属性（四）
最新发布
。
11-01 887
介绍CSS3新增背景属性及其使用方式。
巨好看的登录注册界面源码
bjzhang75的博客
10-31 3195
巨好看的登录注册界面源码
CSS基础知识六（浮动的高度塌陷问题及解决方案）
2301_80208072的博客
10-30 552
浮动的高度塌陷问题及解决方案，小白必看！
用CSS3制作跳动爱心动画特效源码分享
1. CSS3动画特效：CSS3是CSS技术的最新版本，它为开发者提供了创建更为复杂和动态网页效果的能力，而不需要依赖JavaScript或Flash。在这份资源中，使用CSS3实现了动画效果，具体地，是通过keyframes规则定义了动画...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值