实战摩天轮

最新推荐文章于 2021-03-28 20:25:53 发布

原创最新推荐文章于 2021-03-28 20:25:53 发布 · 2.2w 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css

摩天轮专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用CSS实现摩天轮效果，通过调整小人和摩天轮的位置，确保小人在旋转过程中保持垂直状态。

利用CSS来实现摩天轮，代码如下：

<!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:20px;
		}
		div img:nth-child(2){
			left:-30px;top:350px;
		}
		div img:nth-child(3){
			left:325px;bottom:-100px;
		}
		div img:nth-child(4){
			right:-30px;top:350px;
		}
		div img:nth-child(5){
			left:50px;top:120px;
		}
		div img:nth-child(6){
			right:50px;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/dog.png" alt="">
	</div>
	<audio autoplay loop src="aaa.mp3"></audio>
</body>
</html>