目录
写在前面
完整代码
代码分析
系列文章
写在最后
写在前面
教你用HTML语言实现粒子爱心动画的效果。
HTML，全称为HyperText Markup Language，即超文本标记语言，是构建网页的基本markup语言，它通过一系列标签tags来定义网页内容的结构和样式，使文本、图像、视频等多媒体元素能够在网页上得以组织和展示。
HTML文档由一系列元素组成，每个元素由开始标签、内容和结束标签构成，比如<p>这是一个段落</p>表示一个段落。标签不区分大小写，但通常推荐使用小写。HTML5作为当前广泛使用的版本，引入了许多新的语义化标签，如<header>，<nav>，<article>，<footer>等，这些标签使得网页结构更加清晰，有利于搜索引擎优化和网页可访问性的提升。
CSS通常与HTML一起使用，用于控制网页的布局和外观，而JavaScript则为网页添加交互性功能。尽管HTML主要用于内容结构，但它与CSS和JavaScript的结合使得互联网充满了丰富多彩、动态交互的网页体验。
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>粒子爱心</title>
</head>
<style>
html,
body {
height: 100%;
padding: 0;
margin: 0;
background: #000;
}
img {
display: block;
margin: 0 auto;
}
label {
display: block;
margin: 0 auto;
color: pink;
font-size: 20px;
padding-right: 5px;
animation: mymove 2.5s infinite;
-webkit-animation: mymove 2.5s infinite;
}
@keyframes mymove {
50% {
font-size: 40px;
}
}
@-webkit-keyframes mymove {
50% {
font-size: 40px;
}
}
.middle {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
}
.middle2 {
position: absolute;
z-index: 2;
width: 100%;
height: 100%;
margin: auto;
display: flex;
align-items: center;
}
</style>
<link rel="stylesheet" href="./style.css">
<body>
<div class="middle">
<div class="middle2">
</div>
<img src="https://pic.imgdb.cn/item/642547f5a682492fcc15cd5d.gif" width="1000" height="650" />
</div>
</body>
</html>代码分析
这段代码是一个基本的HTML结构，用于展示一个带有动画效果的网页，主要内容是一个粒子爱心的GIF图片。
HTML结构
<!DOCTYPE html>声明文档类型为HTML5。
<html>设定语言为英文。
<head>区块包含了文档的元数据和样式链接。
<meta>标签设置了字符集、兼容性视图以及响应式视图的初始缩放。
<title>定义了网页的标题为“粒子爱心”。
<link>引入外部样式表`style.css`，假设其中包含更多的样式定义。
<body>包含了网页的所有可显示内容。
CSS样式
通过<style>标签内联定义了一些基本样式：html, body设置了全屏显示，消除了默认的内外边距，并设定了黑色背景；img让图片块级显示并居中；label动画效果，文字颜色为粉色，初始字号20px，有一个向右的内边距，并应用了名为mymove的动画效果，该动画每2.5秒重复一次，让文字大小在20px和40px间变化；@keyframes mymove和-webkit-keyframes mymove分别定义了标准和Webkit前缀下的动画关键帧，用于控制文字大小的变化；.middle和.middle2类用于布局，创建了一个全屏高度的弹性盒子模型，垂直居中内容。.middle2位于.middle内部，设置了绝对定位，但未直接包含内容，可能用于覆盖或其他布局目的。
页面内容
页面主体部分由一个.middle容器构成，里面直接嵌套了一个空的.middle2容器以及一个<img>标签。GIF图片的URL指向一个外部资源，展示了一个粒子组成的爱心动画，尺寸被设定为宽1000px，高650px。
系列文章
| 序号 | 目录 |
|---|---|
| 1 | HTML满屏跳动的爱心（可写字） |
| 2 | HTML五彩缤纷的爱心 |
| 3 | HTML满屏漂浮爱心 |
| 4 | HTML情人节快乐 |
| 5 | HTML蓝色爱心射线 |
| 6 | HTML跳动的爱心（简易版） |
| 7 | HTML粒子爱心 |
| 8 | HTML蓝色动态爱心 |
| 9 | HTML跳动的爱心（双心版） |
| 10 | HTML橙色动态粒子爱心 |
| 11 | HTML旋转爱心 |
| 12 | HTML爱情树 |
| 13 | HTML3D相册 |
| 14 | HTML旋转相册 |
| 15 | HTML基础烟花秀 |
| 16 | HTML炫酷烟花秀 |
| 17 | HTML粉色烟花秀 |
| 18 | HTML新春烟花 |
| 19 | HTML龙年大吉 |
| 20 | HTML圣诞树 |
| 21 | HTML大雪纷飞 |
| 22 | HTML想见你 |
| 23 | HTML元素周期表 |
| 24 | HTML飞舞的花瓣 |
| 25 | HTML星空特效 |
| 26 | HTML黑客帝国字母雨 |
| 27 | HTML哆啦A梦 |
| 28 | HTML流星雨 |
| 29 | HTML沙漏爱心 |
| 30 | HTML爱心字母雨 |
写在最后
我是一只有趣的兔子，感谢你的喜欢！
