阶段二：移动Web网页开发资料（二）

1. 空间转换（了解）

1.1 坐标系

1.2 空间位移

语法

transform: translateX(值);
transform: translateY(值);
transform: translateZ(值);
transform: translate3d(x, y, z); 取值
像素
百分数（注意：z轴不能使用百分数）

1.3 透视

语法

perspective: 像素值（ 600px ~ 1000px ）；
一般给<body>添加作用
通过产生近大远小的视觉效果来间接地体现元素在z轴上的尺寸

<!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>1. 空间位移</title>
    <style>
        body {
            perspective: 50px;
        }
        div {
            width: 100px;
            height: 100px;
            background-color: aqua;
            margin: 20px auto;
            /* margin-bottom: 10px; */
            transition: all 0.5s;
        }
        .box1:hover {
            transform: translateX(400px);
        }
        .box2:hover {
            transform: translateY(400px);
        }
        .box3:hover {
            border-radius: 50%;
            transform: translateZ(200px);
        }
        .box4:hover {
            transform: translate3d(100px,200px,50px);
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
</body>
</html>

1.4 空间旋转

语法

transform: rotateZ(值);
transform: rotateX(值);
transform: rotateY(值); 拓展：
rotate3d(x, y, z, 角度度数)
x，y，z 取值为0-1之间的数字
作用是用来设置自定义旋转轴的位置 左手法则
判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向

<!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>1. 空间旋转</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: aqua;
            margin: 20px auto;
            transition: all 0.5s;
        }
        .box1:hover {
            transform: rotateX(60deg);
        }
        .box2:hover {
            transform: rotateY(60deg);
        }
        .box3:hover {
           transform: rotateZ(60deg);
        }
        .box4:hover {
            transform: rotate3d(0.5,1,1,60deg);
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
</body>
</html>

1.5 空间缩放

语法

transform: scaleX(倍数);
transform: scaleY(倍数);
transform: scaleZ(倍数);
transform: scale3d(x, y, z);

<!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>3. 空间缩放</title>
    <style>
        body {
            perspective: 100px;
        }
        div {
            width: 100px;
            height: 100px;
            background-color: aqua;
            margin: 20px auto;
            transition: all 0.5s;
        }

        .box1:hover {
            transform: scaleX(2);
        }

        .box2:hover {
            transform: scaleX(0.5);
        }

        .box3:hover {
            transform: scaleZ(1.5);
        }

        .box4:hover {
            transform: scale3d(0.5, 0.5, 3);
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
</body>

</html>

1.6 立体呈现

使用perspective透视属性能否呈现立体图形？

不能，perspective只增加近大远小、近实远虚的视觉效果。

立体呈现实现方法

添加 transform-style: preserve-3d;
使子元素处于真正的3d空间
默认值flat，表示所有子元素在2D平面呈现

呈现立体图形步骤

盒子父元素添加transform-style: preserve-3d；
按需求设置子盒子的位置（位移或旋转）注意

空间内，转换元素都有自已独立的坐标轴，互不干扰

<!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;
            /* perspective: 1000px; */
            transform-style: preserve-3d;
        }

        .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(180deg);
        }
    </style>
</head>

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

</html>

案例 - 3D导航

实现思路：

准备一个box盒子，在盒子里有两个子盒子，一个为绿色的”首页”，一个为橙色的”index”
利用子绝父相将绿色盒子和橙色盒子叠在一起
让橙色盒子沿着x轴旋转90deg
让橙色盒子沿着自己的z轴移动绿色盒子高度的一半
让绿色盒子沿着自己的z轴移动橙色盒子高度的一半
给这个box盒子设置transform-style: preserve-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>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }


        ul {
            margin: 100px auto;
            width: 300px;
            height: 40px;
        }

        ul li {
            position: relative;
            float: left;
            width: 100px;
            height: 40px;
            transition: all 1s;
            transform-style: preserve-3d;
            /* 旋转目的为了观察效果，案例完成后需要删除 */
            transform: rotateX(-20deg) rotateY(30deg);
        }

        ul li a {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            line-height: 40px;
            text-align: center;
            text-decoration: none;
            color: #fff;
        }

        ul li a:first-child {
            background-color: green;
            transform: translateZ(20px);
        }

        ul li a:last-child {
            background-color: orange;
            transform: rotateX(90deg) translateZ(20px);
        }

        ul li:hover {
            transform: rotateX(-90deg);
        }
    </style>
