摩天轮-position+animation_摩天轮社区-优快云博客

本文链接：https://blog.youkuaiyun.com/DcTbnk/article/details/104742052

本博客介绍了一个使用HTML、CSS和动画技术创建的幸福摩天轮网页设计案例，详细展示了如何通过定位、背景图片和动画关键帧实现动态效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

moti

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{margin:0;padding:0;}
		body,html{height:100%;}
		body{background: url(images/2.jpg) no-repeat ;background-size:100% 100%;}
		img{display:block;}
		section{
			width:768px;height:768px;
			position: fixed;left:0;right:0;top:0;bottom:0;margin:auto;
			background:url(images/bracket.png) no-repeat center 384px; /* 摩天轮支架 */
		}
		section img:first-of-type{animation: rotateYuan 20s linear infinite;}
		section img:nth-of-type(2){
			position:fixed;left:0;top:0;right:0;bottom:0;margin:auto;
		}
		div{
			width:768px;height:768px;
			position:fixed;left:0;right:0;top:0;bottom:0;margin:auto;
			animation: rotateYuan 20s linear infinite;
		}
		div img{
			position:absolute;
			animation: rotateChild 20s linear infinite;
			transform-origin:50% 0;
		}
		div img:first-child{left:325px;top:30px;}
		div img:nth-child(2){left:-30px;top:350px;}
		div img:nth-child(3){left:325px;bottom:-150px;}
		div img:nth-child(4){right:-30px;top:350px;}
		div img:nth-child(5){left:54px;top:120px;}
		div img:nth-child(6){right:54px;top:120px;}
		div img:nth-child(7){left:54px;top:620px;}
		div img:nth-child(8){right:54px;top:620px;}
		@keyframes rotateYuan{
			0%{transform: rotate(0)}
			50%{transform: rotate(180deg)}
			100%{transform: rotate(360deg)}
		}
		@keyframes rotateChild{
			0%{transform: rotate(0)}
			50%{transform: rotate(-180deg)}
			100%{transform: rotate(-360deg)}
		}
	</style>
</head>
<body>
	<section>
		<!-- 摩天轮圆圈 -->
		<img src="images/fsw.png" alt="">
		<!-- 幸福摩天轮文字 -->
		<img src="images/big-title.png" alt="">
	</section>
	<div>
		<img src="images/boy.png" alt="">
		<img src="images/girl.png" alt="">
		<img src="images/girls.png" alt="">
		<img src="images/hairboy.png" alt="">
		<img src="images/mimi.png" alt="">
		<img src="images/dog.png" alt="">
		<img src="images/mudog.png" alt="">
		<img src="images/shamegirl.png" alt="">
	</div>
	<audio autoplay loop src="aaa.mp3"></audio>
</body>
</html>