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

HTML跳动的爱心

news 2025/11/13 1:54:54

图片

目录

写在前面

HTML简介

跳动的爱心

代码分析

运行结果

推荐文章

写在后面

写在前面

哎呀，这是谁的小心心？跳得好快吖！

HTML简介

老生常谈啦，咱们还是从HTML开始吧！

HTML是超文本标记语言（HyperText Markup Language）的缩写，是一种用来创建网页的标记语言。它由一系列的标签组成，每个标签用于指示网页中某个元素的开始和结束，以及对元素进行各种操作和设置。HTML最早是由李爵士·伯纳斯-李（Sir Tim Berners-Lee）于1989年发明的，当时他正在瑞士的欧洲核子研究组织（CERN）工作。HTML的设计初衷是为了在科研人员之间共享文档和信息。随着互联网的发展，HTML逐渐成为了创建网页的标准工具。

HTML的基本结构是由开始标签和结束标签组成的。开始标签用尖括号(<>)括起来，结束标签在标签名前加上斜杠(/)。标签中可以包含属性，用于设置元素的各种属性和样式。例如，<p>是段落标签，可以创建一个段落，<h1>~<h6>是标题标签，用于创建不同级别的标题。除了标签和属性之外，HTML还包含了一些特殊字符和实体，用于表示一些特殊的符号和语义。例如，&lt;表示小于号(<)，&nbsp;表示空格。在HTML中，元素可以嵌套使用，也可以使用一些特殊的标签和属性对元素进行各种操作和设置。例如，<a>标签可以创建一个链接，<img>标签可以插入一张图片，<table>标签可以创建一个表格。HTML还支持一些特殊的元素和标签，用于描述网页的结构和语义。例如，<head>标签用于定义网页的头部信息，<body>标签用于定义网页的主体内容，<header>标签用于定义网页的头部，<nav>标签用于定义导航栏，<footer>标签用于定义页脚。

HTML的语法规则相对简单，容易学习和理解。它是一种开放的标准，任何人都可以使用和扩展。随着HTML的不断发展，已经发布了多个版本，最新的版本是HTML5，它引入了许多新的元素和功能，提供了更丰富的网页设计和交互效果。总之，HTML是一种用于创建网页的标记语言，它通过一系列的标签和属性，描述了网页的结构、样式和语义。它是互联网的基础之一，为人们提供了创建和共享信息的平台。

