目录
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>
