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

HTML跳动的爱心

news 2026/4/8 11:07:14

图片

目录

写在前面

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

UEFITOOL 0.28：终极BIOS固件解析与修改实战指南

UEFITOOL 0.28&#xff1a;终极BIOS固件解析与修改实战指南 【免费下载链接】UEFITOOL28 项目地址: https://gitcode.com/gh_mirrors/ue/UEFITOOL28 UEFITOOL 0.28是一款专业级的UEFI固件分析工具&#xff0c;专门为BIOS固件解析、修改和深度分析而设计。无论你是固件工…...

编程新知 2026/4/8 10:42:14

PyVideoTrans：开源视频翻译与AI配音的完整解决方案

PyVideoTrans&#xff1a;开源视频翻译与AI配音的完整解决方案 【免费下载链接】pyvideotrans Translate the video from one language to another and embed dubbing & subtitles. 项目地址: https://gitcode.com/gh_mirrors/py/pyvideotrans PyVideoTrans是一款功…...

编程新知 2026/4/8 9:37:55

SAM 3科研可视化：分割结果嵌入Jupyter Notebook交互式分析

SAM 3科研可视化&#xff1a;分割结果嵌入Jupyter Notebook交互式分析 1. 引言&#xff1a;当科研遇上智能分割 想象一下这样的场景&#xff1a;你正在分析一批生物医学图像&#xff0c;需要从复杂的细胞图像中精确分离出特定的细胞结构。传统方法需要手动标注&#xff0c;耗…...

编程新知 2026/4/8 8:41:15

IBGP全互联实验+路由反射实验

知识点回顾IBGP全互联路由反射器实验先做IBGP全互联实验查看OSPF邻居关系R1上查看BGP邻居在R2上查看BGP邻居在R3上查看BGP邻居在R5上查看BGP邻居在R4上查看是否有去往10.10.5.5的路由在R5上查看是否有去往10.10.4.4的路由现在网络就能通了再做路由器反射实验在R1上跟R3上删除BG…...

编程新知 2026/4/8 6:57:09

Davinci NvM Block与Fee Block关联配置详解

1. Davinci配置工具中的NvM与Fee Block基础概念 第一次接触Davinci配置工具时&#xff0c;很多人会对NvM Block和Fee Block的关系感到困惑。简单来说&#xff0c;NvM&#xff08;Non-volatile Memory&#xff09;Block是我们配置的非易失性存储单元&#xff0c;而Fee&#xff0…...

编程新知 2026/4/8 6:52:51

Qwen3-14B镜像快速入门：内置模型+完整环境，开箱即用教程

Qwen3-14B镜像快速入门&#xff1a;内置模型完整环境&#xff0c;开箱即用教程 1. 为什么选择Qwen3-14B镜像 在AI模型部署过程中&#xff0c;环境配置往往是最耗时的环节。传统部署方式需要手动安装CUDA、PyTorch、模型权重等数十个组件&#xff0c;版本兼容性问题频发&#…...

编程新知 2026/4/8 6:48:48

文墨共鸣功能全解析：StructBERT双塔/单塔架构怎么选？

文墨共鸣功能全解析&#xff1a;StructBERT双塔/单塔架构怎么选&#xff1f; 1. 理解文墨共鸣的核心功能 文墨共鸣是一个融合深度学习技术与传统美学的语义相似度分析系统。它能够判断两段中文文本在语义层面的相似程度&#xff0c;并以独特的水墨风格界面呈现结果。这个系统…...

编程新知 2026/4/8 6:28:14

基于Qwen3.5-2B的数据库课程设计智能指导系统

基于Qwen3.5-2B的数据库课程设计智能指导系统 1. 课程设计的痛点与解决方案 每到学期末&#xff0c;计算机专业的学生们都会面临一个共同的挑战——数据库课程设计。从选题到ER图设计&#xff0c;再到SQL编写和报告撰写&#xff0c;整个过程往往让学生们感到无从下手。传统的…...

编程新知 2026/4/8 6:16:05

HY-Motion 1.0未来演进：支持多人协同与简单物体交互的路线图解析

HY-Motion 1.0未来演进&#xff1a;支持多人协同与简单物体交互的路线图解析 1. 引言&#xff1a;从单人到互动的跨越 HY-Motion 1.0的发布&#xff0c;让文字描述转化为流畅、逼真的3D人体动作变得触手可及。无论是健身动作、日常行为还是复杂的舞蹈编排&#xff0c;这个十亿…...

编程新知 2026/4/8 5:53:46

手把手教你用思博伦GSS7000的SimReplayPlus模块：从硬件连接到功率调节的完整避坑指南

手把手教你用思博伦GSS7000的SimReplayPlus模块&#xff1a;从硬件连接到功率调节的完整避坑指南 第一次接触思博伦GSS7000卫星导航模拟器时&#xff0c;面对复杂的硬件接口和PosApp软件里密密麻麻的参数&#xff0c;不少工程师会感到无从下手。作为业内公认的高精度测试设备&a…...

编程新知 2026/4/8 5:49:45