跳动的爱心

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Love</title><style type="text/css">* {margin: 0;padding: 0;}body,ul,li,ol,dl,dd,p,h1,h2,h3,h4,h5,h6 {margin: 0;}a {text-decoration: none;color: inherit;}img {display: block;border: none;}ol,ul {list-style: none;}.clearfix:after {content: "";display: block;clear: both;}.fl {float: left;}.fr {float: right;}html {height: 100%;background: -webkit-radial-gradient(center, pink, white);}.heart {position: relative;width: 300px;height: 300px;margin: 200px auto;transform: rotate(45deg);animation: move 2s infinite alternate;}.heart div {position: absolute;width: 200px;height: 200px;background: red;}.heart .middle {right: 0;bottom: 0;width: 200px;height: 200px;}.heart .left {left: 0;bottom: 0;border-radius: 50%;}.heart .right {top: 0;right: 0;border-radius: 50%;}.heart p {width: 200px;height: 30px;font: bold 25px/30px "";text-align: center;color: #fff;}.heart p {position: absolute;right: 0;bottom: 85px;transform: rotate(-45deg);}@-webkit-keyframes move {10% {transform: rotate(45deg) scale(1.1);text-shadow: 0 0 5px #fff;}20% {transform: rotate(45deg) scale(1.2);text-shadow: 0 0 5px #fff;}30% {transform: rotate(45deg) scale(1.3);text-shadow: 0 0 5px #fff;}40% {transform: rotate(45deg) scale(1.2);text-shadow: 0 0 5px #fff;}50% {transform: rotate(45deg) scale(1.3);text-shadow: 0 0 5px #fff;}60% {transform: rotate(45deg) scale(1.2);text-shadow: 0 0 5px #fff;}70% {transform: rotate(45deg) scale(1.3);text-shadow: 0 0 5px #fff;}80% {transform: rotate(45deg) scale(1.2);text-shadow: 0 0 10px #fff;}90% {transform: rotate(45deg) scale(1.1);text-shadow: 0 0 5px #fff;}}</style>
</head><body><div class="heart"><div class="left"></div><div class="middle"></div><div class="right"></div></div>
</body></html>

代码分析

这是一个简单的HTML页面，实现了一个心形动画效果。下面是对代码的详细分析：

1. `<!DOCTYPE html>`：声明文档类型为HTML。

2. `<html>`：HTML开始标签，并指定语言为英语。

3. `<head>`：头部标签，用于包含页面的元数据和引用外部资源。

4. `<meta charset="UTF-8">`：指定字符编码为UTF-8。

5.`<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">`：设置页面的视口尺寸。

6. `<meta http-equiv="X-UA-Compatible" content="ie=edge">`：设置IE浏览器的兼容性模式。

7. `<title>Love</title>`：设置页面的标题。

8. `<style type="text/css">`：内联CSS样式开始标签。

9. `* { margin: 0; padding: 0; }`：设置所有元素的外边距和内边距为0。

10. `body, ul, li, ol, dl, dd, p, h1, h2, h3, h4, h5, h6 { margin: 0; }`：设置部分元素的外边距为0。

11. `a { text-decoration: none; color: inherit; }`：设置链接元素的文本装饰为无，并继承颜色。

12. `img { display: block; border: none; }`：设置图片元素的显示为块级元素，并去除边框。

13. `ol, ul { list-style: none; }`：去除有序列表和无序列表的默认样式。

14. `.clearfix:after { content: ""; display: block; clear: both; }`：创建一个伪元素清除浮动。

15. `.fl { float: left; }`：设置元素浮动在左侧。

16. `.fr { float: right; }`：设置元素浮动在右侧。

17. `html { height: 100%; background: -webkit-radial-gradient(center, pink, white); }`：设置HTML元素的高度为100%，并设置背景为一个径向渐变。

18. `.heart { position: relative; width: 300px; height: 300px; margin: 200px auto; transform: rotate(45deg); animation: move 2s infinite alternate; }`：设置心形容器的样式，包括相对定位、宽度和高度、垂直居中、旋转和动画效果。

19. `.heart div { position: absolute; width: 200px; height: 200px; background: red; }`：定义心形的三个部分的样式，包括绝对定位、宽度和高度、背景为红色。

20. `.heart .middle { right: 0; bottom: 0; width: 200px; height: 200px; }`：定义中间部分的样式，设置其位置和尺寸。

21. `.heart .left { left: 0; bottom: 0; border-radius: 50%; }`：定义左边的部分的样式，设置其位置和边框半径为50%。

22. `.heart .right { top: 0; right: 0; border-radius: 50%; }`：定义右边的部分的样式，设置其位置和边框半径为50%。

23. `.heart p { width: 200px; height: 30px; font: bold 25px/30px ""; text-align: center; color: #fff; }`：定义心形内部的文本样式，包括宽度和高度、字体加粗、字体大小和行高、居中对齐和颜色为白色。

24. `.heart p { position: absolute; right: 0; bottom: 85px; transform: rotate(-45deg); }`：定义心形内部的文本的位置和旋转。

25. `@-webkit-keyframes move { ... }`：定义一个动画关键帧，实现心形的旋转和缩放效果。

在`<body>`标签中，有一个心形的动画效果，使用一个容器（`.heart`）和三个部分（`.left`、`.middle`、`.right`）组成。通过CSS样式定义了容器和部分的样式，并通过动画关键帧（`@-webkit-keyframes`）实现旋转和缩放效果。最后，将容器放在页面的中央位置（`margin: 200px auto`）。

运行结果

图片

推荐文章

序号目录直达链接
1HTML实现3D相册HTML实现3D相册-CSDN博客
2HTML元素周期表HTML元素周期表-CSDN博客
3HTML黑客帝国字母雨HTML黑客帝国字母雨_字母雨html-CSDN博客
4HTML五彩缤纷的爱心HTML五彩缤纷的爱心-CSDN博客
5HTML飘落的花瓣HTML飘落的花瓣-CSDN博客
6HTML哆啦A梦HTML哆啦A梦_html哆啦a梦代码-CSDN博客
7HTML爱情树HTML爱情树-CSDN博客
8HTML新春烟花盛宴HTML新春烟花盛宴-CSDN博客
9HTML想见你HTML想见你-CSDN博客
10HTML蓝色爱心HTML蓝色爱心-CSDN博客
11HTML跳动的爱心https://want595.blog.csdn.net/article/details/139137326
12HTML橙色爱心HTML橙色爱心-CSDN博客
13HTML大雪纷飞https://want595.blog.csdn.net/article/details/139136829
14
15
16
17
18
19
20
21
22
23
24
25
26
27

写在后面

我是一只有趣的兔子，感谢你的喜欢！

相关文章：

HTML跳动的爱心

目录 写在前面 HTML简介 跳动的爱心 代码分析 运行结果 推荐文章 写在后面 写在前面 哎呀&#xff0c;这是谁的小心心&#xff1f;跳得好快吖&#xff01; HTML简介 老生常谈啦&#xff0c;咱们还是从HTML开始吧&#xff01; HTML是超文本标记语言&#xff08;Hyper…...

编程日记 2024/5/27 8:18:22

汇编原理（二）

寄存器&#xff1a;所有寄存器都是16位&#xff08;0-15&#xff09;&#xff0c;可以存放两个字节 AX,BX,CX,DX存放一般性数据&#xff0c;称为通用寄存器 AX的逻辑结构。最大存放的数据为2的16次方减1。可分为AH和AL&#xff0c;兼容8位寄存器。 字&#xff1a;1word 2Byte…...

编程日记 2024/5/27 8:17:21

Android Studio开发之路（十三）主题影响Button颜色问题解决及button自定义样式

一、问题描述 在开发过程中发现安卓的默认主题色是紫色&#xff0c;并且会导致button也是紫色&#xff0c;有时直接在xml布局文件中直接设置button的背景色或者设置背景图片不起效果 方案一、如果是app&#xff0c;可以直接设置主题颜色 比如&#xff0c;将主题设置为白色&a…...

编程日记 2024/5/27 8:16:20

eNSP学习——OSPF单区域配置

目录 相关命令 实验背景 实验目的 实验步骤 实验拓扑 实验编址 实验步骤 1、基础配置 2、部署单区域OSPF网络 3、检查OSPF单区域的配置结果 OSPF——开放式最短路径优先 基于链路状态的协议&#xff0c;具有收敛快、路由无环、扩展性好等优点&#xff1b; 相关命令 […...

编程日记 2024/5/27 8:14:18

深度学习中的优化算法二（Pytorch 19）

一 梯度下降 尽管梯度下降&#xff08;gradient descent&#xff09;很少直接用于深度学习&#xff0c;但了解它是理解下一节 随机梯度下降算法 的关键。例如&#xff0c;由于学习率过大&#xff0c;优化问题可能会发散&#xff0c;这种现象早已在梯度下降中出现。同样地&…...

编程日记 2024/5/27 8:13:17

R实验 方差分析

实验目的&#xff1a; 掌握单因素方差分析的思想和方法&#xff1b; 掌握多重均值检验方法&#xff1b; 掌握多个总体的方差齐性检验&#xff1b; 掌握Kruskal-Wallis秩和检验的思想和方法&#xff1b; 掌握多重Wilcoxon秩和检验的思想和方法。 实验内容&#xff1a; &…...

编程日记 2024/5/27 8:12:16

AI智能体｜手把手教你使用扣子Coze图像流的文生图功能

大家好&#xff0c;我是无界生长。 AI智能体&#xff5c;手把手教你使用扣子Coze图像流的文生图功能本文详细介绍了Coze平台的\x26quot;图像流\x26quot;功能中的\x26quot;文生图\x26quot;节点&#xff0c;包括创建图像流、编排文生图节点、节点参数配置&#xff0c;并通过案例…...

编程日记 2024/5/27 8:11:15

应用程序图标提取

文章目录 [toc]提取过程提取案例——提取7-zip应用程序的图标 提取过程 找到需要提取图标的应用程序的.exe文件 复制.exe文件到桌面&#xff0c;并将复制的.exe文件后缀改为.zip 使用解压工具7-zip解压.zip文件 在解压后的文件夹中&#xff0c;在.rsrc/ICON路径下的.ico文件…...

编程日记 2024/5/27 8:10:14

Excel表格在线解密：轻松解密密码，快速恢复数据

忘记了excel表格密码&#xff1f;教你简单两步走&#xff1a;具体步骤如下。首先&#xff0c;在百度搜索中键入“密码帝官网”。其次&#xff0c;点击“立即开始”&#xff0c;在用户中心上传表格文件即可找回密码。这种方法不用下载软件&#xff0c;操作简单易行&#xff0c;适…...

编程日记 2024/5/27 8:09:12

springboot小结1

什么是springboot ​ Spring Boot是为了简化Spring应用的创建、运行、调试、部署等而出现的&#xff0c;使用它可以做到专注于Spring应用的开发&#xff0c;而无需过多关注XML的配置。 ​ 简单来说&#xff0c;它提供了一堆依赖打包Starter&#xff0c;并已经按照使用习惯解决…...

编程日记 2024/5/27 8:08:11

【Qt 学习笔记】Qt窗口 | 菜单栏 | QMenuBar的使用及说明

博客主页&#xff1a;Duck Bro 博客主页系列专栏&#xff1a;Qt 专栏关注博主&#xff0c;后期持续更新系列文章如果有错误感谢请大家批评指出&#xff0c;及时修改感谢大家点赞&#x1f44d;收藏⭐评论✍ Qt窗口 | 菜单栏 | QMenuBar的使用及说明 文章编号&#xff1a;Qt 学习…...

编程日记 2024/5/27 8:06:08

Spark运行模式详解

Spark概述 Spark 可以在多种不同的运行模式下执行&#xff0c;每种模式都有其自身的特点和适用场景。 部署Spark集群大体上分为两种模式&#xff1a;单机模式与集群模式。大多数分布式框架都支持单机模式&#xff0c;方便开发者调试框架的运行环境。但是在生产环境中&#xff…...

编程日记 2024/5/27 8:05:07

vcpkg环境配置

vcpkg 使用linux相关库&#xff0c;设置环境变量VCPKG_ROOT&#xff0c;设置cmake工具链$VCPKG_ROOT/scripts\buildsystems\vcpkg.cmake set VCPKG_DEFAULT_TRIPLETx64-windows .\vcpkg.exe install fftw3 freetype gettext glibmm gtkmm libjpeg-turbo libpng libxmlpp libs…...

编程日记 2024/5/27 8:03:05

python学习：基础语句

目录 条件语句 循环语句 for 循环 while 循环 break continue 条件语句 Python提供了 if、elif、else 来进行逻辑判断。格式如下&#xff1a; Pythonif 判断条件1: 执行语句1... elif 判断条件2: 执行语句2... elif 判断条件3: 执行语句3... else: 执行语句4…...

编程日记 2024/5/27 8:02:04

Nginx限制IP访问详解

在Web服务器管理中&#xff0c;限制某些IP地址访问网站是一个常见的需求。Nginx作为一款高性能的HTTP服务器和反向代理服务器&#xff0c;提供了灵活强大的配置选项来实现这一功能。本文将详细讲解如何在Nginx中限制IP访问&#xff0c;并通过示例代码展示具体操作。 一、Nginx…...

编程日记 2024/5/27 8:01:02

Three.js——二维平面、二维圆、自定义二维图形、立方体、球体、圆柱体、圆环、扭结、多面体、文字

个人简介 &#x1f440;个人主页&#xff1a; 前端杂货铺 ⚡开源项目&#xff1a; rich-vue3 &#xff08;基于 Vue3 TS Pinia Element Plus Spring全家桶 MySQL&#xff09; &#x1f64b;‍♂️学习方向&#xff1a; 主攻前端方向&#xff0c;正逐渐往全干发展 &#x1…...

编程日记 2024/5/27 7:59:59

24年湖南教资认定即将开始，别被照片卡审！

24年湖南教资认定即将开始&#xff0c;别被照片卡审&#xff01;...

编程日记 2024/5/27 7:58:57

数据库（8）——DML数据操作

增添数据 给指定字段添加数据 INSERT INTO 表名 (字段名1&#xff0c;字段名2,...)VALUES(值1,值2...); 没有的添加的字段默认为NULL。 给全部字段添加数据 INSERT INTO 表名 VALUE (值1,值2,....值n); 此时值的顺序对应表中字段的顺序 批量添加数据 INSERT INTO 表名(字段1,…...

编程日记 2024/5/27 7:57:56

Gitee在已有项目基础上创建仓库中遇到的问题和解决

问题一&#xff1a;fatal: remote origin already exists 解释&#xff1a;当前仓库添加了一个名为"origin"的远程仓库配置&#xff0c;此时输入 git remote add origin https://xxx就会提示上面的内容。 解决方案1:移除旧的origin git remote remove origin 解决方案…...

编程日记 2024/5/27 7:55:54

【推荐算法-特征工程】每种item单侧特征，都可产生对应user单侧特征

比如item的平均成单价格&#xff0c;可以分成10个档位&#xff0c;作为一个标签值打在item上&#xff0c; 那么对应user对item的click用户行为&#xff0c;就能产生user-click的10个档位作为特征值 作为user的标签。 比如item的平均点击率&#xff0c;也可以分成比如20个档位…...

编程日记 2024/5/27 7:54:52

7.4.分块查找

一.分块查找的算法思想&#xff1a; 1.实例&#xff1a; 以上述图片的顺序表为例&#xff0c; 该顺序表的数据元素从整体来看是乱序的&#xff0c;但如果把这些数据元素分成一块一块的小区间&#xff0c; 第一个区间[0,1]索引上的数据元素都是小于等于10的&#xff0c; 第二…...

编程新知 2025/11/12 21:38:38

多模态商品数据接口：融合图像、语音与文字的下一代商品详情体验

一、多模态商品数据接口的技术架构 &#xff08;一&#xff09;多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如&#xff0c;当用户上传一张“蓝色连衣裙”的图片时&#xff0c;接口可自动提取图像中的颜色&#xff08;RGB值&…...

编程新知 2025/7/23 3:55:49

VTK如何让部分单位不可见

最近遇到一个需求&#xff0c;需要让一个vtkDataSet中的部分单元不可见&#xff0c;查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行&#xff0c;是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示&#xff0c;主要是最后一个参数&#xff0c;透明度…...

编程新知 2025/9/22 18:49:24

微信小程序云开发平台MySQL的连接方式

注&#xff1a;微信小程序云开发平台指的是腾讯云开发 先给结论&#xff1a;微信小程序云开发平台的MySQL&#xff0c;无法通过获取数据库连接信息的方式进行连接&#xff0c;连接只能通过云开发的SDK连接&#xff0c;具体要参考官方文档&#xff1a; 为什么&#xff1f; 因为…...

编程新知 2025/11/10 19:00:21

聊一聊接口测试的意义有哪些？

目录 一、隔离性 & 早期测试 二、保障系统集成质量 三、验证业务逻辑的核心层 四、提升测试效率与覆盖度 五、系统稳定性的守护者 六、驱动团队协作与契约管理 七、性能与扩展性的前置评估 八、持续交付的核心支撑 接口测试的意义可以从四个维度展开&#xff0c;首…...

编程新知 2025/10/14 6:46:13

云原生安全实战：API网关Kong的鉴权与限流详解

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、基础概念 1. API网关&#xff08;API Gateway&#xff09; API网关是微服务架构中的核心组件&#xff0c;负责统一管理所有API的流量入口。它像一座…...

编程新知 2025/11/12 16:55:58

PostgreSQL——环境搭建

一、Linux # 安装 PostgreSQL 15 仓库 sudo dnf install -y https://download.postgresql.org/pub/repos/yum/reporpms/EL-$(rpm -E %{rhel})-x86_64/pgdg-redhat-repo-latest.noarch.rpm# 安装之前先确认是否已经存在PostgreSQL rpm -qa | grep postgres# 如果存在&#xff0…...

编程新知 2025/10/28 21:05:15

【Linux系统】Linux环境变量：系统配置的隐形指挥官

。# Linux系列 文章目录 前言一、环境变量的概念二、常见的环境变量三、环境变量特点及其相关指令3.1 环境变量的全局性3.2、环境变量的生命周期 四、环境变量的组织方式五、C语言对环境变量的操作5.1 设置环境变量&#xff1a;setenv5.2 删除环境变量:unsetenv5.3 遍历所有环境…...

编程新知 2025/11/12 4:35:00

华为OD机试-最短木板长度-二分法(A卷,100分)

此题是一个最大化最小值的典型例题&#xff0c; 因为搜索范围是有界的&#xff0c;上界最大木板长度补充的全部木料长度&#xff0c;下界最小木板长度&#xff1b; 即left0,right10^6; 我们可以设置一个候选值x(mid)&#xff0c;将木板的长度全部都补充到x&#xff0c;如果成功…...

编程新知 2025/11/9 9:46:42

API网关Kong的鉴权与限流：高并发场景下的核心实践

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 引言 在微服务架构中&#xff0c;API网关承担着流量调度、安全防护和协议转换的核心职责。作为云原生时代的代表性网关&#xff0c;Kong凭借其插件化架构…...

编程新知 2025/9/6 9:35:29