首页 前端知识 HTML五彩缤纷的爱心

HTML五彩缤纷的爱心

2024-05-27 10:05:23 前端知识 前端哥 286 354 我要收藏

写在前面

小编准备了一个五彩缤纷的爱心,送给各位小美女们~

在桌面创建一个.txt文本文件,把代码复制进去,将后缀.txt改为.html,然后就可以双击运行啦!

HTML简介

HTML(超文本标记语言)是一种用于创建网页的标记语言。它描述了网页的结构和内容,并使用标记来定义文本、图像和其他元素的展示方式。HTML使用标签和属性来标记和组织网页的不同部分,如标题、段落、图片、链接等。这些标记和属性告诉浏览器如何显示网页的内容和布局。HTML是Web开发的基础,与CSS和JavaScript一起使用可以创建丰富的交互式网页。通过使用不同的标签和属性,开发者可以创建具有不同样式和功能的网页。HTML是一种可扩展的语言,可以根据需要添加自定义的标签和属性。

爱心代码

<!DOCTYPE html>
<html>

<head>
  <title>五彩缤纷的爱心</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      height: 100vh;
      background: #222;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    canvas {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    h1 {
      font-size: 50em;
      margin: 100px auto;
      animation: rainbow 5s ease-in-out infinite;
    }

    @keyframes rainbow {
      0% {
        color: #ff0000;
        text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000, 0 0 30px #ff0000;
      }

      25% {
        color: #ff8000;
        text-shadow: 0 0 10px #ff8000, 0 0 20px #ff8000, 0 0 30px #ff8000;
      }

      50% {
        color: #ffff00;
        text-shadow: 0 0 10px #ffff00, 0 0 20px #ffff00, 0 0 30px #ffff00;
      }

      75% {
        color: #00ff00;
        text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00, 0 0 30px #00ff00;
      }

      100% {
        color: #0000ff;
        text-shadow: 0 0 10px #0000ff, 0 0 20px #0000ff, 0 0 30px #0000ff;
      }
    }
</style>
</head>

<body>
  <canvas id="canvas"></canvas>
  <h1>❤</h1>
  <script>
    const canvas = document.getElementById("canvas");
    const ctx = canvas.getContext("2d");

    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    class TextElement {
      constructor(text, x, y, fontSize, color, dx = 0, dy = 0, speed = 1) {
        this.text = text;
        this.x = x;
        this.y = y;
        this.fontSize = fontSize;
        this.color = color;
        this.dx = dx;
        this.dy = dy;
        this.speed = speed;
      }

      draw() {
        ctx.font = `${this.fontSize}px Arial`;
        ctx.fillStyle = this.color;
        ctx.fillText(this.text, this.x, this.y);
      }

      update() {
        if (this.x > canvas.width || this.x < 0) {
          this.dx = -this.dx;
        }
        if (this.y > canvas.height || this.y < 0) {
          this.dy = -this.dy;
        }
        this.x += this.dx * this.speed;
        this.y += this.dy * this.speed;

      }
    }

    function init() {
      for (let i = 0; i < 99; i++) {
        const fontSize = Math.random() * 50 + 10;
        const text = '❤';
        const x = Math.random() * (canvas.width - fontSize * 2);
        const y = Math.random() * (canvas.height - fontSize * 2);
        const color = `hsla(${Math.random() * 360}, 100%, 50%, 0.8)`;
        const dx = Math.random() - 0.5;
        const dy = Math.random() - 0.5;
        const speed = Math.random() * 5 + 1;
        textElements.push(new TextElement(text, x, y, fontSize, color, dx, dy, speed));
      }
    }

    const textElements = [];

    init();
    function animate() {
      requestAnimationFrame(animate);
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      textElements.forEach((textElement) => {
        textElement.draw();
        textElement.update();
      });
    }
    animate();
</script>
</body>

</html>

代码分析

这段代码是一个HTML页面,用于创建一个精彩的爱心动画。整体上,它由HTML结构、CSS样式以及JavaScript脚本三部分组成:

1. HTML结构

   - 页面头部设置了`<title>`标签,标题为“五彩缤纷的爱心”。

   - 页面主体包含两个元素:一个`<canvas>`元素和一个`<h1>`元素。其中,`<canvas>`用于绘制图形,而`<h1>`中显示了一个爱心字符(❤)并应用了彩虹渐变动画。

2. CSS样式

   - 全局样式设置了整个body背景色为深灰色(#222),使其充满整个屏幕,并通过flex布局居中内容。

   - 对`<canvas>`元素进行了定位设置,使其铺满整个浏览器窗口。

   - 对`<h1>`元素设置了非常大的字体大小(50em),并应用了一个名为`rainbow`的关键帧动画,这个动画会每5秒循环一次,使爱心字符的颜色从红色渐变到橙色、黄色、绿色,最终变为蓝色,同时伴随着强烈的彩色阴影效果。

3. JavaScript脚本

   - 获取`<canvas>`元素并初始化其上下文(`2d`环境)以便进行绘画操作。

   - 设置画布尺寸与浏览器窗口相同。

   - 定义了一个名为`TextElement`的类,表示文本元素,具有位置、字体大小、颜色、速度和方向等属性,并定义了`draw()`和`update()`方法,分别用于在画布上绘制和更新该元素的位置。

   - `init()`函数负责初始化99个随机生成的爱心文本元素('❤'字符),这些元素的位置、大小、颜色、移动速度和方向都是随机产生的。

   - 创建一个空数组`textElements`来存储所有生成的文本元素。

   - 调用`init()`函数填充`textElements`数组。

   - 定义`animate()`函数,它利用`requestAnimationFrame`创建一个动画循环,每一帧都会清除画布,然后遍历并更新、重绘所有的文本元素。

   - 最后调用`animate()`函数启动动画循环。

综上所述,这段代码实现了一个动态网页,网页上有一个全屏的画布,在画布上有许多不同大小、颜色、速度和方向不断运动的爱心字符,与此同时,页面顶部还有一颗固定的大爱心字符呈现炫丽的彩虹渐变效果。

系列推荐

序号目录直达链接
1HTML实现3D相册HTML实现3D相册-CSDN博客
2HTML元素周期表HTML元素周期表-CSDN博客
3HTML黑客帝国字母雨https://want595.blog.csdn.net/article/details/138654054
4HTML五彩缤纷的爱心https://want595.blog.csdn.net/article/details/138654581
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

写在最后

我是一只有趣的兔子,感谢你的喜欢!

转载请注明出处或者链接地址:https://www.qianduange.cn//article/9706.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!