文章目錄
- 01-空間-平移
- 02-視距
- 03-空間旋轉Z軸
- 04-空間旋轉X軸
- 05-空間旋轉Y軸
- 06-立體呈現
- 07-案例-3D導航
- 08-空間縮放
- 10-動畫實現步驟
- 11-animation復合屬性
- 12-animation拆分寫法
- 13-案例-走馬燈
- 14-案例-精靈動畫
- 15-多組動畫
- 16-全民出游
- 全民出游.html
- index.css
01-空間-平移
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{width: 200px;height: 200px;margin: 100px auto;background-color: pink;transition: all 0.5s;}.box:hover{transform: translate3d(100px,200px,300px);/* 不生效 *//* transform: translate3d(100px,200px); */transform: translateX(100px);transform: translateY(-100%);transform: translateZ(100px);}</style>
</head>
<body><div class="box"></div>
</body>
</html>
02-視距
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 視距屬性必須添加給直接父級 *//* 視距取值建議800-1200 */.father{perspective: 1000px;}.son{width: 200px;height: 200px;margin: 100px auto;background-color: pink;transition: all 0.5s;}.son:hover{transform: translateZ(-300px);transform: translateZ(300px);}</style>
</head>
<body><div class="father"><div class="son"></div></div>
</body>
</html>
03-空間旋轉Z軸
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{width: 300px;margin: 100px auto;}img{width: 300px;transition: all 2s;}.box img:hover{transform: rotateZ(360deg);}</style>
</head>
<body><div class="box"><img src="./images/hero.jpeg" alt=""></div>
</body>
</html>
04-空間旋轉X軸
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{width: 300px;margin: 100px auto;}img{width: 300px;transition: all 2s;}.box{/* 視覺效果：近大遠小，近實遠虛 */perspective: 1000px;}.box img:hover{transform: rotateX(60deg);transform: rotateX(-60deg);}</style>
</head>
<body><div class="box"><img src="./images/hero.jpeg" alt=""></div>
</body>
</html>
05-空間旋轉Y軸
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.body{width: 300px;margin: 100px auto;}img{width: 100%;}.body{perspective: 1000px;}.body:hover img{transform: rotateY(60deg);transform: rotateY(-60deg);}</style>
</head>
<body><div class="body"><img src="./images/hero.jpeg" alt=""></div>
</body>
</html>
<!-- 左手法則判斷旋轉角度的正負 -->
06-立體呈現
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.cube{/*2子絕父相*/position: relative;width: 200px;height: 200px;margin: 100px auto;/* background-color: pink; */transition: all 1s;/* 1添加此屬性可以讓父級成為立方體 */transform-style: preserve-3d;/* transform: rotateY(89deg); */}.cube div{position: absolute;top: 0;left: 0;width: 200px;height: 200px;}.front{transform: translateZ(100px);background-color: chocolate;}.back{transform: translateZ(-100px);background-color: blueviolet;}.cube:hover{transform: rotateY(90deg);}</style>
</head>
<body><div class="cube"><div class="front">前面</div><div class="back">后面</div></div>
</body>
</html>
07-案例-3D導航
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>ul{margin: 0;padding: 0;list-style: none;}.nav{/* 只有設置了寬高margin才會生效 */width: 300px;height: 40px;margin: 100px auto;}.nav ul{display: flex;}.nav li{/* display: flex; */position: relative;width: 100px;height: 40px;line-height: 40px;text-align: center;transition: all 0.5s;transform-style: preserve-3d;/* transform: rotateX(-20deg) rotateY(30deg); */}.nav li a{display: block;width: 100%;height: 100%;text-decoration: none;color: white;position: absolute;top: 0;left: 0;}.nav li a:first-child{transform: translateZ(20px);background-color: green;}.nav li a:last-child{ transform: rotateX(90deg) translateZ(20px); background-color: orange;}.nav li:hover{transform: rotateX(-90deg);}</style>
</head>
<body><div class="nav"><ul><li><a href="#">首頁</a><a href="#">index</a></li><li><a href="#">首頁</a><a href="#">index</a></li><li><a href="#">首頁</a><a href="#">index</a></li></ul></div>
</body>
</html>
08-空間縮放
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>ul{margin: 0;padding: 0;list-style: none;}.nav{/* 只有設置了寬高margin才會生效 */width: 300px;height: 40px;margin: 100px auto;}.nav ul{display: flex;}.nav li{/* display: flex; */position: relative;width: 100px;height: 40px;line-height: 40px;text-align: center;transition: all 0.5s;transform-style: preserve-3d;/* transform: rotateX(-20deg) rotateY(30deg); */transform: scaleX(0.5);transform: scaleY(2);transform: scaleZ(3);transform: scale3d(0.5,2,3);}.nav li a{display: block;width: 100%;height: 100%;text-decoration: none;color: white;position: absolute;top: 0;left: 0;}.nav li a:first-child{transform: translateZ(20px);background-color: green;}.nav li a:last-child{ transform: rotateX(90deg) translateZ(20px); background-color: orange;}.nav li:hover{transform: rotateX(-90deg);}</style>
</head>
<body><div class="nav"><ul><li><a href="#">首頁</a><a href="#">index</a></li><li><a href="#">首頁</a><a href="#">index</a></li><li><a href="#">首頁</a><a href="#">index</a></li></ul></div>
</body>
</html>
10-動畫實現步驟
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{width: 200px;height: 100px;background-color: pink;/* 使用動畫的語句 */animation: change 1s;}/* 動畫一：寬度從200到800 *//* @keyframes change{from{width: 200px;}to{width: 800px;}} *//* 動畫二：從200*100 變化到300*300 變化到800*500 *//* 百分比表示的是動畫時長的百分比 */@keyframes change {0%{width: 200px;height: 100px;}20%{width: 300px;height: 300px;}100%{width: 800px;height: 500px;}}</style>
</head>
<body><div class="box"></div>
</body>
</html>
11-animation復合屬性
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{width: 200px;height: 100px;background-color: pink;/* 勻速 */animation: change 1s linear;/* 分布動畫，一般用于配合精靈圖實現精靈動畫 */animation: change 1s steps(3);/* 如果有兩個時間，第一個時間是動畫時長，第二個是延遲時間 */animation: change 1s 2s;/* 重復次數測試 */animation: change 1s 3;animation: change 1s infinite;/* 動畫方向：反向 alternate */animation: change 1s infinite alternate;/* 執行完畢狀態 結束狀態 開始狀態*/animation: change 1s forwards;animation: change 1s backwards;animation: name duration timing-function delay iteration-count direction fill-mode;}@keyframes change {from{width: 200px;}to{width: 800px;}}</style>
</head>
<body><div class="box"></div>
</body>
</html>
12-animation拆分寫法
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{width: 200px;height: 100px;background-color: pink;/* 動畫名稱 */animation-name: change;/* 動畫時長 */animation-duration: 1s;/* 播放次數 */animation-iteration-count: infinite;}.box:hover{/* 鼠標懸停暫停動畫 */animation-play-state: paused;}@keyframes change {from{width: 200px;}to{width: 800px;}}</style>
</head>
<body><div class="box"></div>
</body>
</html>
13-案例-走馬燈
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>ul{padding: 0;margin: 0;list-style: none;}.box{margin: 100px auto;width: 600px;height: 112px;border: 5px solid black;overflow: hidden;}.box ul{display: flex;animation: move 6s linear infinite;}.box img{width: 200px;/* height: ; */}@keyframes move {from{transform: translate(0);}to{transform: translate(-1400px);} }.box:hover ul{animation-play-state: paused;}</style>
</head>
<body><div class="box"><ul><li><img src="./images/1.jpg" alt=""></li><li><img src="./images/2.jpg" alt=""></li><li><img src="./images/3.jpg" alt=""></li><li><img src="./images/4.jpg" alt=""></li><li><img src="./images/5.jpg" alt=""></li><li><img src="./images/6.jpg" alt=""></li><li><img src="./images/7.jpg" alt=""></li><!-- 讓顯示區域不露白 復制開頭的圖片到結尾 --><li><img src="./images/1.jpg" alt=""></li><li><img src="./images/2.jpg" alt=""></li><li><img src="./images/3.jpg" alt=""></li></ul></div>
</body>
</html>
14-案例-精靈動畫
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{width: 140px;height: 140px;border: 1px solid #000;background-image: url(./images/bg.png);animation: run 1s steps(12) infinite;}@keyframes run {from{background-position: 0 0;}to{background-position: -1680px 0;}}</style>
</head>
<body><div class="box"></div>
</body>
</html>
15-多組動畫
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{width: 140px;height: 140px;/* border: 1px solid #000; */background-image: url(./images/bg.png);animation: run 1s steps(12) infinite,move 3s forwards;}/* 當動畫開始狀態樣式跟盒子默認樣式相同，可以省略動畫開始狀態的代碼 */@keyframes run {/* from{background-position: 0 0;} */to{background-position: -1680px 0;} }@keyframes move{/* 0%{transform: translate(0);} */100%{transform: translate(800px);}}</style>
</head>
<body><div class="box"></div>
</body>
</html>
16-全民出游
全民出游.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./css/index.css">
</head>
<body><div class="cloud"><img src="./images/yun1.png" alt=""><img src="./images/yun2.png" alt=""><img src="./images/yun3.png" alt=""></div><div class="san"><img src="./images/san.png" alt=""></div><div class="shop"><img src="./images/1.png" alt=""><img src="./images/2.png" alt=""><img src="./images/3.png" alt=""><img src="./images/4.png" alt=""></div><div class="text"><img src="./images/font1.png" alt=""></div>
</body>
</html>
index.css
*{padding: 0;margin: 0;
}
html{height: 100%;
}
body{height: 100%;background: url(../images/f1_1.jpg) no-repeat center 0 / cover;
}
.cloud img{position: absolute;left: 50%;
}
.cloud img:nth-child(1){margin-left: -250px;top: 20px;animation: cloud 1s infinite alternate linear;
}
.cloud img:nth-child(2){margin-left: 400px;top: 100px;animation: cloud 1s 0.4s infinite alternate linear;
}
.cloud img:nth-child(3){margin-left: -550px;top: 200px;animation: cloud 1s 0.6s infinite alternate linear;
}
@keyframes cloud {100%{transform: translate(20px);}
}
.san img{position: absolute;left: 50%;margin-left: -400px;top: 150px;animation: san 1s infinite alternate linear;
}
@keyframes san {100%{transform: translateY(20px);}
}
.shop img{position: absolute;left: 50%;top: 750px;
}
.shop img:nth-child(1){margin-left: -400px;animation: san 1s infinite alternate linear 0.2s;
}
.shop img:nth-child(2){margin-left: -200px;animation: san 1s infinite alternate linear 0.4s;
}
.shop img:nth-child(3){margin-left: 0px;animation: san 1s infinite alternate linear 0.6s;
}
.shop img:nth-child(4){margin-left: 200px;animation: san 1s infinite alternate linear ;
}.text img{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);animation: text 1s;
}
/* 默認 小 大 小 默認 */
@keyframes text {0%{transform: translate(-50%,-50%) scale(1);}20%{transform: translate(-50%,-50%) scale(0.1);}40%{transform: translate(-50%,-50%) scale(1.5);}70%{transform: translate(-50%,-50%) scale(0.8);}100%{transform: translate(-50%,-50%) scale(1);}
}
)
)