html摩天轮小案例

凑热闹分子

已于 2022-11-11 13:33:46 修改

阅读量883

点赞数 1

分类专栏： Web应用开发笔记文章标签： html 前端 css

于 2022-11-05 12:13:21 首次发布

本文链接：https://blog.csdn.net/qq_51704382/article/details/127699673

版权

Web应用开发笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

摩天轮小案例
摩天轮动画
先用内部样式来写
在这里插入图片描述
css先初始化
设置浏览器的内外边距，消除了浏览器的影响

div就是划分区域
伪类型器

在这里插入图片描述
摩天位置偏，调成中间
子绝父相

这样就转起来了：（后面的图都是旋转的）

ctrl+/：自动生成注释

默认层级是0
在这里插入图片描述

找到轮子的div写li，一个li表示一个小人

让小人一直保持头冲上的状态

其他的小人也添加上
其他的步骤一样

在这里插入图片描述

效果图：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			/* 通配选择器 */
			*{
				margin:0;
				padding:0;
				/* 设置所有的内外边距 */
			}
			body{
				background: url(img/2.jpg);
			}
			div:first-child{
				width: 768px;
				height:768px;
				background: url(img/fsw.png);
				/* 绝对定位 */
				position: absolute;
				left: 50%;
				/*左对齐显示50%的位置*/
				margin-left: -384px;
				/*左边距*/
				animation:zhuanquan 10s linear infinite;
				/*动画     动画名称   动画时长   线性变换    无限变化*/
				
			}
			/* 动画：@keyframs */
			@keyframes zhuanquan{
				from{transform: rotate(0deg);}
				to{transform: rotate(360deg);}
			}
			/*rotate:旋转	transform：变换方式		keyframes：关键帧*/
			/*一帧一帧变换：：角度是从0-365deg */
			div:nth-child(2){
				width: 247px;
				height: 490px;
				background: url(img/bracketsmall.png);
				/* 绝对定位 */
				position: absolute;
				left: 50%;
				margin-left: -123px;
				top:384px;
				/* 层级 */
				z-index: -1;
			}
			/* 设置共通的性质 */
			li{
				width: 130px;
				height:170px;
				/* 绝对定位 */
				position: absolute;
				/* 把无序列表的点去掉 */
				list-style-type: none;
				animation:ren 10s linear infinite;
				/*动画     动画名称   动画时长   线性变换    无限变化*/
				/* 设置旋转基点 */
				transform-origin: 50% 40%;
				
			}
			li:nth-child(1){ background: url(img/girl.png); left: 55px; top: 100px;}
			li:nth-child(2){ background: url(img/girls.png); left: 319px; top: 0px;}
			li:nth-child(3){ background: url(img/dog.png); left: 580px; top: 85px;}
			li:nth-child(4){ background: url(img/boy.png); left: 665px; top: 350px;}
			li:nth-child(5){ background: url(img/mimi.png); left: 0px; top: 350px;}
			li:nth-child(6){ background: url(img/mudog.png);left: 90px; top: 590px;}
			li:nth-child(7){ background: url(img/shamegirl.png); left: 327px; top: 685px;}
			li:nth-child(8){ background: url(img/hairboy.png); left: 590px; top:540px;}
			/* 动画：@keyframs */
			@keyframes ren{
				from{transform: rotate(0deg);}
				to{transform: rotate(-360deg);}
			}
			div:nth-child(3){
				width: 358px;
				height: 529px;
				background: url(img/bracket.png);
				/* 绝对定位 */
				position: absolute;
				left: 50%;
				margin-left: -179px;
				top:384px;
			}
			div:nth-child(4){
				width: 577px;
				height: 257px;
				background: url(img/big-title.png);
				/* 绝对定位 */
				position: absolute;
				left: 50%;
				margin-left: -288px;
				top:262px;
			}
			div:nth-child(5){
				width: 413px;
				height: 139px;
				background: url(img/title.png);
				/* 绝对定位 */
				position: absolute;
				left: 50%;
				margin-left: -206px;
				top:455px;
			}
			div:nth-child(6){
				width: 48px;
				height: 64px;
				background: url(img/arrow.png);
				/* 绝对定位 */
				position: absolute;
				left: 50%;
				margin-left: -24px;
				top:542px;
			}
			
			/* 设置共通的性质 */
		</style>
	</head>
	<body>
		<div>
			<ul>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</body>
</html>