移动Web 第二天-CSDN博客

本文链接：https://blog.csdn.net/haixs/article/details/126773834

空间转换

空间位移

空间是从坐标轴角度定义的。x、y和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。

/* 视距: 透视的距离, 加到父元素上, 一般是800px-1200px, 眼睛距屏幕的距离 */
            perspective: 1000px;

空间转换也叫3D转换

    //语法
    transform: translateX(200px);
     transform: translateY(200px);
     transform: translateZ(-200px);
     
     //取值 （正负均可）
     像素单位数值
     百分比
     
     /* translate3d(x,y,z) */
     transform: translate3d(200px, 200px, 200px);

空间转换

/* x轴旋转正值从下往上 */
            transform: rotateX(60deg);
/* y轴正值从左往右 */
            transform: rotateY(60deg);

左手法则

连写

            /* x y z 取值是0-1 */
            /* transform: rotate3d(x, y, z, 度数); */
            transform: rotate3d(1, 1, 0, 60deg);

立体呈现

呈现立体图形

transform-style: preserve-3d;

呈现立体图形步骤

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

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

    <style>
        .box {
            /* 添加给父元素,父元素里边的子元素处于3d空间 */
            transform-style: preserve-3d;
            position: relative;
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            margin: 100px auto;
            /* transform: rotateX(-30deg) rotateY(30deg); */
            transition: all 2s;
        }

        .box:hover {
            transform: rotateY(360deg);
        }

        .box div {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }

        .front {
            background-color: orange;
            z-index: 1;
        }

        .back {
            background-color: green;
            transform: translateZ(-200px);
        }
    </style>
</head>

<body>
    <div class="box">
        <!-- 前边的盒子 -->
        <div class="front">前边</div>
        <!-- 后边的盒子 -->
        <div class="back">后边</div>
    </div>
</body>

动画

动画的本质是快速切换大量图片时在人脑中形成的具有连续性的画面

构成动画的最小单元：帧或动画帧

步骤：

1.定义动画

2.使用动画

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

注意

动画名称和动画时长必须赋值取值不分先后顺序如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间速度曲线如右图所示：

动画属性

逐帧动画：帧动画。开发中、一般配合精灵图实现动画效果

animation-timing-function: steps(N); 将动画过程等分成N份

使用steps实现逐帧动画

精灵动画制作步骤

准备显示区域

设置盒子尺寸是一张小图的尺寸，背景图为当前精灵图

定义动画

改变背景图的位置（移动的距离就是精灵图的宽度）

使用动画

添加速度曲线steps（N），N与精灵图上小图个数相同添加无限重复效果

    <style>
        .box {
            /* 1.盒子尺寸是一张小图的尺寸 */
            width: 140px;
            height: 140px;
            border: 1px solid #000;
            background: url(./images/bg.png);
            /* 调用动画 
            3. stpes(n) 多少张小图,就分多少份
            */
            animation: sprite 1s infinite steps(12);
        }

        /* 定义动画 */
        @keyframes sprite {
            0% {
                /*2. 动画主要是背景图位置的变化 */
                background-position: 0 0;
            }

            100% {
                background-position: -1680px 0;
            }
        }
    </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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .box {
            overflow: hidden;
            width: 600px;
            height: 112px;
            border: 3px solid #000;
            margin: 100px auto;
        }

        .box li {
            float: left;
        }

        .box ul {
            width: 2000px;
            animation: move 5s infinite linear;
        }

        @keyframes move {
            0% {
                transform: translate(0);
            }

            100% {
                transform: translate(-1400px);
            }
        }

        .box img {
            width: 200px;
            height: 112px;
        }
    </style>
</head>

<body>
    <!-- .box>ul>li*7>img[src=./images/$.jpg] -->
    <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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html {
            /* html标签高度和视口高度相等 */
            height: 100%;
        }

        /* body高度和html相等, */
        body {
            height: 100%;
        }

        .travel {
            position: relative;
            /* div高度和body相等, body高度和html相等, html 视口相等 */
            height: 100%;
            background: url(./images/f1_1.jpg) no-repeat center top;
            /* 控制背景图片大小 
            cover 背景图片等比例缩放,  铺满盒子, 有可能显示不完整*/
            background-size: cover;
        }

        .travel img {
            position: absolute;
        }

        /* :nth-child(-n+3) 选择父元素里边前3个子元素图片 */
        .travel img:nth-child(-n+3) {
            animation: yun 1.2s infinite linear alternate;
        }

        .travel img:nth-child(1) {
            left: 27%;
            top: 4%;
        }

        .travel img:nth-child(2) {
            right: 17%;
            top: 10%;
            animation-delay: .4s;
        }

        .travel img:nth-child(3) {
            left: 18%;
            top: 22%;
            animation-delay: .8s;
        }

        @keyframes yun {
            0% {
                transform: translate(0);
            }

            100% {
                transform: translate(30px);
            }
        }

        .travel img:nth-child(4) {
            left: 24%;
            top: 25%;
            animation: san 1s infinite alternate linear;
        }

        @keyframes san {
            0% {
                transform: translate(0);
            }

            100% {
                transform: translate(0, 50px);
            }
        }

        .travel img:nth-child(5) {
            right: 30%;
            top: 18%;

        }

        .travel img:nth-child(6) {
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            animation: font 1s forwards;
        }

        @keyframes font {

            /* 百分比分配的是时间 */
            0% {
                transform: translate(-50%, -50%) scale(0.6);
            }

            20% {
                transform: translate(-50%, -50%) scale(1.2);
            }

            40% {
                transform: translate(-50%, -50%) scale(0.8);
            }

            60% {
                transform: translate(-50%, -50%) scale(1.3);
            }

            80% {
                transform: translate(-50%, -50%) scale(1.1);
            }

            100% {
                transform: translate(-50%, -50%) scale(1);
            }
        }

        /* :nth-child(n+7) 从最7个子元素到最后一个 */
        .travel img:nth-child(n+7) {
            bottom: 10%;
            width: 8%;
            animation: icon 1.2s infinite alternate linear;
        }

        @keyframes icon {
            0% {
                transform: translate(0);
            }

            100% {
                transform: translate(0, -30px);
            }
        }

        .travel img:nth-child(7) {
            left: 22%;
        }

        .travel img:nth-child(8) {
            left: 37%;
            animation-delay: 0.3s;
        }

        .travel img:nth-child(9) {
            left: 53%;
            animation-delay: 0.6s;
        }

        .travel img:nth-child(10) {
            left: 68%;
            animation-delay: 0.9s;
        }
    </style>
</head>

<body>
    <div class="travel">
        <img src="./images/yun1.png" alt="">
        <img src="./images/yun2.png" alt="">
        <img src="./images/yun3.png" alt="">
        <img src="./images/san.png" alt="">
        <img src="./images/lu.png" alt="">
        <img src="./images/font1.png" alt="">
        <img src="./images/1.png" alt="">
        <img src="./images/2.png" alt="">
        <img src="./images/3.png" alt="">
        <img src="./images/4.png" alt="">

    </div>
</body>

</html>