前端实训笔记6/09（1）

最新推荐文章于 2024-04-30 06:00:00 发布

只有一枝梧叶

最新推荐文章于 2024-04-30 06:00:00 发布

阅读量265

点赞数 1

本文链接：https://blog.csdn.net/qq_44735477/article/details/106654157

版权

今天的笔记分两次吧，今天先把作业的代码放上来。
作业是HTML+CSS做一个摩天轮，摩天轮的位置不会随着网页的缩放而改变。
效果图如下：在这里插入图片描述

HTML部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>摩天轮</title>
		<link rel="stylesheet" type="text/css" href="ferris-wheel.css"/>
	</head>
	<body>
		<div class="big-box">
			<div class="ferriswheel">
				<div class="people" id="person1"></div>
				<div class="people" id="person2"></div>
				<div class="people" id="person3"></div>
				<div class="people" id="person4"></div>
				<div class="people" id="person5"></div>
				<div class="people" id="person6"></div>
				<div class="people" id="person7"></div>
				<div class="people" id="person8"></div>
			</div>
			
			<div class="arrow"></div>
			<div class="big-title"></div>
			<div class="bracket"></div>
			<div class="small-bracket"></div>
			<div class="title"></div>
		</div>
	</body>
</html>

CSS部分

/*去除页面细小的边距*/
*{
	margin: 0px;
	padding: 0px;
}

/*设置背景*/
body{
	background-image: url(img/background.jpg);
	background-size: cover;
	/*background-position: center;*/
	background-repeat: no-repeat;
	
}
.big-box{
	width: 100%;
	height: 100%;
	position: relative;
	margin:0px auto;
	top: 0%;
	left: 0%;
}
/*设置转动的摩天轮*/
.ferriswheel{
	background-image: url(img/fsw.png);
	width: 768px;
	height: 768px;
	position: relative;
	top: 0%;
	left: 0%;
	margin:0px auto;
	animation: fsw-whirling 20s infinite linear;
}
@keyframes fsw-whirling{
	from{
		transform: rotate(0deg);
	}
	to{
		transform: rotate(360deg);
	}
}

/*设置小孩*/
.people{
	width: 130px;
	height: 170px;
	position: absolute;
	animation: peo-whirling 20s infinite linear;
	transform-origin: 50% 50%;
}
@keyframes peo-whirling{
	from{
		transform: rotate(0deg);
	}
	to{
		transform: rotate(-360deg);
	}
}
#person1{
	background-image: url(img/boy.png);
	top:0%;
	left:60%;
}
#person2{
	background-image: url(img/dog.png);
	top:20%;
	left: 80%;
}
#person3{
	background-image: url(img/girl.png);
	top: 60%;
	left: 80%;
}
#person4{
	background-image: url(img/girls.png);
	top:80%;
	left: 60%;
}
#person5{
	background-image: url(img/hairboy.png);
	top: 80%;
	left: 20%;
}
#person6{
	background-image: url(img/mimi.png);
	top: 60%;
	left: 0%;
}
#person7{
	background-image: url(img/mudog.png);
	top:20%;
	left: 0%;
}
#person8{
	background-image: url(img/shamegirl.png);
	top:0%;
	left: 20%;
}
/*设置其他*/
.arrow{
	width: 48px;
	height: 64px;
	background-image: url(img/arrow.png);
	background-size: cover;
	position: absolute;
	top:70%;
	left:50%;
	margin-left: -24px;
	margin-right: -24px;
}
.big-title{
	background-image: url(img/big-title.png);
	width: 577px;
	height: 257px;
	position: absolute;
	top: 30%;
	left: 50%;
	margin-left: -288.5px;
	margin-right: -288.5px;
	z-index: 1;
}
.bracket{
	background-image: url(img/bracket.png);
	width: 358px;
	height: 529px;
	position: absolute;
	top: 53%;
	left: 50%;
	margin-left: -179px;
	margin-right: -179px;
	z-index: 0;
}
.small-bracket{
	background-image: url(img/bracketsmall.png);
	width: 247px;
	height: 490px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -123.5px;
	margin-right: -123.5px;
	z-index: -1;
}
.title{
	background-image: url(img/title.png);
	width: 413px;
	height: 139px;
	position: absolute;
	top: 54%;
	left: 50%;
	margin-left: -206.5px;
	margin-right: -206.5px;
	z-index: 2;
}