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生成心形图案的核心部分,包括创建星星元素、计算它们的位置和设置动画效果。
-
创建心形图案函数: 定义一个
createHeartPattern
函数,用于生成心形图案。该函数接受几个参数:缩放比例、起始位置、容器ID、图片路径和动画延迟。 -
绘制星星: 在函数内部,使用一个嵌套的
drawStar
函数来创建星星,并将它们添加到容器中。每个星星都是一个div
元素,其中包含一个img
元素显示星星图片。 -
生成心形图案: 通过数学公式计算出心形图案中每个点的坐标,并调用
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 值来生成心形上的各个点。