优秀的编程知识分享平台

网站首页 > 技术文章 正文

前端案例·程序员的浪漫:流星雨背景

nanyue 2024-10-24 11:48:52 技术文章 2 ℃

如果文章对你有收获，还请不要吝啬【点赞??收藏?评论?】三连哦，你的鼓励将是我成长助力之一！谢谢！

（1）方式1：简单版本

【1】先看实现效果

【2】再看完整代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<!-- 
	 CSS部分：
	 body设置为黑色背景，并隐藏溢出内容。
	 .meteor类定义了流星的样式，使用linear-gradient实现流星的渐变效果。
	 @keyframes meteor定义了流星从屏幕顶部移动到底部的动画，并逐渐消失。
	 
	 JavaScript部分：
	 createMeteor函数用于创建流星元素，并设置其初始位置和动画持续时间。
	 setInterval(createMeteor, 500)每隔500毫秒创建一个新的流星元素。
	 当流星动画结束时，使用animationend事件监听器将其从DOM中移除，以避免内存泄漏。
	 -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>流星雨特效</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background-color: #000;
        }

        .meteor {
            position: absolute;
            width: 2px;
            height: 100px;
            background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
            animation: meteor 1s linear infinite;
        }

        @keyframes meteor {
            0% {
                transform: translateY(-100px) rotate(-45deg);
                opacity: 1;
            }
            100% {
                transform: translateY(100vh) rotate(-45deg);
                opacity: 0;
            }
        }
    </style>
</head>
<body>
    <script>
        function createMeteor() {
            const meteor = document.createElement('div');
            meteor.className = 'meteor';
            meteor.style.left = Math.random() * window.innerWidth + 'px';
            meteor.style.animationDuration = Math.random() * 2 + 5 + 's';
            document.body.appendChild(meteor);

            meteor.addEventListener('animationend', () => {
                document.body.removeChild(meteor);
            });
        }

        setInterval(createMeteor, 500);
    </script>
</body>
</html>

（2）方式2：升级版本

【1】先看实现效果

【2】再看实现思路

  1. CSS部分：
    body设置为黑色背景，并隐藏溢出内容。.meteor类定义了流星的样式，使用linear-gradient实现流星的渐变效果。@keyframes meteor定义了流星从左上角移动到右下角的动画，并逐渐消失。
  2. JavaScript部分：
    createMeteor函数用于创建流星元素，并设置其初始位置和动画持续时间。setInterval(createMeteor, 500)每隔500毫秒创建一个新的流星元素。
  3. 当流星动画结束时，使用animationend事件监听器将其从DOM中移除，以避免内存泄漏。

