HTML 第九章作业

课后作业
1.CSS3 2D变形中有哪些变形方式？各自使用方法是什么？
(1)移动 translate(x, y):在2D平面内以X轴和Y轴为标准进行移动
(2)缩放 scale(x, y) :可以对元素进行水平/垂直方向的缩放
(3)旋转 rotate(x deg):对元素进行旋转，正值为顺时针，负值为逆时针
(4)transform-origin:调整元素转换变形的原点
(5)倾斜 skew(x deg, y deg):把元素水平方向上或向下倾斜
2.使用CSS3过渡实现的动画效果和使用animation属性实现的动画效果有什么区别？分别如何使用？
主要区别在于：transition需要触发一个事件才会随着时间改变其CSS属性；animation在不需要触发任何事件的情况下，也可以显式的随时间变化来改变元素CSS属性，达到一种动画的效果
过渡实现动画语法:transition: property duration timing-function delay;
animation属性实现动画:animation-name属性值：绑定动画名（@keyframes名）;
3.制作QQ彩贝高级搜索页面
HTML代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>QQ彩贝高级搜索</title>
	</head>
	<body>
		<div class="box">
			<h2>高级搜索</h2>
			<p><input class="text" type="search" placeholder="请输入关键字"></p> <input type="submit" value="搜索" id="input">
			<div class="nav">
				<select>
					<option>场合</option>
				</select>
				<select>
					<option>性别</option>
				</select>
				<select>
					<option>风格</option>
				</select>
				<select>
					<option>色系</option>
				</select>
				<select>
					<option>价格</option>
				</select>
				<select>
					<option>年龄</option>
				</select>
				<select>
					<option>季节</option>
				</select>
			</div>
		</div>
	</body>
</html>

CSS样式:

.box {
				border: 1px solid #CCCCCC;
				width: 250px;
				margin: 0px auto
			}
			
			#input {
				background-color: #CCCCCC;
				width: 70px;
				height: 30px;
				margin-left: 90px;
				margin-bottom: 15px;
			}
			
			.nav {
				width: 170px;
				margin-left: 35px;
				margin-bottom: 15px;
				display: none;
				animation: lyar 3s linear 1;
			}
			
			div h2 {
				margin-left: 15px;
				border-bottom: 6px red solid;
				padding-bottom: 12px;
				width: 210px;
			}
			
			select {
				width: 70px;
				height: 25px;
				margin-left: 10px;
				margin-bottom: 10px
			}
			.text{
				text-indent: 1em;
			}
			div p input {
				margin-left: 15px;
				width: 210px;
				height: 40px;
			}
			
			div:hover .nav {
				display: block;
			}
			
			@keyframes lyar {
				0% {
					opacity: 0;
					height: 0%;
				}
				10% {
					height: 20%;
					opacity: 0.1;
				}
				20% {
					height: 30%;
					opacity: 0.2;
				}
				30% {
					height: 50%;
					opacity: 0.3;
				}
				50% {
					height: 60%;
					opacity: 0.5;
				}
				70% {
					height: 80%;
					opacity: 0.7;
				}
				100% {
					height: 100%;
					opacity: 1;
				}
			}

4.制作百度糯米导航信息
HTML代码:

<!DOCTYPE html>

<html lang="en">

	<head>

		<meta charset="UTF-8">

		<title>百度糯米购物信息导航</title>

	</head>
	<body>

		<img src="img/img.bmp" />
		<div class="nav">

			<div><span>购物车</span><img src="img/toolbar_05.png"></div>

			<div><span>我的关注</span><img src="img/toolbar_10.png"></div>

			<div><span>我的足迹</span><img src="img/toolbar_15.png"></div>

			<div><span>我的消息</span><img src="img/toolbar_19.png"></div>

		</div>

	</body>

</html>

CSS样式:

.nav {
				position: fixed;
				top: 300px;
				right: 0;
			}
			.nav span {
				display: inline-block;
				border: solid 1px #B81914;
				border-radius: 5px;
				color: white;
				width: 90px;
				line-height: 36px;
				text-align: center;
				opacity: 0;
				background: #B81914;
				float: right;
				position: relative;
				left: 90px;
			}
			
			.nav div {
				margin-bottom: 5px;
				position: relative;
				left: 90px;
			}
			
			.nav img {
				background: black;
				padding: 10px 10px 10px 10px;
				border-radius: 5px;
			}
			
			@keyframes lyar {
				0% {
					opacity: 0;
					left: 0px;
				}
				25% {
					opacity: 0.25;
					left: -30px;
				}
				50% {
					opacity: 0.5;
					left: -60px;
				}
				100% {
					opacity: 1;
					left: -90px;
				}
			}
			
			.nav div:hover span {
				animation: lyar 0.1s linear both;
			}

