day10 CSS布局6

杰瘦瘦

已于 2022-09-25 19:38:03 修改

阅读量97

点赞数

分类专栏：前端基础笔记文章标签：前端 css

于 2022-07-02 20:29:10 首次发布

本文链接：https://blog.csdn.net/m0_70619994/article/details/125471003

版权

前端基础笔记专栏收录该内容

32 篇文章 0 订阅

订阅专栏

一、空间转换

1、空间转换介绍

空间：是从坐标角度定义的。x、y和z三条坐标轴构成了一个立体空间，z轴位置与实现方向相同
空间转换也叫3D转换

2、空间位移

语法：

transform:translate3d(x,y,z);
transform:translateX(值);
transform:translateY(值);
transform:translateZ(值);

3、透视

语法：

perspective:值；
取值：像素单位数值，数值一般在800-1200之间
透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离

注意点：

属性（添加给父级）

作用：

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

4、空间旋转

语法：

按X轴进行旋转：transform:rotataX(值);
按Y轴进行旋转：transform:rotataY(值);
按Z轴进行旋转：transform:rotataZ(值);

小技巧：

左手法则：判断旋转方向：左手握住旋转轴，木质只想正值方向，手指弯曲方向为旋转正值方向

5、立体呈现

实现方法：

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

代码：

<!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;

            transform-style: flat;  /* 2D平面呈现 */

            /* 让子级处于真正的3d空间呈现 */
            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>

展示效果：当我们鼠标放在图像上面的时候就可以看到对应的立体效果了

6、空间缩放

语法：

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

注意点：

空间缩放是基于立方体的

二、动画

1、动画的介绍

动画的本质是快速切换大量图片时在人脑中形成的具有连续性的动画
构成动画的最小单元：帧或动画帧

过渡和动画的使用场景：

过渡只能实现2个状态间的变化过程
动画可以实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）

2、动画的使用

实现步骤：

（1）定义动画

定义动画有2种方式

2个动画

多个动画（其中百分比代表动画总时长的比例）

（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>
        .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;
            }
            30% {
                width: 500px;
                height: 300px;
            }
            100% {
                width: 800px;
                height: 500px;
            }
        }
        
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

3、动画属性

使用animation相关属性控制动画执行过程

代码：

<!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: skyblue;
            
            /* linear 速度曲线: 匀速 */
            animation: change 1s linear;

            /* 第二个时间表示延迟时间 */
            animation: change 1s 2s;

            /* 3:播放次数; infinite: 无限循环 */
            animation: change 1s 3;
            animation: change 1s infinite;

            /* alternate: 反向 */
            animation: change 1s infinite alternate;

            /* 播放完毕时的状态, 删除掉infinite alternate */

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

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

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

注意：

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

拆分属性：（一般直接写上面的复合属性）

其中animation-timing-function:step(N)；代表的是逐帧动画，在开发中一般配合精灵图来使用，可以将动画等分成N份

精灵动画制作步骤:

1.准备显示区域

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

2.定义动画

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

3.使用动画

添加速度曲线steps(N),N与精灵图上小图的个数相同
添加无线重复效果

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>精灵动画</title>
  <style>
    .box {
      /* 1680/12 */
      /***** 盒子的尺寸和一个精灵小图的尺寸是一样 */
      width: 140px;
      height: 140px;
      /* border: 1px solid #000; */
      background-image: url(./images/精灵图.png);

      /* steps(10) : 数字和精灵小图的个数是一样的 */
      animation: 
        run 2s steps(10) infinite,
        move 3s forwards
      ;
      /* animation: ; */
    }


    /* 定义动画: 让背景图向左移动 */
    @keyframes run {
      from {
        background-position: 0 0;
      }
      to {
        background-position: -1680px 0;
      }
    }

    /* 定义动画: 位移 */
    @keyframes move {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(600px);
      }
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

杰瘦瘦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
day10 CSS布局6

目录一、空间转换1、空间转换介绍2、空间位移3、透视4、空间旋转 5、立体呈现 6、空间缩放二、动画1、动画的介绍2、动画的使用3、动画属性语法：语法：注意点：作用：语法：小技巧：实现方法：代码：展示效果：当我们鼠标放在图像上面的时候就可以看到对应的立体效果了语法：注意点：过渡和动画的使用场景：实现步骤：（1）定义动画定义动画有2种方式（2）使用动画代码：3、动画属性使用animation相关属性控制动画执行过程代码：注意：拆分属性：（一般直接写上面的复合属性）其中ani
复制链接

扫一扫