IT评测·应用市场-qidao123.com技术社区

标题: HTML粒子爱心 [打印本页]
作者: 光之使者    时间: 2024-8-29 19:47
标题: HTML粒子爱心

目次
写在前面
完整代码
代码分析
系列文章
写在末了

写在前面

教你用HTML语言实现粒子爱心动画的结果。
HTML，全称为HyperText Markup Language，即超文本标志语言，是构建网页的基本markup语言，它通过一系列标签tags来定义网页内容的布局和样式，使文本、图像、视频等多媒体元素能够在网页上得以组织和展示。
HTML文档由一系列元素构成，每个元素由开始标签、内容和结束标签构成，比如<p>这是一个段落</p>表示一个段落。标签不区分巨细写，但通常保举使用小写。HTML5作为当前广泛使用的版本，引入了很多新的语义化标签，如<header>，<nav>，<article>，<footer>等，这些标签使得网页布局更加清晰，有利于搜刮引擎优化和网页可访问性的提升。
CSS通常与HTML一起使用，用于控制网页的布局和外观，而JavaScript则为网页添加交互性功能。尽管HTML主要用于内容布局，但它与CSS和JavaScript的联合使得互联网充满了丰富多彩、动态交互的网页体验。
完整代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>粒子爱心</title>
  8. </head>
  9. <style>
  10.   html,
  11.   body {
  12.     height: 100%;
  13.     padding: 0;
  14.     margin: 0;
  15.     background: #000;
  16.   }
  17.   img {
  18.     display: block;
  19.     margin: 0 auto;
  20.   }
  21.   label {
  22.     display: block;
  23.     margin: 0 auto;
  24.     color: pink;
  25.     font-size: 20px;
  26.     padding-right: 5px;
  27.     animation: mymove 2.5s infinite;
  28.     -webkit-animation: mymove 2.5s infinite;
  29.   }
  30.   @keyframes mymove {
  31.     50% {
  32.       font-size: 40px;
  33.     }
  34.   }
  35.   @-webkit-keyframes mymove {
  36.     50% {
  37.       font-size: 40px;
  38.     }
  39.   }
  40.   .middle {
  41.     width: 100%;
  42.     height: 100vh;
  43.     display: flex;
  44.     align-items: center;
  45.   }
  46.   .middle2 {
  47.     position: absolute;
  48.     z-index: 2;
  49.     width: 100%;
  50.     height: 100%;
  51.     margin: auto;
  52.     display: flex;
  53.     align-items: center;
  54.   }
  55. </style>
  56. <link rel="stylesheet" href="./style.css">
  57. <body>
  58.   <div class="middle">
  59.     <div class="middle2">
  60.     </div>
  61.     <img src="https://pic.imgdb.cn/item/642547f5a682492fcc15cd5d.gif" width="1000" height="650" />
  62.   </div>
  63. </body>
  64. </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流星雨
29HTML沙漏爱心30HTML爱心字母雨 写在末了

我是一只有趣的兔子，感谢你的喜好！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 IT评测·应用市场-qidao123.com技术社区 (https://dis.qidao123.com/) Powered by Discuz! X3.4