移动Web(2)目标：使用steps实现逐帧动画使用animation添加动画效果空间缩放透视,使用立体呈现技巧实现3D导航效果

translate(-50%,-50%) scale(5);
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
    
    
            margin: 0;
            padding: 0;
        }

        li {
    
    
            list-style: none;
        }

        img {
    
    
            width: 100%;
        }

        .box {
    
    
            width: 249px;
            height: 210px;
            margin: 50px auto;
            overflow: hidden;
        }
        
        .box p {
    
    
            color: #3b3b3b;
            padding: 10px 10px 0 10px;
        }

        .box .pic {
    
    
            position: relative;
        }

        .box .pic::after {
    
    
            /* 播放按钮压在图片上面 - 居中 */
            position: absolute;
            left: 50%;
            top: 50%;
            /* margin-left: -29px;
            margin-top: -29px; */
            /* transform: translate(-50%, -50%); */

            content: '';
            width: 58px;
            height: 58px;
            background-image: url(./images/play.png);

            /* 大图 */
            transform: translate(-50%, -50%) scale(5);

            /* 透明,看不见 */
            opacity: 0;
            transition: all .5s;
        }

        /* lihover的时候,  谁变小pic::after */
        .box li:hover .pic::after {
    
    
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li>
                <div class="pic"><img src="./images/party.jpeg" alt=""></div>
                <p>【和平精英】“初火”音乐概念片：四圣觉醒......</p>
            </li>
        </ul>
    </div>
</body>
</html>

空间转换

transform属性实现元素再控件内的位移，旋转，缩放
l 空间：是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。
l 空间转换也叫3D转换
l 属性：transform
x,yz三条坐标轴构成了一个立体的控件，z轴位置与视线方向相同。
在这里插入图片描述
目标：使用translate实现元素空间位移效果
l 语法
l transform: translate3d(x, y, z);
l transform: translateX(值);
l transform: translateY(值);
l transform: translateZ(值);
l 取值（正负均可）
l 像素单位数值
l 百分比
像素单位数值，百分比
translateX,Y,Z();

透视

perspective,perspective,perspective,perspective
l 思考：生活中，同一个物体，观察距离不同，视觉上有什么区别？
Ø 答：近大远小、近清楚远模糊
l 思考：默认情况下，为什么无法观察到Z轴位移效果？
Ø 答：Z轴是视线方向，移动效果应该是距离的远或近，电脑屏幕是平面，默认无法观察远近效果
Z轴是视线方向移动效果应该是距离的元或者近，
l 属性（添加给父级）
Ø perspective: 值;
Ø 取值：像素单位数值，数值一般在800 – 1200。 l 作用
Ø 空间转换时，为元素添加近大远小、近实远虚的视觉效果
像素单位数值，数值一般在800-1200
l 属性（添加给父级）
Ø perspective: 值;
Ø 透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。
在这里插入图片描述
l 语法
Ø transform: rotateZ(值);
Ø transform: rotateX(值);
Ø transform: rotateY(值);
rotateZ,rotateX,rotateY
l 左手法则
Ø 判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向
l 拓展
Ø rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角度
Ø x，y，z 取值为0-1之间的数字
rotate3d(x,y,z，角度度数）；用来设置自定义旋转轴的位置以及旋转的角度

立体呈现

目标：使用transform-style: preserve-3d呈现立体图形
transform-style:perserve-3d
l 思考：使用perspective透视属性能否呈现立体图形？
l 答：不能，perspective只增加近大远小、近实远虚的视觉效果。
l 实现方法
Ø 添加 transform-style: preserve-3d; Ø 使子元素处于真正的3d空间
使得子元素处于真正的3d控件
l 呈现立体图形步骤

盒子父元素添加transform-style: preserve-3d；
按需求设置子盒子的位置（位移或旋转）
l 注意
Ø 空间内，转换元素都有自已独立的坐标轴，互不干扰
按照需求设置子盒子的位置，位移或者旋转，空间内，旋转元素都有自己独立的坐标轴互不干扰

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>空间位移</title>
  <style>
    .box {
    
    
      width: 200px;
      height: 200px;
      margin: 100px auto;
      background-color: pink;
      transition: all 0.5s;
    }

    .box:hover {
    
    
      /* transform: translate3d(50px, 100px, 200px); */
      transform: translateX(100px);
      transform: translateY(100px);
      transform: translateZ(100px);
    }
  </style>
</head>

<body>
  <div class="box"></div>
</body>

</html>

.box:hover{transform:translateX(100px);

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>透视效果</title>
  <style>
    body {
    
    
      perspective: 1000px;
      /* perspective: 200px; */
      /* perspective: 10000px; */
    }

    .box {
    
    
      width: 200px;
      height: 200px;
      margin: 100px auto;
      background-color: pink;
      transition: all 0.5s;
    }

    .box:hover{
    
    
      transform: translateZ(200px);
      /* transform: translateZ(-200px); */
    }
  </style>
</head>

<body>
  <div class="box"></div>
</body>

</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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>

perspective:100px;
.box img:hover{transform:rotateX(60deg);
transform:roatteX(-60deg);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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>

目标：使用立体呈现技巧实现3D导航效果

观察：绿色和橙色盒子是如何摆放
在这里插入图片描述
思考：绿色和橙色盒子是如何摆放的？
Ø 搭建立方体
Ø 绿色盒子是立方体的前面
Ø 橙色盒子是立方体的上面
结论：绿色和橙色部分共需要3个标签
l 1个父级标签
l 绿色和橙色共2个标签（子级）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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;
            
        }
        
        .cube div {
    
    
            position: absolute;
            left: 0;
            top: 0;
            width: 200px;
            height: 200px;
        }
        
        .front {
    
    
            background-color: orange;
            /* 向我走近200px */
            transform: translateZ(200px);
        }
        
        .back {
    
    
            background-color: green;
        }
        /* cube hover 为了看空间感效果 */
        
        .cube:hover {
    
    
            transform: rotateY(90deg);
        }
    </style>
</head>

<body>
    <div class="cube">
        <div class="front">前面</div>
        <div class="back">后面</div>
    </div>
</body>

</html>

transform-style:perserve-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;
        }
        
        .navs {
    
    
            width: 300px;
            height: 40px;
            margin: 50px auto;
        }
        
        .navs li {
    
    
            position: relative;
            float: left;
            width: 100px;
            height: 40px;
            line-height: 40px;
            transition: all .5s;
            transform-style: preserve-3d;

            /* 旋转: 让大家在写代码的过程中看到立体盒子 */
            /* transform: rotateX(-20deg) rotateY(30deg); */

            /* 测试缩放效果 */
            /* transform: scale3d(0.5, 1.1, 2); */
        }

        .navs li a {
    
    
            position: absolute;
            left: 0;
            top: 0;
            display: block;
            width: 100%;
            height: 100%;
            text-align: center;
            text-decoration: none;
            color: #fff;
        }
        
        .navs li a:first-child {
    
    
            background-color: green;
            transform: translateZ(20px);
        }
        
        .navs li a:last-child {
    
    
            background-color: orange;
            /* 躺平x轴旋转  立方体的顶部,位移z(确保看到这个盒子) */
            transform: rotateX(90deg) translateZ(20px);
        }

        /* li:hover 立方体旋转 */
        .navs li:hover {
    
    
            transform: rotateX(-90deg);
        }
    </style>
</head>

<body>
    <div class="navs">
        <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>

margin:50px auto;
实现思路

搭建立方体
l 调节a标签的位置
Ø a标签定位（子绝父相）
Ø 英文部分添加旋转和位移样式
Ø 中文部分添加位移样式
a标签定位，子绝负向，英文部分添加旋转和位移样式，中文部分添加位移样式

实现思路
过渡效果
l 鼠标滑过li，添加空间旋转样式
l li添加过渡属性
transform-style:perverse-3d;

transform:translateZ(20px);
transform:rotateX(90deg),translateZ(20);
调节a标签的位置:a标签定位，translateZ(20prx);
Z轴视线方向，向前移动
.navs li:hover{

空间缩放

目标：使用scale实现空间缩放效果
l 语法
Ø transform: scaleX(倍数);
Ø transform: scaleY(倍数);
Ø transform: scaleZ(倍数);
Ø transform: scale3d(x, y, z);
scale3d(X,Y,Z);

扫描二维码关注公众号，回复： 13761065 查看本文章

动画

目标：使用animation添加动画效果
l 思考：过渡可以实现什么效果？
l 答：实现2个状态间的变化过程
l 动画效果：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）
在这里插入图片描述

目标：使用animation添加动画效果

动画的本质是快速切换大量图片时在人脑中形成的具有连续性的画面
l 构成动画的最小单元：帧或动画帧
动画的本质使快速切换大量图片的时候在人脑当中形成的具有连续性的画面
在这里插入图片描述
@keyframes 动画名称{fron{} to{}}
@keyframes 动画名称{0%{}10%{} 15%{}100%{}}
animation动画名称动画花费时长

动画名称动画时长速度曲线，延迟事件，重复次数动画方向执行外币的状态
速度曲线延迟事件重复次数动画方向执行完毕的状态
在这里插入图片描述
duration
delay
fill-mode动画执行外币的时候状态
fill-mode动画执行完毕时候的状态,
animation-timing-function速度曲线steps（数字)逐帧动画
animation-iteration-count
animation-iterration-count
重复次数，infinite为无线循环
animation-diration动画执行方向alternate为反向
animation-play-state暂停动画paused为暂停

目标：使用steps实现逐帧动画

animation-timing-function
animation-timing-function速度曲线stps(数字）逐帧动画
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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变大到600 */
        /* @keyframes change {
            from {
                width: 200px;
            }
            to {
                width: 600px;
            }
        } */
        

        /* 二. 定义动画：200 到 500*300 到 800*500 */
        /* 百分比指的是动画总时长的占比 */
        @keyframes change {
    
    
            0% {
    
    
                width: 200px;
            }
            50% {
    
    
                width: 500px;
                height: 300px;
            }
            100% {
    
    
                width: 800px;
                height: 500px;
            }
        }
        
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

@keyframes chaneg{from{width:200px;}to{width:600px;}}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>animation复合属性</title>
    <style>
        .box {
    
    
            width: 200px;
            height: 100px;
            background-color: pink;
            /* animation: change 1s linear; */

            /* 分步动画 */

            /* 3: 重复3次播放 */
            /* animation: change 1s steps(3) 1s 3; */

            /* 无限循环 */
            /* animation: change 1s infinite alternate; */

            /* 默认值, 动画停留在最初的状态 */
            /* animation: change 1s backwards; */

            /* 动画停留在结束状态 */
            animation: change 1s forwards;
        }

        @keyframes change {
    
    
            from {
    
    
                width: 200px;
            }
            to {
    
    
                width: 600px;
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>