【3】最后完整代码

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>流星雨特效</title>
		<!-- 
	 CSS部分：
	 body设置为黑色背景，并隐藏溢出内容。
	 .meteor类定义了流星的样式，使用linear-gradient实现流星的渐变效果。
	 @keyframes meteor定义了流星从左上角移动到右下角的动画，并逐渐消失。
	 
	 JavaScript部分：
	 createMeteor函数用于创建流星元素，并设置其初始位置和动画持续时间。
	 setInterval(createMeteor, 500)每隔500毫秒创建一个新的流星元素。
	 当流星动画结束时，使用animationend事件监听器将其从DOM中移除，以避免内存泄漏。
	 -->
		<style>
			body {
				margin: 0;
				overflow: hidden;
				background-color: #000;
			}

			.meteor {
				position: absolute;
				width: 2px;
				height: 100px;
				background: linear-gradient(to bottom right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
				animation: meteor 1s linear infinite;
			}

			@keyframes meteor {
				0% {
					/* 左上角 */
					transform: translate(0, 0) rotate(-45deg);
					opacity: 1;
				}

				100% {
					/* 右下角 */
					transform: translate(100vw, 100vh) rotate(-45deg);
					opacity: 0;
				}
			}
		</style>
	</head>
	<body>
		<script>
			// 控制流星的数量，避免随着时间越来越密集的出现流星
			let count = 30;
			function createMeteor() {
				const meteor = document.createElement('div');
				meteor.className = 'meteor';
				meteor.style.left = Math.random() * window.innerWidth + 'px';
				meteor.style.top = Math.random() * window.innerHeight + 'px';
				meteor.style.animationDuration = Math.random() * 2 + 3 + 's';
				count = document.body.children.length;
				if (count <= 30) {
					document.body.appendChild(meteor);
				}

				meteor.addEventListener('animationend', () => {
					document.body.removeChild(meteor);
				});
			}

			setInterval(createMeteor, 500);
		</script>
	</body>
</html>

（3）方式3：美化版本

【1】先看实现效果

【2】再看实现思路

  1. CSS部分：
    body设置为黑色背景，并隐藏溢出内容。.star类定义了星星的样式，使用border-radius实现圆形，并使用@keyframes twinkle实现星星闪烁的动画。.meteor类定义了流星的样式，使用linear-gradient实现流星的渐变效果。@keyframes meteor定义了流星从左上角移动到右下角的动画，并逐渐消失。
  2. JavaScript部分：
    createStar函数用于创建星星元素，并设置其初始位置和动画持续时间。createMeteor函数用于创建流星元素，并设置其初始位置和动画持续时间。setInterval(createMeteor, 500)每隔500毫秒创建一个新的流星元素。当流星动画结束时，使用animationend事件监听器将其从DOM中移除，以避免内存泄漏。
  3. 在页面加载时，创建100颗星星。


【3】最后完整源码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>流星雨与星光闪闪特效</title>
	<!-- 
	 CSS部分：
	 body设置为黑色背景，并隐藏溢出内容。
	 .star类定义了星星的样式，使用border-radius实现圆形，并使用@keyframes twinkle实现星星闪烁的动画。
	 .meteor类定义了流星的样式，使用linear-gradient实现流星的渐变效果。
	 @keyframes meteor定义了流星从左上角移动到右下角的动画，并逐渐消失。
	 
	 JavaScript部分：
	 createStar函数用于创建星星元素，并设置其初始位置和动画持续时间。
	 createMeteor函数用于创建流星元素，并设置其初始位置和动画持续时间。
	 setInterval(createMeteor, 500)每隔500毫秒创建一个新的流星元素。
	 当流星动画结束时，使用animationend事件监听器将其从DOM中移除，以避免内存泄漏。
	 在页面加载时，创建100颗星星。

	 -->
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background-color: #000;
            position: relative;
        }

        .star {
            position: absolute;
            width: 2px;
            height: 2px;
            background-color: #fff;
            border-radius: 50%;
            animation: twinkle 1s infinite alternate;
        }

        @keyframes twinkle {
            0% {
                opacity: 0.5;
            }
            100% {
                opacity: 1;
            }
        }

        .meteor {
            position: absolute;
            width: 2px;
            height: 100px;
            background: linear-gradient(to bottom right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
            animation: meteor 1s linear infinite;
        }

        @keyframes meteor {
            0% {
                transform: translate(0, 0) rotate(-45deg);
                opacity: 1;
            }
            100% {
                transform: translate(100vw, 100vh) rotate(-45deg);
                opacity: 0;
            }
        }
    </style>
</head>
<body>
    <script>
        function createStar() {
            const star = document.createElement('div');
            star.className = 'star';
            star.style.left = Math.random() * window.innerWidth + 'px';
            star.style.top = Math.random() * window.innerHeight + 'px';
            star.style.animationDuration = Math.random() * 2 + 1 + 's';
            document.body.appendChild(star);
        }

        function createMeteor() {
            const meteor = document.createElement('div');
            meteor.className = 'meteor';
            meteor.style.left = Math.random() * window.innerWidth + 'px';
            meteor.style.top = Math.random() * window.innerHeight + 'px';
            meteor.style.animationDuration = Math.random() * 2 + 1 + 's';
            document.body.appendChild(meteor);

            meteor.addEventListener('animationend', () => {
                document.body.removeChild(meteor);
            });
        }

        // 创建星星
        for (let i = 0; i < 100; i++) {
            createStar();
        }

        // 创建流星
        setInterval(createMeteor, 500);
    </script>
</body>
</html>


如果文章对你有收获，还请不要吝啬【点赞??收藏?评论?】三连哦，你的鼓励将是我成长助力之一！谢谢！

Tags：

猜你喜欢

最近发表
标签列表