HTML粒子爱心

news2024/11/22 11:36:40

写在前面

完整代码

代码分析

系列文章

写在最后

写在前面

教你用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>区块包含了文档的元数据和样式链接。

<title>定义了网页的标题为“粒子爱心”。

<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爱心字母雨