HTML 第九章 作業
阿新 • • 發佈：2018-12-18
課後作業 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);
}
}