【希望之光】

最新推荐文章于 2024-08-20 18:04:12 发布

cv全粘工程师

最新推荐文章于 2024-08-20 18:04:12 发布

阅读量102

点赞数

分类专栏： css JS 文章标签：前端

本文链接：https://blog.csdn.net/Ge_Daye/article/details/128336778

版权

JS 同时被 2 个专栏收录

36 篇文章 0 订阅

订阅专栏

css

13 篇文章 1 订阅

订阅专栏

希望之光

效果就是从屏幕下方动态飘出希望之光如下图
在这里插入图片描述

具体代码如下，感兴趣的可以CV看一下，还是很不错的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>

	</body>
	<script>
		for (let i = 0; i < 200; i++) {
			const el = document.createElement('div');
			if(i > 50){
				el.classList.add('c')
			}else{
				el.classList.add('a')
			}
			
			el.style.cssText = `--duration:` + (Math.random() * 50 + 10)
			document.body.appendChild(el);
		}
		// let a = document.createElement("div")
		// a.classList.add("circle")
		// let countent = document.getElementById("countent");
		// countent.appendChild(a)
	</script>
	<style>
		body {
			background: #000000;
			min-height: 100vh;
			width: 100vm;
		}

		.c {
			width: 50px;
			height: 50px;
			border-radius: 50%;
			background: skyblue;
			box-shadow: 0px 0px 40px skyblue 
			0px 0px 140px skyblue;
			position: relative;
			margin: 0 5px;
			display: inline-block;
			animation: drawHeart 5s linear infinite;
			animation-duration: calc(600s / var(--duration));
		}

		.c:nth-of-type(even) {
			background: palevioletred;
			box-shadow: 0px 0px 40px palevioletred;
		}
		.a {
			width: 50px;
			height: 50px;
			border-radius: 50%;
			background: yellow;
			box-shadow: 0px 0px 40px yellow;
			 
			0px 0px 140px skyblue;
			position: relative;
			margin: 0 5px;
			display: inline-block;
			animation: drawHeart 5s linear infinite;
			animation-duration: calc(500s / var(--duration));
		}
		
		.a:nth-of-type(even) {
			background: white;
			box-shadow: 0px 0px 40px white;
		}

		@keyframes drawHeart {
			from {
				transform: translateY(100vh) scale(0);
			}

			to {
				transform: translateY(-100vh) scale(1);
			}
		}
	</style>
</html>