赵逸飞第九章作业20227821005

1.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>在html5中嵌入视频</title>
</head>
<body>
	<video src="D:\h资源\h资源\视频\1-twitter-2.mp4" controls="controls">浏览器不支持</video>
</body>
</html>

2.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>音频</title>
</head>
<body>
	<audio src="music/1.mp3" controls="controls">不支持audio标签</audio>
</body>
</html>

3.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS控制视频宽高</title>
	<link rel="stylesheet" type="text/css" href="D:\桌面\网页设计\7\3.css">
</head>
<body>
	<h2>视频布局样式</h2>
	<div>
		<p>占位色块</p>
		<video src="D:\h资源\h资源\视频\xunlangbot.com-1560397108850864128.mp4">不支持video</video>
		<p>占位色块</p>
	</div>
</body>
</html>

3.css

*{
		margin: 0;
		padding: 0;
	}
	div{
		width: 600px;
		height: 300px;
		border:1px solid #000;
	}
	video{
		width: 200px;
		height: 300px;
		background: #f90;
		float: left;
	}
	p{
		width: 200px;
		height: 300px;
		background: #999;
		float: left;
	}

4.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="D:\桌面\网页设计\7\4.css">
	<title>transition-property属性</title>
</head>
<body>
	<div>使用transition-property属性改变元素宽度</div>
</body>
</html>

4.css

div{
	width: 400px;
	height: 100px;
	background-color: orange;
	font-weight: bold;
	color: #fff;
}
div:hover{
	width: 700px;
	transition-duration: 5s;
}

5.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>transition-timing-funcion属性</title>
	<link rel="stylesheet" type="text/css" href="D:\桌面\网页设计\7\5.css">
</head>
<body>
	<div></div>
</body>
</html>

5.css

div{
	width: 424px;
	height: 406px;
	margin: 0 auto;
	background: url(D:\h资源\h资源\图\-2a57275c7d71ba15.jpg) center center no-repeat;
	border:5px solid #333;
	border-radius: 0px;
}
div:hover{
	border-radius: 105px;
	transition-property: border-radius;
	transition-duration: 1s;
	transition-timing-function: ease-in-out;
}

6.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>translate()方法</title>
	<style type="text/css">
	div{
	width: 100px;
	height: 50px;
	background-color: #0cc;
}
#div2{
	transform: translate(100px,30px);
}
	</style>
</head>
<body>
	<div>盒子1未平移</div>
	<div id="div2">盒子2平移</div>
</body>
</html>

7.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>skew()方法</title>
	<link rel="stylesheet" type="text/css" href="D:\桌面\网页设计\7\7.css">
</head>
<body>
	<div>盒子1倾斜</div>
	<div id="div2">盒子2未倾斜</div>
</body>
</html>

7.css

div{
	width: 100px;
	height: 50px;
	background-color: #0cc;
	border: 1px solid black;
}
#div2{
	transform: skew(30deg,10deg);
}

8.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>transform-origin属性</title>
	<link rel="stylesheet" type="text/css" href="D:\桌面\网页设计\7\8.css">
</head>
<body>
	<div id="div1">
		<div id="box1">更改</div>
		<div id="box2">未更改</div>
	</div>
</body>
</html>

8.css

#div{
	position: relative;
	width: 200px;
	height: 200px;
	margin: 100px auto;
	padding: 10px;
	border: 1px solid black;
}
#box1{
	padding: 20px;
	position: absolute;
	border: 1px solid black;
	background-color: red;
	transform: rotate(45deg);
	transform-origin: 20% 40%;
}
#box2{
	padding: 20px;
	position: absolute;
	border: 1px solid black;
	background-color: #ff0;
	transform: rotate(45deg);
}

9.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>rotateX()方法</title>
	<link rel="stylesheet" type="text/css" href="D:\桌面\网页设计\7\9.css">
</head>
<body>
	<div>元素旋转后的位置</div>
</body>
</html>

9.css

div{
	width: 250px;
	height: 50px;
	background-color: #ff0;
	border: 1px solid black;
}
div:hover{
	transition: all 1s ease 2s;
	transform: rotateX(60deg);
}

10.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>perspective熟悉</title>
	<<link rel="stylesheet" href="D:\桌面\网页设计\7\10.css">
</head>
<body>
	<div>
	<div class="div1">元素透视</div>
	</div>
</body>
</html>

10.css

div{
	width: 250px;
	height: 50px;
	border: 1px solid #666;
	perspective: 250px;
	margin: 0 auto;
}
.div1{
	width: 250px;
	height: 50px;
	background-color: #0cc;
}
.div1:hover{
	transition: all 1s ease 2s;
	transform: rotateX(60deg);
}

11.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>translate3D方法</title>
</head>
<body>
	<div>
		<img class="no1" src="" alt="1">	
		<img class="no2" src="" alt="2">
	</div>
</body>
</html>

11.css

div{
	width: 200px;
	height: 200px;
	border: 2px solid #000;
}
img{
	position: absolute;
	top: 0;
	left: 0;
	transform: translateZ(100px);
}
.no2{
	transform: rotateX(90deg) translateZ(100px);	
}
div:hover{
	transform:rotateX(-90deg);
}
div:visited
{
	transform: rotateX(-90deg);
	transition: all 1s ease 0s;
	transform-style: preserve-3d;
}

12.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>animation-duration</title>
	<<link rel="stylesheet" href="D:\桌面\网页设计\7\12.css">
</head>
<body>
	<div></div>
</body>
</html>

12.css

div{
	width: 200px;
	height: 200px;
	background-color: #000;
	animation-name: mymove;
	animation-duration: 5s;
}
@keyframes mymove{
	from{left: 0px; width: 200px;}
	to{left: 200px; width: 400px;}
}

html

css