2018/1/22 日小结
今日所学：
1. 如何在自己的网页中放入自己定义的字体，而不是设备本身带有的字体（以后字体可以根据客户提供.ttf文件编写）：
定义时：
@font-face { font-family: 'MyNewFont'; /*字体名称*/ src: url('font.ttf'); /*字体源文件*/ }
引用时：
font-family: 'MyNewFont',Wawati SC,FZYaoti,Microsoft YaHei;
下载的字体安装包.ttf文件（网上有很多，可根据审美观自行下载）
2. 学做了一个简单的3D轮播图
代码段：
<!DOCTYPE
html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport"content="width=device-width,initial-scale=1,minimum-scale=1, maximum-scale=1, user-scalable=no"
/>
<title></title>
<style>
body{
background-color:black;
}
*{
margin:
0;
padding:
0;
}
#main img{
width:200px;
height:
300px;
position:
absolute;
border:5px gray double;
}
#main img:nth-child(1){
transform:
translateZ(500px);
}
#main img:nth-child(2){
transform:
rotateY(40deg)
translateZ(500px);
}
#main img:nth-child(3){
transform:
rotateY(80deg)
translatez(500px);
}
#main img:nth-child(4){
transform:
rotateY(120deg)
translatez(500px);
}
#main img:nth-child(5){
transform:
rotateY(160deg)
translatez(500px);
}
#main img:nth-child(6){
transform:
rotateY(200deg)
translatez(500px);
}
#main img:nth-child(7){
transform:
rotateY(240deg)
translatez(500px);
}
#main img:nth-child(8){
transform:
rotateY(280deg)
translatez(500px);
}
#main img:nth-child(9){
transform:
rotateY(320deg)
translatez(500px);
}
#main{
margin:
100px auto;
width:
300px;
height:
400px;
transform-style:
preserve-3d;
transform:
rotateX(-10deg);
animation-name:
animate;
animation-duration:
20s;
animation-iteration-count:
infinite;
animation-timing-function:
linear;
position:
relative;
}
@keyframes animate{
0%{
transform:
rotateX(-10deg)
rotateY(0deg)
;
}
100%{
transform:
rotateX(-10deg)
rotateY(360deg)
;
}
}
</style>
</head>
<body>
<div id="main">
<img src="imgs/1.jpg"/>
<img src="imgs/2.jpg"/>
<img src="imgs/3.jpg"/>
<img src="imgs/4.jpg"/>
<img src="imgs/5.jpg"/>
<img src="imgs/6.jpg"/>
<img src="imgs/7.jpg"/>
<img src="imgs/8.jpg"/>
<img src="imgs/9.jpg"/>
</div>
<div style="padding-left:
300px;padding-bottom:
10px;padding-right:20px;">
<input style="border:1px solid dimgray;
margin-left: -10px;
color:
white; outline:none;
width:
80px;height:
35px;background-color:
dimgray;border-radius:30%;"
type="button"
onclick="ff()"
value="看完了">
<script>
function ff() {
window.location.href="5.html";
}
</script>
</div>
<audio src="music/3.mp3"
autoplay="autoplay"
loop="loop"></audio>
</body>
</html>
展示效果：