目錄
1、空間-平移
2、視距
3、空間旋轉-Z軸
4、空間旋轉-X軸
5、空間旋轉-Y軸
6、立體呈現
7、案例-3D導航
8、空間-縮放
9、動畫-體驗
10、動畫-實現步驟
11、animation復合屬性
12、animation拆分寫法
13、案例-走馬燈
14、精靈動畫
15、多組動畫
16、案例-全面出游
1、空間-平移
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>空間-平移</title><style>.box {width: 200px;height: 200px;margin: 100px auto;background-color: pink;transition: all 0.5s;}.box:hover {/* 電腦是平面，默認無法觀察 Z 軸平移效果 *//* transform: translate3d(100px,200px,300px); *//* 3d 小括號里面必須逗號隔開三個數，否則平移不生效 *//* transform: translate3d(100px,200px); *//* 單個方向的移動 */transform: translateX(100px);transform: translateY(-100%);transform: translateZ(300px);}</style>
</head>
<body><div class="box"></div>
</body>
</html>2、視距
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>透視效果</title><style>/* 視距屬性必須添加給 直接父級 */.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>3、空間旋轉-Z軸
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>空間旋轉-Z軸</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>4、空間旋轉-X軸
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>空間旋轉-X軸</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>5、空間旋轉-Y軸
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>空間旋轉-Y軸</title><style>.box {width: 300px;margin: 100px auto;}img {width: 300px;transition: all 2s;}.box {/* 透視效果：近大遠小，近實遠虛 */perspective: 1000px;}.box img:hover {transform: rotateY(60deg);transform: rotateY(-60deg);}</style>
</head>
<body><div class="box"><img src="./images/hero.jpeg" alt=""></div>
</body>
</html>6、立體呈現
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>立體呈現</title><style>.cube {position: relative;width: 200px;height: 200px;margin: 100px auto;/* background-color: pink; */transition: all 2s;transform-style: preserve-3d;/* 旋轉與案例效果無關，用來看前來移動的效果 *//* transform: rotateY(89deg); */}.cube div {position: absolute;left: 0;top: 0;width: 200px;height: 200px;}.front {background-color: orange;transform: translateZ(100px);}.back {background-color: green;transform: translateZ(-100px);}.cube:hover {transform: rotateY(90deg);}</style>
</head>
<body><div class="cube"><div class="front">前面</div><div class="back">后面</div></div>
</body>
</html>7、案例-3D導航
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>3D導航</title><style>ul {margin: 0;padding: 0;list-style: none;}.nav {width: 300px;height: 40px;margin: 50px auto;}.nav ul {display: flex;}.nav li {position: relative;width: 100px;height: 40px;line-height: 40px;transition: all 0.5s;transform-style: preserve-3d;/* 為了看到橙色和綠色的移動過程，給立方體添加旋轉 *//* transform: rotateX(-20deg) rotateY(30deg); */}.nav li a {position: absolute;left: 0;top: 0;display: block;width: 100%;height: 100%;text-align: center;text-decoration: none;color: #fff;}/* 立方體每個面都有獨立的坐標軸，互不影響 */.nav li a:first-child {background-color: green;transform: translateZ(20px);}.nav li a:last-child {background-color: orange;transform: rotateX(90deg) translateZ(20px);}.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="#">Login</a></li><li><a href="#">注冊</a><a href="#">Register</a></li></ul></div></body>
</html>8、空間-縮放
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>空間-縮放</title><style>ul {margin: 0;padding: 0;list-style: none;}.nav {width: 300px;height: 40px;margin: 50px auto;}.nav ul {display: flex;}.nav li {position: relative;width: 100px;height: 40px;line-height: 40px;transition: all 0.5s;transform-style: preserve-3d;transform: scaleX(0.5);transform: scaleY(2);transform: scaleZ(3);transform: scale3d(0.5,2,3);}.nav li a {position: absolute;left: 0;top: 0;display: block;width: 100%;height: 100%;text-align: center;text-decoration: none;color: #fff;}/* 立方體每個面都有獨立的坐標軸，互不影響 */.nav li a:first-child {background-color: green;transform: translateZ(20px);}.nav li a:last-child {background-color: orange;transform: rotateX(90deg) translateZ(20px);}.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="#">Login</a></li><li><a href="#">注冊</a><a href="#">Register</a></li></ul></div></body>
</html>9、動畫-體驗
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>動畫-體驗</title><style>div {width: 100px;height: 100px;background-color: pink;animation: change 1s infinite alternate;}@keyframes change {0% {transform: translate(0);}100% {transform: translate(600px);}}</style>
</head>
<body><div></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>動畫-實現步驟</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>animation復合屬性</title><style>.box {width: 200px;height: 100px;background-color: pink;/* linear:勻速 */animation: change 1s linear;/* steps:分步動畫，工作中，配合精靈圖實現精靈動畫 */animation: change 1s steps(3);/* 如果有兩個時間，第一個是動畫時長，第二個是延遲時間 */animation: change 1s 2s;/* 重復次數，infinite:無限循環 */animation: change 1s 3;animation: change 1s infinite;/* alternate:反向 */animation: change 1s infinite alternate;/* 動畫執行完畢時的狀態，forwards:結束狀態；backwards:開始狀態(默認) */animation: change 1s forwards;animation: change 1s backwards;}/* 寬度從200變化到800 */@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>animation拆分寫法</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;}/* 寬度從200變化到800 */@keyframes change {0% {width: 200px;}100% {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>走馬燈</title><style>* {padding: 0;margin: 0;}li {list-style: none;}img {display: block;width: 200px;}.box {width: 600px;height: 112px;border: 5px solid #000;margin: 100px auto;overflow: hidden;}.box ul {display: flex;animation: move 6s infinite linear;}/* 定義位移動畫：ul使用動畫：鼠標懸停暫停動畫 */@keyframes move {0% {transform: translate(0);}100% {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>精靈動畫</title><style>div {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></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>多組動畫</title><style>div {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></div>
</body>
</html>16、案例-全面出游
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>全民出游</title><style type="text/css">* {margin: 0;padding: 0;}html,body {width: 100%;height: 100%;}.box {width: 100%;height: 100%;background: url('images/f1_1.jpg') no-repeat top center;background-size: cover;position: relative;}.cloud img {position: absolute;left: 50%;}.cloud img:nth-child(1) {top: 20px;margin-left: -260px;animation: cloud 2s linear infinite alternate;}.cloud img:nth-child(2) {top: 100px;margin-left: 380px;animation: cloud 2.5s linear infinite alternate;}.cloud img:nth-child(3) {top: 200px;margin-left: -560px;animation: cloud 3s linear infinite alternate;}.balloon {position: absolute;left: 50%;top: 20%;margin-left: -390px;animation: balloon 1.5s linear alternate infinite;}.giraffe {position: absolute;left: 50%;margin-left: 160px;top: 15%;}.text {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);animation: text 1s ease forwards;}.jump_text img {position: absolute;left: 50%;bottom: 42px;width: 100px;}.jump_text img:nth-child(1) {margin-left: -390px;animation: jump_text 0.8s infinite alternate;}.jump_text img:nth-child(2) {margin-left: -180px;animation: jump_text 0.8s 0.2s infinite alternate;}.jump_text img:nth-child(3) {margin-left: 35px;animation: jump_text 0.8s 0.4s infinite alternate;}.jump_text img:nth-child(4) {margin-left: 240px;animation: jump_text 0.8s 0.6s infinite alternate;}/* 白云動畫 */@keyframes cloud {0% {transform: translateX(0px);}100% {transform: translateX(40px);}}/* 熱氣球動畫 */@keyframes balloon {0% {transform: translateY(0px);}100% {transform: translateY(-30px);}}/* 跳動文字 */@keyframes jump_text {0% {transform: translateY(0px);}100% {transform: translateY(-30px);}}/* 文字 *//* 注意：因為transform是復合屬性，所以我們要重新申明一遍translate */@keyframes text {0% {transform: translate(-50%, -50%) scale(1);}20% {transform: translate(-50%, -50%) scale(0);}40% {transform: translate(-50%, -50%) scale(1.4);}70% {transform: translate(-50%, -50%) scale(0.8);}100% {transform: translate(-50%, -50%) scale(1);}}</style></head><body><div class="box"><!-- 白云 --><div class="cloud"><img src="images/yun1.png" /><img src="images/yun2.png" /><img src="images/yun3.png" /></div><!-- 熱氣球 --><div class="balloon"><img src="images/san.png" /></div><!-- 長頸鹿 --><div class="giraffe"><img src="images/lu.png" /></div><!-- 文字 --><div class="text"><img src="images/font1.png" /></div><!-- 跳動文字 --><div class="jump_text"><img src="images/1.png" /><img src="images/2.png" /><img src="images/3.png" /><img src="images/4.png" /></div></div></body>
</html>
