移动web第二章-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_51666153/article/details/144611342

B站《前端Web开发HTML5+CSS3+移动web视频教程》第十二天课程学习：空间转换、动画

一、空间转换

1.属性transform

①属性值
在这里插入图片描述
②取值（正负均可）
像素单位取值
百分比（参照盒子自身的计算结果）
因为电脑是平面的，默认状态下，无法观察到z轴的移动效果

2.视距perspective

①作用：指定观察者与z=0平面的距离，为元素添加透视效果
②透视效果：近大远小，近实远虚
③属性：perspective（添加给父级，取值范围800-1200）

3.空间旋转

（1）沿着Z轴旋转
transform：rotateZ（值）从电脑屏幕正面射出为正；
（2）沿着X轴旋转，沿着屏幕水平向右为正
transform：rotateX（值）；
（3）沿着Y轴旋转
transform：rotateY（值）垂直向下为正；
（4）左手法则：确定图片的旋转方向取值的正负
在这里插入图片描述

左手握住旋转轴，拇指指向正方向，其他四个手指弯曲方向为旋转正值方向
（5）rotate3d（x,y,z,角度数）：自定义旋转轴的位置以及旋转角度，x,y,z取值为0-10之间的数字

4.立体呈现—transform-style

（1）作用：设置元素的子元素是位于3D空间中还是平面中
（2）属性名：transform-style
（3）属性值：
①flat：子级处于平面中
②preserve-3d：子级处于3D空间
（4）实现步骤
①父级元素添加transform-style：preserve-3d；
②子级定位
③调整盒子的位置（位移或者旋转）

5.缩放

（1）属性：
在这里插入图片描述

二、动画animation

动画是加强版的过渡，动画实现多个状态间的变化过程，动画过程可控（重复播放、最终动画、是否暂停等）

1.动画的定义和使用

（1）定义
方法一：
只能实现两种状态之间的转换

@keyframes 动画名称 {
   from{动画当前的CSS}
   to {最终的动画CSS}
}

方法二：
实现多个状态的转换，百分比是指动画时长的百分比

@keyframes 动画名称 {
   0%{}
   10% {}
   ......
   100%{}
}

（2）使用
animation: 动画名称动画花费时间；

2.复合属性值

（1）animation: 动画名称动画时长速度曲线延迟时间重复次数动画方向执行完毕时状态
①部分速度曲线介绍
linear：匀速
steps（数值）：分步动画曲线，配合精灵图实现精灵动画

②重复次数值为infinite时，动画会一直重复，无限循环

③动画方向属性值为alternate时，动画方向是反向

④动画执行完毕时的状态：forwards（动画的最终状态）；backwards（动画的最初状态）
（2）提示：
动画名称和动画时长必须赋值
取值不分先后
如果有两个时间值，第一个时间表示动画时长，第二个时间表示延迟时间

3.animation拆分属性

在这里插入图片描述

4.逐帧动画

（1）核心原理：
①steps（）逐帧动画
②CSS精灵图
（2）制作步骤
①准备显示区域，盒子尺寸和一张精灵小图尺寸相同
②定义动画：移动背景图，移动距离=精灵宽度图
③使用动画：steps(N)，N与精灵小图个数相同
当动画的开始状态和盒子默认状态相同时，可以省略动画的开始状态

案例一：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>3D导航</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            list-style: none;
        }
        .nav ul {
            margin: 100px auto;
            width: 300px;
            display: flex;

        }
        .nav li {
            width: 100px;
            height: 40px;
            line-height: 40px;

            transform-style: preserve-3d;
            position: relative;
            /* 看到移动效果 */
            /* transform: rotateX(-20deg) rotateY(30deg); */
            transition: all 1s;
        }
        .nav li a {
            display: block;
            width: 100%;
            height: 100%;
            text-align: center;
            text-decoration: none;
            color: #fff;

            position: absolute;
            left: 0;
            top: 0;
        }
        .nav li a:first-child {
            /* 前面 */
            transform: translateZ(20px);
            background-color: green;
        }

        .nav li a:last-child {
            /* 后面 */
            transform: translateY(-50%) rotateX(90deg);
            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="#">Login</a>
            </li>
            <li>
                <a href="#">注册</a>
                <a href="#">Register</a>
            </li>
        </ul>
    </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>走马灯效果</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            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 5s 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>

案例三：精灵动画

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

    </div>
    
</body>
</html>