空间转换+动画

qq_40832034

已于 2023-02-20 13:22:03 修改

阅读量133

点赞数

文章标签：动画 css3 css

于 2022-05-10 14:47:38 首次发布

本文链接：https://blog.csdn.net/qq_40832034/article/details/124686206

版权

前端学习专栏收录该内容

37 篇文章 1 订阅

订阅专栏

一、空间转换

1、移动

空间：是从坐标轴角度定义的。
x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。
属性：transform
语法
transform: translate3d(x, y, z);
transform: translateX(值);
transform: translateY(值);
transform: translateZ(值);
取值（正负均可）
像素单位数值
百分比

z变换没有改变，是因为电脑平面，默认无法观察远近效果，属性perspective可以解决

透视效果

空间转换时，为元素添加近大远小、近实远虚的视觉效果

属性（添加给父级）
Ø perspective: 值;
Ø 取值：像素单位数值，数值一般在800 – 1200。

<style>
        body{
            perspective: 800px;
        }
        .box{
            width: 300px;
            height: 200px;
            background-color: aquamarine;
            transition: all .5s
            ;
        }
        .box:hover{
            transform:translateZ(200px) ;
        }
    </style>

<body>
    <div class="box">

    </div>
</body>

透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离

2、空间旋转

语法
Ø transform: rotateZ(值);
Ø transform: rotateX(值);
Ø transform: rotateY(值);
左手法则
判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向

<style>
        body{
            perspective: 800px;
        }
        .box{
            width: 300px;
            height: 200px;
            background-color: aquamarine;
            transition: all 2s;
        }
        .box:hover{
            transform:rotateY(-360deg);
        }
    </style>

<body>
    <div class="box">

    </div>
</body>

空间3d转换
Ø rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角度
Ø x，y，z 取值为0-1之间的数字

空间转换立体呈现

思考：使用perspective透视属性能否呈现立体图形？
答：不能，perspective只增加近大远小、近实远虚的视觉效果
实现方法
Ø 添加 transform-style: preserve-3d;
Ø 使子元素处于真正的3d空间
呈现立体图形步骤
1.盒子父元素添加transform-style: preserve-3d；
2.按需求设置子盒子的位置（位移或旋转）

注意，给要实现空间的盒子的父级添加 transform-style: preserve-3d;

案例空间转换立体呈现

案例导航结构转换

注意：
1、立方体旋转重要的是先要构建出立体的立方体，通过定位——旋转移动面完成，旋转一个面后，这个面的坐标轴就变了，z是看到该面的方向，之后位移都要根据新的坐标轴进行。

2、构建立方体完成后，对立方体添加hover标签就能实现立体转换。

3、空间缩放

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

二、动画

过渡只能实现两个状态之间的变化，动画可以实现多个状态间转换，并且动画过程可控（重复播放、最终画面、是否暂停）;
动画的本质是快速切换大量图片时在人脑中形成的具有连续性的画面
l构成动画的最小单元：帧或动画帧

1、实现步骤：

①、定义动画

两个状态：
多个状态：

②、使用动画
在这里插入图片描述

 <style>
        .div{
            width: 300px;
            height: 200px;
            background-color: aqua;
            animation: change 1s;
        }
        @keyframes change {
            0%{
                height: 200px;
            }
            20%{
                height: 300px;
            }    
            40%{
                background-color: pink;
            }   
            80%{
                width: 20px;
            }     
        }
    </style>

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

2、动画属性

① 复合写法
在这里插入图片描述

注意：
动画名称和动画时长必须赋值
取值不分先后顺序
如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间

② 拆分写法
在这里插入图片描述

3、补间动画、逐帧动画

补间：状态之间的改变是连续的
逐帧：状态之间的改变是改一个、停一下的。
逐帧的实现

开发中，一般配合精灵图实现动画效果

精灵动画制作步骤

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

<!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>
        .div{
            /* 设置盒子尺寸是一张小图的尺寸，背景图为当前精灵图 */
            width: 140px;
            height: 140px;
            background-image: url(./bg.png);
            /* 添加无限重复效果 */
            animation: move 1s infinite ;
             /* 添加速度曲线steps(N)，N与精灵图上小图个数相同 */
            animation-timing-function: steps(12);
        }
        @keyframes move{
            /* 改变背景图的位置（移动的距离就是精灵图的宽度） */
            from{
                background-position: 0 0;
            }
            to{
                background-position: 1680px 0;
            }
        }
    </style>
</head>
<body>
    <div class="div"></div>
</body>
</html>

单个元素多个动画的效果实现：

animation: 
            动画1,
            动画2
;

animation: 
            move 1s infinite steps(12), 
            run 3s forwards;

（小人可以跑出去）

案例走马灯

无缝动画，注意前后要连起来，否则会有空白。
在这里插入图片描述

<!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>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 600px;
            height: 112px;
            margin: 50px auto;
            border: 5px solid #000;   
            overflow: hidden;      
        }
        ul{
            /* 为了放下10张图 */
            width: 2000px;
            animation: move 8s infinite linear; 
        }
        ul li{
            float: left;
            list-style: none;
            width: 200px;
            height: 112px;
        }
        img{
            width: 100%;
        }
        @keyframes move{
            to{
                /* 这里只需移动整个一遍的长度即可 */
                transform: translateX(-1400px);
            }
        }
         /* 用户鼠标移入box,动画暂停，因为动画是加给ul的，所以后面要加上ul */
        .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>
            <!-- 第567移动的时候,显示区域不能留白 -->
            <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>

案例全民出游

1、如果父亲盒子没有给高度，只设置背景撑不开盒子，会显示height
为0 ，啥也看不见。在背景图覆盖整个浏览器的需求下，设置html到body一直到背景图的盒子的高度全为100%

html{
    height: 100%;
}
body{
    height: 100%;
}
.travel{
    margin: 0 auto;
    height: 100%;
    background: url(./images/f1_1.jpg) no-repeat center;
    background-size: cover;
}

2、想让图片放满盒子，考虑background-size属性，注意contain和cover的区别。
3、想在大图上放一个小图并动起来，只要先定位在定义并使用动画即可。