心形图案分享

HTML结构

        在HTML中创建一个用于容纳星星图案的<div>容器。

<div id="stars"></div>

CSS样式

        通过CSS设置背景颜色、隐藏溢出部分，并定义星星的样式和动画。

        1.设置所有元素的外边距和内边距为0，确保页面没有多余的空白。

        2.将body的背景颜色设置为黑色，并隐藏溢出部分。

        3.定义星星的样式，包括大小、位置、透明度和动画效果。

 /* 设置所有元素的外边距和内边距为0 */
        * {
            margin: 0;
            padding: 0;
        }

        /* 设置body元素的样式，隐藏溢出部分，背景色为黑色 */
        body {
            overflow: hidden;
            background-color: #000;
        }

        /* 定义sstar类的样式 */
        .sstar {
            width: 7px;
            height: 7px;
            position: absolute;
            overflow: hidden;
            opacity: 0;
            animation: fadeInOut 1.5s infinite;
        }

        /* 定义sstar类中img元素的样式 */
        .sstar img {
            position: absolute;
            width: 49px;
            height: 7px;
        }

        /* 定义fadeInOut关键帧动画，用于淡入淡出效果 */
        @keyframes fadeInOut {
            0% {
                opacity: 0;
            }

            50% {
                opacity: 1;
            }

            100% {
                opacity: 0;
            }
        }

 JavaScript逻辑

使用JavaScript生成心形图案的核心部分，包括创建星星元素、计算它们的位置和设置动画效果。

1. 创建心形图案函数： 定义一个createHeartPattern函数，用于生成心形图案。该函数接受几个参数：缩放比例、起始位置、容器ID、图片路径和动画延迟。

2. 绘制星星： 在函数内部，使用一个嵌套的drawStar函数来创建星星，并将它们添加到容器中。每个星星都是一个div元素，其中包含一个img元素显示星星图片。

3. 生成心形图案： 通过数学公式计算出心形图案中每个点的坐标，并调用drawStar函数在这些坐标处绘制星星。

function createHeartPattern(scale, startX, startY, containerId, imgSrc, animationDelay) {
            const num = 100; // 星星的数量
            const stars = document.querySelector(containerId); // 获取容器元素

            /* 绘制星星的函数 */
            function drawStar(x, y) {
                const star = document.createElement('div'); // 创建div元素
                star.classList.add('sstar'); // 添加sstar类
                star.style.top = y + 'px'; // 设置星星的位置
                star.style.left = x + 'px';
                stars.appendChild(star); // 将星星添加到容器中

                const img = document.createElement('img'); // 创建img元素
                img.src = imgSrc; // 设置img元素的src属性
                star.appendChild(img); // 将img元素添加到星星中
                play(img); // 调用play函数，执行动画
                if (animationDelay !== undefined) {
                    star.style.animationDelay = animationDelay; // 设置动画延迟
                }
            }

            /* 动画函数 */
            function play(ele) {
                let index = Math.floor(Math.random() * 7); // 随机生成一个初始索引
                setInterval(() => {
                    if (index < 7) {
                        ele.style.left = -index * 7 + 'px'; // 设置图片位置，实现动画效果
                        index++;
                    } else {
                        index = 0; // 重置索引
                    }
                }, 100);
            }

            /* 生成心形图案的函数 */
            function generatePattern() {
                const centerX = window.innerWidth / 2; // 计算中心位置的x坐标
                const centerY = window.innerHeight / 2; // 计算中心位置的y坐标

                for (let i = 0; i < num; i++) {
                    const t = Math.PI * 2 * i / num; // 计算角度
                    const x = 16 * Math.pow(Math.sin(t), 3); // 计算心形图案的x坐标
                    const y = 13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t); // 计算心形图案的y坐标

                    const posX = centerX + scale * x + startX; // 计算星星的最终x位置
                    const posY = centerY - scale * y + startY; // 计算星星的最终y位置

                    drawStar(posX, posY); // 绘制星星
                }
            }

            generatePattern(); // 生成图案
        }

成品展示

---

心形图案的参数方程如下：

其中，参数 t 范围[0,2π]，通过不同的 t 值来生成心形上的各个点。