</head>

<body>
    <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>
</body>

</html>

效果图：

2. 动画（重点）

2.1 使用步骤

定义动画

        @keyframes 动画名称 {
            from {
                width: 100px;
            }
            to {
                width: 500px;
            }
        }

使用动画

        .box {
            width: 100px;
            height: 100px;
            background-color: pink;
            /* 使用动画 */
            animation-name: change;
            animation-duration: 5s;
        }

2.2 动画 - 提问

1. 动画的使用步骤？

定义动画
使用动画

2. 定义动画时有哪两种方式？

from {...}to{...}

 @keyframes Animation_name {
            from {
                width: 100px;
                background-color: chartreuse;
            }
            to {
                width: 500px;
                background-color: rgb(0, 238, 255);
            }
        }

百分数

 @keyframes change {
            /* 0% {
                width: 100px;
                height: 100px;
            } */

            25% {
                transform: translateX(400px);
            }
            50% {
                transform: translateX(400px) translateY(200px) scale(2);
            }
            75% {
                transform:translateY(200px) rotate(-45deg);
            }
        }

3. 动画序列里的%相对的是谁？

第一个

2.3 动画相关属性

语法:

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

值	说明
animation-name	指定要绑定到选择器的关键帧的名称
animation-duration	动画指定需要多少秒或毫秒完成
animation-timing-function	设置动画将如何完成一个周期
animation-delay	设置动画在启动前的延迟间隔。
animation-iteration-count	定义动画的播放次数。
animation-direction	指定是否应该轮流反向播放动画。
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-play-state	指定动画是否正在运行或已暂停。
initial	设置属性为其默认值。阅读关于 initial的介绍。
inherit	从父元素继承属性。阅读关于 initinherital的介绍。

2.4 案例 - 跑者

精灵动画制作步骤

准备显示区域
设置盒子尺寸是一张小图的尺寸，背景图为当前精灵图
定义动画
改变背景图的位置（移动的距离就是精灵图的宽度）
使用动画
添加速度曲线steps(N)，N与精灵图上小图个数相同
添加无限重复效果

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  <title>Document</title>
  <style>
    .box {
      width: 140px;
      height: 140px;
      overflow: hidden;
      animation: run 5s linear forwards;
    }

    @keyframes run {
      0% {}

      100% {
        transform: translateX(800px);
      }
    }

    img {
      animation: move 0.5s steps(8) infinite;
    }

    @keyframes move {
      0% {}

      100% {
        transform: translateX(-1120px);
      }
    }
  </style>
</head>

<body>
  <div class="box">
    <img src="./images/bg.png" alt="">
  </div>
</body>
<script>

</script>

</html>

效果图：

2.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>9. 跑马灯.html</title>
    <link rel="stylesheet" href="./less/9. 跑马灯.css">
</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>

移动Web网页开发资料（空间转换，动画）

阶段二：移动Web网页开发资料（二）

1. 空间转换（了解）

1.1 坐标系

1.2 空间位移

1.3 透视

1.4 空间旋转

1.5 空间缩放

1.6 立体呈现

使用perspective透视属性能否呈现立体图形？

立体呈现实现方法

呈现立体图形步骤

案例 - 3D导航

2. 动画（重点）

2.1 使用步骤

2.2 动画 - 提问

1. 动画的使用步骤？

2. 定义动画时有哪两种方式？

3. 动画序列里的%相对的是谁？

2.3 动画相关属性

2.4 案例 - 跑者

2.5 案例 - 走马灯

2.6 background-size

扩展

1. 怎么让浏览器没有滚动条？

2. 公共样式设置

3. 怎么让动画不同步

宁可枝头抱香死，何曾吹落北风中。