实训日记（一）html5 css 实现摩天轮

o(?v?)o

于 2021-07-21 19:40:08 发布

阅读量683

点赞数 2

本文链接：https://blog.csdn.net/qq_45691585/article/details/118974419

版权

这篇博客通过HTML5和CSS3展示了如何创建一个旋转的摩天轮动画效果。利用`@keyframes`实现元素的旋转，以及背景图片和定位技术来构建摩天轮及其车厢的视觉效果。博客内容详细解释了各个CSS样式的作用和动画原理。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
	body{
			background: url(./images/2.jpg) no-repeat;   /*背景*/
			z-index: -1;
		}
		/*旋转轮子和小车是相反的*/
	@keyframes zhuan{
		from{transform: rotate(0);}
		to{transform: rotate(360deg);}
	}
	@keyframes fanzhuan{
		from{transform: rotate(360deg);}
		to{transform: rotate(0);}
	}
		#box{
			width: 500px;
			height: 500px;
			margin: 0 auto 0;/*三个上 、左右、 下   四个上、右、下、左  
			两个上下、 左右    auto 居中*/
			background: url(images/a.png);/*摩天轮*/
			background-size: 100% 100%;
			animation: zhuan 10s linear infinite;
			position: relative;/*相对定位*/
			z-index: 2;
		}
		#box>img{
			width: 100px;
			height: 150px;
			position: absolute;/*绝对定位*/
			animation: fanzhuan 10s linear infinite;
			transform-origin: 50% 5%;/*或者top center  旋转焦点*/
		}
		#boxO{
		   width: 350px;
			height: 280px;
			top: 250px;
			left: 210px;
			background: url(images/d.png);/*架子前*/
			position: absolute;
			z-index: 3;
		}
		#boxI{
		   width: 350px;
			height: 280px;
			top: 250px;
			left: 260px;
			background: url(images/e.png);/*架子后*/
			position: absolute;
			z-index: 1;
		}
		#img1{
			left: 200px;
			top: 480px;
		}
		#img3{
			left: 20px;
			top: 365px;
		}
		#img4{
			left: 200px;
			top: 10px;
		}
		#img5{
			left: -20px;
			top: 200px;
		}
		#img6{
			left:70px;
			top: 50px;
		}
		#img7{
			left:350px;
			top: 50px;
		}
		#img8{
			left:390px;
			top: 340px;
		}
		#img9{
			left:420px;
			top: 200px;
		}
		#imgd{
			left: 200px;
			top: 250px;
			z-index: -1;

		}
	</style>
</head>
<body>
	<div id="box">
		<img src="images/1.png" id="img1">
		<img src="images/3.png" id="img3">
		<img src="images/4.png" id="img4">
		<img src="images/5.png" id="img5">
		<img src="images/6.png" id="img6">
		<img src="images/7.png" id="img7">
		<img src="images/8.png" id="img8">
		<img src="images/9.png" id="img9">
	</div>
	<div id="boxO">
		<span>
		<img src="images/d.png">
	</span>
	</div>
	<div id="boxI">
		<img src="images/e.png">
	</div>
</body>
</html>

o(?v?)o

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
实训日记（一）html5 css 实现摩天轮

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <style type="text/css"> body{ background: url(./images/2.jpg) no-repeat; /*背景*/ z-index: -1; } /*旋转轮子和小车是相反的*/ @keyframes zhuan.
复制链接

扫一扫