空间转换、动画属性

基本上都要配合过度：transition: ; 使用

空间转换

目标：使用 transform 属性实现元素在空间内位移、旋转、缩放等效果（也叫3D转换）

参照如下：

空间位移属性

使用 translate 实现元素空间位移效果

语法：

div {
	transform: translate3d(x, y, z);
    
    transform: translateX(值: 数字+ px 、%);
    						正负值都可
 	transform: translateY(数字+ px 、百分比);
    
	 transform: translateZ();
}

透视

目标：使用 perspective 属性实现透视效果

属性：perspective ：（取值：数字+px）；（添加给父级）

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

空间旋转

目标：使用 rotate 实现元素空间旋转效果

语法如下：

.box {
            
            transform-style: preserve-3d;
            transition: preserve-3d;
        }

        .box:hover {
            transform: rotateX(90deg);
        }

拓展：

rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角度

x，y，z取值为0-1之间的数字

左手法则：

判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向

立体呈现

目标：使用 tranform-style：preserve3d；呈现立体图形

使用如下：

body {
		/*给父级添加透视环境*/
            perspective: 500px;
        }
        
        .box {
            perspective: 500px;
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px auto;

            transition: all 2s;
            /* 让子元素保持3d立体空间环境 */
            transform-style: preserve-3d;
        }
        .box:hover {
            transform: rotateY(60deg);
        }

空间缩放

目标：使用scale实现空间缩放效果

语法

div {
transform: scaleX(倍数); 

 transform: scaleY(倍数); 

 transform: scaleZ(倍数); 

 transform: scale3d(x, y, z);
}

动画

目标：使用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>Document</title>
    <style>
         /* animation: name duration timing-function delay iteration-count direction fill-mode; */
       /* animtion:动画名称、动画时长 速度曲线 延迟时间 、重复次数、动画方向 、执行完毕状态*/
        
        div {
            overflow: hidden;
            font-size: 20px;
            width: 0;
            height: 30px;
            background-color: pink;
            /* 让我们的文字强制一行内显示 */
            white-space: nowrap;
            /* steps 就是分几步来完成我们的动画 有了steps 就不要写 ease 或者 linear 了 */
            animation: w 4s steps(10) forwards;
        }
        /*动画定义*/
        @keyframes w {
            0% {
                width: 0;
            }
            100% {
                width: 200px;
            }
        }
    </style>
</head>
<body>
    <div>
        哦嘞哇DIO哒砸哇路躲
    </div>
</body>
</html>

动画属性

动画：steps实现步骤：如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>精灵动画</title>
  <style>
    .box {
      position: absolute;
      left: 0;
      width: 140px;
      height: 140px;
      background-image: url(./images/bg.png);
        
        /*使用动画*/
      animation: run 1s steps(12) infinite, 
      translate 3s linear forwards;
    }
 
     /* 定义动画*/
    @keyframes run {
      100% {
        background-position: -1680px 0;
      }
    }

    @keyframes translate {
      100% {
        left: 600px;
      }
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

移动端flex

百分比布局也叫流式布局

视口：

width=device-width：作用是设置视口宽度=设备宽度 initial-scale=1.0:作用设置缩放1倍(不变) maximum-scale=1.0：作用是设置最大缩放比为1

设置主轴水平对齐的是：center 设置父项为flex后，子项的变化有：可以直接设置宽度和高度 当父项设置flex后：子项可以使用定位，外边距，变换，不可用浮动

做网页时宽度是屏幕宽度的2倍，那是因为屏幕DPR是2，以2倍图的方式进行显示

分辨率分类

物理分辨率 ：是生产屏幕时就固定的，它是不可被改变的（硬件分辨率（出厂设置））

逻辑分辨率：是由软件（驱动）决定的（缩放调节的分辨率（软件设置））如下：

flex布局

目标：能够使用flex布局模型 灵活、快速 的开发网页

作用：

基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。

Flex布局非常适合结构化布局