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

HTML跳动的爱心

news 2025/8/29 7:30:01

图片

目录

写在前面

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

内存分配函数malloc kmalloc vmalloc

内存分配函数malloc kmalloc vmalloc malloc实现步骤： 1）请求大小调整：首先，malloc 需要调整用户请求的大小，以适应内部数据结构（例如，可能需要存储额外的元数据）。通常，这包括对齐调整，确保分配的内存地址满足特定硬件要求（如对齐到8字节或16字节边界）。 2）空闲…...

编程新知 2025/7/16 16:51:12

论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（二）

HoST框架核心实现方法详解 - 论文深度解读（第二部分） 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章： 论文深度解读 + 算法与代码分析（二） 作者机构： 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题： 人形机器人…...

编程新知 2025/8/4 18:55:37

【JavaEE】-- HTTP

1. HTTP是什么&#xff1f; HTTP&#xff08;全称为"超文本传输协议"&#xff09;是一种应用非常广泛的应用层协议&#xff0c;HTTP是基于TCP协议的一种应用层协议。 应用层协议&#xff1a;是计算机网络协议栈中最高层的协议&#xff0c;它定义了运行在不同主机上…...

编程新知 2025/8/25 20:54:47

三维GIS开发cesium智慧地铁教程（5）Cesium相机控制

一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点&#xff1a; 路径验证&#xff1a;确保相对路径.…...

编程新知 2025/8/21 15:41:11

什么是库存周转？如何用进销存系统提高库存周转率？

你可能听说过这样一句话&#xff1a; “利润不是赚出来的&#xff0c;是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业&#xff0c;很多企业看着销售不错&#xff0c;账上却没钱、利润也不见了&#xff0c;一翻库存才发现&#xff1a; 一堆卖不动的旧货…...

编程新知 2025/8/22 5:05:48

剑指offer20_链表中环的入口节点

链表中环的入口节点 给定一个链表&#xff0c;若其中包含环&#xff0c;则输出环的入口节点。 若其中不包含环&#xff0c;则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...

编程新知 2025/8/22 22:30:54

WEB3全栈开发——面试专业技能点P2智能合约开发（Solidity）

一、Solidity合约开发 下面是 Solidity 合约开发 的概念、代码示例及讲解&#xff0c;适合用作学习或写简历项目背景说明。 &#x1f9e0; 一、概念简介&#xff1a;Solidity 合约开发 Solidity 是一种专门为 以太坊&#xff08;Ethereum&#xff09;平台编写智能合约的高级编…...

编程新知 2025/8/13 16:04:59

AI编程--插件对比分析：CodeRider、GitHub Copilot及其他

AI编程插件对比分析&#xff1a;CodeRider、GitHub Copilot及其他 随着人工智能技术的快速发展&#xff0c;AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者&#xff0c;分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...

编程新知 2025/7/6 18:33:10

什么是Ansible Jinja2

理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具&#xff0c;可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板&#xff0c;允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板&#xff0c;并通…...

编程新知 2025/8/24 10:37:32

Maven 概述、安装、配置、仓库、私服详解

目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...

编程新知 2025/8/22 3:17:54