以下是一个简单的粒子爱心代码示例:

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>粒子爱心</title>
	<style>
		#container {
			position: relative;
			width: 300px;
			height: 300px;
			margin: 50px auto;
			background-color: #f0f0f0;
		}
		.heart {
			position: absolute;
			width: 10px;
			height: 10px;
			background-color: #ff6666;
			border-radius: 50%;
			animation: animateHeart 1s ease-out infinite;
		}
		.heart:nth-child(1) {
			animation-delay: 0.5s;
		}
		.heart:nth-child(2) {
			animation-delay: 1s;
		}
		.heart:nth-child(3) {
			animation-delay: 1.5s;
		}
		.heart:nth-child(4) {
			animation-delay: 2s;
		}
		.heart:nth-child(5) {
			animation-delay: 2.5s;
		}
		@keyframes animateHeart {
			0% {
				top: 0;
				left: 0;
			}
			50% {
				top: -20px;
				left: 20px;
				transform: rotate(45deg);
			}
			100% {
				top: 0;
				left: 0;
			}
		}
	</style>
</head>
<body>
	<div id="container">
		<div class="heart"></div>
		<div class="heart"></div>
		<div class="heart"></div>
		<div class="heart"></div>
		<div class="heart"></div>
	</div>
</body>
</html>

解释:

  1. 创建一个包含五个粒子爱心的容器。
  2. 使用绝对定位,将每个粒子放置在容器内的不同位置。
  3. 使用动画将每个粒子向上移动,同时旋转45度,然后返回原始位置。

你可以根据需要调整容器大小、粒子数量和动画效果


原文地址: https://www.cveoy.top/t/topic/c0Dr 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录