5制作城市街景动画
HTML代码:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>街景动画</title>
		
	</head>

	<body>

		<div class="box1"><img src="街景img/groundBack.png" /></div>
		<div class="box2"><img src="街景img/groundFront.png" /></div>
		<div class="box3"><img src="街景img/groundFront.png" /></div>
		<div class="box4"><img src="街景img/groundFront.png" /></div>
		<div class="box5"><img src="街景img/groundMid.png" /></div>
		<div class="box"><img src="街景img/groundMid.png" /></div>
		<div class="box6"><img src="街景img/groundMid.png" /></div>
		<div class="box7"><img src="街景img/beans.png" /></div>
		<div class="box8"><img src="街景img/dowEventCenter.png" /></div>
		<div class="box9"><img src="街景img/friendshipShell.png" /></div>
		<div class="box10"><img src="街景img/Glockenspiel.png" /></div>
		<div class="box11"><img src="街景img/skyline.png" /></div>
		<div class="box12"><img src="街景img/skyline.png" /></div>
		<div class="box13"><img src="街景img/skyline.png" /></div>
		<div class="box14"><img src="街景img/Planetarium.png" /></div>
		<div class="box15"><img src="街景img/cloudSmall.png" /></div>
		<div class="box16"><img src="街景img/cloudMedium.png" /></div>
		<div class="box17"><img src="街景img/cloudLarge.png" /></div>
		<div class="box18"><img src="街景img/balloon.png" /></div>
		<div class="nav">
		</div>
	</body>
</html>

CSS样式:

* {
				margin: 0px auto;
				padding: 0px;
			}
			
			.nav {
				height: 780px;
				background: #212636;
				animation: name 15s ease-in-out infinite alternate;
			}
			
			@keyframes name {
				0% {
					background: #212636;
				}
				20% {
					background: #A68575;
				}
				40% {
					background: #F7CCB5;
				}
				60% {
					background: #DCECEC;
				}
				80% {
					background: #B4C0CE;
				}
				100% {
					background: #6D5E80;
				}
			}
			
			.box1 {
				position: absolute;
				top: 500px;
				z-index: 2;
			}
			
			.box2 {
				position: absolute;
				top: 480px;
				left: -350px;
				z-index: 12;
			}
			
			.box3 {
				position: absolute;
				top: 480px;
				left: 440px;
				z-index: 10;
			}
			
			.box4 {
				position: absolute;
				top: 480px;
				right: -100px;
				z-index: 10;
			}
			
			.box5 {
				position: absolute;
				top: 480px;
				right: 920px;
				z-index: 8;
			}
			
			.box6 {
				position: absolute;
				top: 480px;
				right: -20px;
				z-index: 8;
			}
			
			.box7 {
				position: absolute;
				top: 400px;
				right: 1000px;
				z-index: 1;
			}
			
			.box8 {
				position: absolute;
				top: 422px;
				left: 200px;
				z-index: 5;
			}
			
			.box9 {
				position: absolute;
				top: 320px;
				left: 380px;
				z-index: 8;
			}
			
			.box10 {
				position: absolute;
				top: 345px;
				left: 650px;
				z-index: 4;
			}
			
			.box11 {
				position: absolute;
				top: 475px;
				left: 0px;
				z-index: 1;
			}
			
			.box12 {
				position: absolute;
				top: 475px;
				left: 680px;
				z-index: 1;
			}
			
			.box13 {
				position: absolute;
				top: 495px;
				right: -50px;
				z-index: 1;
			}
			
			.box14 {
				position: absolute;
				top: 430px;
				right: 435px;
				z-index: 4;
			}
			
			.box15 {
				position: absolute;
				top: 140px;
				right: 600px;
				z-index: 4;
			}
			
			.box16 {
				position: absolute;
				top: 140px;
				right: 1000px;
				z-index: 4;
			}
			
			.box {
				position: absolute;
				top: 450px;
				right: -205px;
				z-index: 4;
			}
			
			.box17 {
				position: absolute;
				top: 140px;
				right: 1400px;
				z-index: 4;
			}
			
			.box18 {
				position: absolute;
				top: 150px;
				right: 130px;
				z-index: 5;
				transform: rotate(10deg);
				animation: noe 15s ease-in-out infinite alternate;
			}
			
			@keyframes noe {
				0% {
					transform: translate(0px) rotate(10deg);
				}
				20% {
					transform: translate(-240px) rotate(10deg);
				}
				40% {
					transform: translate(-480px) rotate(40deg);
				}
				60% {
					transform: translate(-720px) rotate(70deg);
				}
				80% {
					transform: translate(-960px) rotate(50deg);
				}
				100% {
					transform: translate(-1500px) rotate(10deg);
				}
			}

HTML 第九章 作业

猜你喜欢