HTML粒子爱心特效代码 - 文章 - 开发者社区

picture.image

写在前面

炫酷的 粒子爱心 ，送给热爱生活的你！

picture.image

HTML

HTML ，全称为HyperText Markup Language，即超文本标记语言，是构建网页的基本markup语言，它通过一系列标签tags来定义网页内容的结构和样式，使文本、图像、视频等多媒体元素能够在网页上得以组织和展示。

HTML 文档由一系列元素组成，每个元素由开始标签、内容和结束标签构成，比如

这是一个段落

表示一个段落。标签不区分大小写，但通常推荐使用小写。 HTML5 作为当前广泛使用的版本，引入了许多新的语义化标签，如，，，等，这些标签使得网页结构更加清晰，有利于搜索引擎优化和网页可访问性的提升。

CSS 通常与 HTML 一起使用，用于控制网页的布局和外观，而 JavaScript 则为网页添加交互性功能。尽管 HTML 主要用于内容结构，但它与 CSS 和 JavaScript 的结合使得互联网充满了丰富多彩、动态交互的网页体验。

picture.image

粒子爱心


                  
<!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>

picture.image

代码分析

这段代码是一个基本的HTML结构，用于展示一个带有动画效果的网页，主要内容是一个粒子爱心的GIF图片。

HTML结构

声明文档类型为HTML5。设定语言为英文。区块包含了文档的元数据和样式链接。

标签设置了字符集、兼容性视图以及响应式视图的初始缩放。

定义了网页的标题为“粒子爱心”。引入外部样式表`style.css`，假设其中包含更多的样式定义。包含了网页的所有可显示内容。 CSS样式

通过标签内联定义了一些基本样式：html, body设置了全屏显示，消除了默认的内外边距，并设定了黑色背景；img让图片块级显示并居中；label动画效果，文字颜色为粉色，初始字号20px，有一个向右的内边距，并应用了名为mymove的动画效果，该动画每2.5秒重复一次，让文字大小在20px和40px间变化；@keyframes mymove和-webkit-keyframes mymove分别定义了标准和Webkit前缀下的动画关键帧，用于控制文字大小的变化；.middle和.middle2类用于布局，创建了一个全屏高度的弹性盒子模型，垂直居中内容。.middle2位于.middle内部，设置了绝对定位，但未直接包含内容，可能用于覆盖或其他布局目的。

页面内容

页面主体部分由一个.middle容器构成，里面直接嵌套了一个空的.middle2容器以及一个标签。GIF图片的URL指向一个外部资源，展示了一个粒子组成的爱心动画，尺寸被设定为宽1000px，高650px。

picture.image

运行结果

picture.image