前端实训笔记6/09(1)

今天的笔记分两次吧,今天先把作业的代码放上来。
作业是HTML+CSS做一个摩天轮,摩天轮的位置不会随着网页的缩放而改变。
效果图如下:前端实训笔记6/09(1)_第1张图片

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;
}

你可能感兴趣的:(前端实训笔记6/09(1))