9-1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>在HTML5中嵌入视频</title>
</head>
<body>
<video src="video/pian.mp4" controls="controls">浏览器不支持video标签</video>
</body>
</html>
9-2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>在HTML中嵌入音频</title>
</head>
<body>
<audio src="music/1.mp3" controls="controls">浏览器不支持audio标签</audio>
</body>
</html>
9-3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS控制视频的宽高</title>
<style type="text/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;
}
</style>
</head>
<body>
<h2>视频布局样式</h2>
<div>
<p>占位色块</p>
<video src="D:\视频\XG - GRL GVNG (Official Music Video) - 1.XG - GRL GVNG (Official Music Video)(Av487850951,P1).mp4" controls="controls">浏览器不支持video标签</video>
<p>占位色块</p>
</div>
</body>
</html>
9-4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transition-property属性</title>
<style type="text/css">
div{
width:400px;
height:100px;
background-color:orange;
font-weight:bold;
color:#FFF;
}
div:hover{
width: 700px;
-webkit-transition-property:width;
}
</style>
</head>
<body>
<div>使用transition-property属性改变元素宽度</div>
</body>
</html>
9-5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transition-timing-function属性</title>
<style type="text/css">
div{
width:424px;
height:406px;
margin:0 auto;
background:url(images/HTML5.png) center center no-repeat;
border:5px solid #333;
border-radius:0px;
}
div:hover{
border-radius:105px;
-webkit-transition-property:border-radius;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:ease-in-out;
</style>
</head>
<body>
<div></div>
</body>
</html>
9-6
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>translate()方法</title>
<style type="text/css">
div{
width:10px;
height:50px;
background-color:#0CC;
}
#div2{
transform:translate(100px,30px);
-webkit-transform:translate(100px,30px);
-moz-transform:translate(100px,30px);
}
</style>
</head>
<body>
<div>盒子1未平移</div>
<div id="div2">盒子2平移</div>
</body>
</html>
9-7
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>skew()方法</title>
<style type="text/css">
div{
width:100px;
height:50px;
background-color:#0CC;
border:1px solid black;
}
#div2{
transform:skew(30deg,10deg);
-webkit-transform:skew(30deg,10deg);
-moz-transform:skew(30deg,10deg);
}
</style>
</head>
<body>
<div>盒子1未倾倒</div>
<div id="div2">盒子2倾斜</div>
</body>
</html>
9-8
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transform-origin属性</title>
<style>
#div1{
position:relative;
width:200px;
height:200px;
margin:100px auto;
padding:10px;
border:1px solid black;
}
#box02{
padding:20px;
position:absolute;
border:1px solid black;
background-color:red;
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transform-origin:20% 40%;
-webkit-transform-origin:20% 40%;
}
#box03{
padding:20px;
position:absolute;
border:1px solid black;
background-color:#FF0;
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
}
</style>
</head>
<body>
<div id="div1">
<div id="box02"></div>
<div id="box03"></div>
</div>
</body>
</html>
9-9
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>rotateX()方法</title>
<style type="text/css">
div{
width:250px;
height:50px;
background-color:#FF0;
border:1px solid black;
}
div:hover{
transition:all 1s ease 2s;
-webkit-transition:all 1s ease 0s;
-moz-transition:all 1s ease 0s;
transform:rotateX(60deg);
-moz-transform:rotateX(60deg);
}
</style>
</head>
<body>
<div>元素旋转后的位置</div>
</body>
</html>
9-10
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>perspective属性</title>
<style type="text/css">
div{
width:250px;
height:50px;
border:1px solid #666;
perspective:250px;
margin:0 auto;
}
.div{
width:250px;
height:50px;
background-color:#0CC;
}
.div1:hover{
transition:all 1s ease 2s;
-webkit-transition:all 1s ease 0s;
-moz-transition:all 1s ease 0s;
transform:rotate(60deg);
-webkit-transition:rotate(60deg);
-moz-transition:rotate(60deg);
}
</style>
</head>
<body>
<div>
<div class="div1">元素透视</div>
</div>
</body>
</html>
9-11
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>translate3D()方法</title>
<style type="text/css">
div{
width:200px;
height:200px;
border:2px solid #000;
position: relative;
transition: all 1s ease 0s;
transform-style: preserve-3d;
}
img{
position: absolute;
top: 0;
left: 0;
transform: translateZ(100px);
}
.no2{
transform: rotateX(90deg); translateZ(100px);
}
div:hovre{
transform: rotateX(-90deg);
}
div:visited{
transform: rotateX(-90deg);
transition: all 1s ease 0s;
transform-style: preserve-3d;
}
</style>
</head>
<body>
<div>
<img class="no1" src="D:\图片\xg\微信图片_20231119133435.jpg" alt="1">
<img class="no2" src="images/2.png" alt="2">
</div>
</body>
</html>
9-12
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>animation-duration属性</title>
<style type="text/css">
img{
position:relative;
animation-name:mymove;
animation-duration:5s;
-webkit-animation-name:mymove;
-webkit-animation-duration:5s;
}
@keyframes mymove{
from {left:0px; width:200px;}
to {left:200px; width:400px;}
}
</style>
</head>
<body>
<img src="D:\图片\xg\微信图片_20231119133435.jpg">
</body>
</html>
6-13
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>animation-duration属性</title>
<style type="text/css">
img{
position:relative;
animation-name:mymove;
animation-duration:5s;
-webkit-animation-name:mymove;
-webkit-animation-duration:5s;
animation-iteration-count:2;
animation-direction:alternate;
-webkit-animation-iteration-count:2;
-webkit-animation-direction:alternate;
}
@keyframes mymove{
from {left:0px; width:200px;}
to {left:200px; width:400px;}
}
@-webkit-keyframes mymove{
from {left:0px; width:200px;}
to {left:200px; width:400px;}
}
</style>
</head>
<body>
<img src="D:\图片\xg\微信图片_20231119133439.jpg">
</body>
</html>
