CSS动画 和amp;和amp; Flex弹性布局 和amp;和amp; Less

一、过渡效果

1.  
   /* 指定执行过渡的属性，属性的值必须从一个确定值，指向了另一个确定值且值不能是auto */
2.  
   transition-property: width, height;
3.  
    
4.  
   /* 执行过渡的持续时间 */
5.  
   transition-duration: 2s;
6.  
    
7.  
   /* 过渡效果的延迟 延迟几秒后再执行 */
8.  
   transition-delay: 2s;
9.  
    
10.  
    /* 执行过度的时间函数 */
11.  
    transition-timing-function: ease;
12.  
    - ease 先快后慢的运动 默认值
13.  
    - linear 线性匀速运动
14.  
    - ease-in 加速运动
15.  
    - cubic-bezier() 指定时序函数
16.  
    - steps(2，start) 分步骤执行，最后一个参数可选 start 或 end
17.  
    - start 在时间开始时执行过度
18.  
    - end结束时开始过度 默认值
19.  
     
20.  
    transition: all 2s; /* 复合属性定义 值没有先后顺序 需要注意延迟时间永远在持续时间后面*/

二、动画效果

首先需要设置动画的关键帧

1.  
   /* 关键帧的名称必须唯一 */
2.  
   @keyframes step1 {
3.  
   /* 动画开始位置 也可以用0% 100% 10% */
4.  
   from{
5.  
   margin-left: 0;
6.  
   }
7.  
   /* 动画结束位置 */
8.  
   to{
9.  
   margin-left: 600px;
10.  
    }
11.  
    }
12.  
    --------------------------------------
13.  
    @keyframes step1 {
14.  
    0%{
15.  
    margin-left: 0;
16.  
    }
17.  
    20%{
18.  
    margin-left: 30px;
19.  
    }
20.  
    100%{
21.  
    margin-left: 600px;
22.  
    }
23.  
    }

动画相关属性：

1.  
   animation-name: step1; /* 设置动画名称，值是关键帧的名字 */
2.  
    
3.  
   animation-duration: 2s; /* 设置动画持续时间 */
4.  
    
5.  
   animation-delay: 2s; /* 设置动画延迟几秒后开始执行 */
6.  
    
7.  
   animation-iteration-count: infinite; /* 设置动画执行次数*/
8.  
   - infinite 永远执行
9.  
   - 2 整数类型 即为执行次数
10.  
     
11.  
    animation-play-state: running; /* 设置动画当前执行状态 */
12.  
    - running 运行 默认值
13.  
    - pause 暂停
14.  
     
15.  
    animation-direction: alternate; /* 设置动画方向 */
16.  
    - normal 正常 从起点到终点 默认值
17.  
    - reverse 从终点到起点
18.  
    - alternate 先从起点到终点，然后返回从终点到起点
19.  
    - alternate-reverse alternate的反转状态
20.  
     
21.  
    animation-fill-mode: none; /* 设置动画填充模式，动画完成后停留的位置 */
22.  
    - none 初始位置 执行动画完毕后回到的位置 默认值
23.  
    - forwards 停到终止位置
24.  
    - backwards 停到开始位置
25.  
    - both 结合了前两个
26.  
     
27.  
    animation-timing-function: ease-in-out; /* 设置动画时序效果，和过渡的效果一样 */
28.  
     
29.  
    /* 设置动画的复合属性 值没有顺序 需要注意持续时间永远在延迟时间前面 */
30.  
    animation: 2s;

三、变形

变形是通过CSS来改变元素形状或者位置，不会影响布局，也不会脱离文档流。

1. 平移

平移的元素位置是相对于自己原来的位置。

1.  
   transform: translateY(-100px);
2.  
   - translateX(100px) 沿着x轴平移100px
3.  
   - translateY(100px) 沿着y轴平移100px
4.  
   - translateZ(100px) 沿着z轴平移100px Chrome浏览器不支持

使用 translateZ的注意事项

1.  
   transform: translateZ(100px);
2.  
   - 值越大离的越近，如果单纯设置这个属性 则不会有任何变化，需要设置一个视距。
3.  
    
4.  
   html{
5.  
   /* 设置初始的视距 */
6.  
   perspective: 1000px;
7.  
   }

※：设置水平和垂直两个方向居中。

1.  
   .inner{
2.  
   /* 通过这种方式进行元素的水平和垂直两个方向居中 只适用于元素长宽确定 */
3.  
   position: absolute;
4.  
   top: 0;
5.  
   bottom: 0;
6.  
   left: 0;
7.  
   right: 0;
8.  
   margin: auto;
9.  
   }
10.  
     
11.  
    .out{
12.  
    position: absolute;
13.  
    top: 50%;
14.  
    left: 50%;
15.  
     
16.  
    /*将元素向左向上拉50%的长度，适用于元素长宽不确定*/
17.  
    transform: translateX(-50%) translateY(-50%);
18.  
    }

2.旋转

1.  
   transform: rotateX(45deg);
2.  
   - rotateX(45deg) 沿着x轴旋转
3.  
   - rotateY(45deg) 沿着y轴旋转
4.  
   - rotateZ(45deg) 沿着z轴旋转
5.  
   - deg是度数 turn 圈数

3. 缩放

1.  
   transform: scaleX(20); /* 缩放 */
2.  
   - scaleX() x轴缩放
3.  
   - scaleY() y轴缩放
4.  
   - scale() 双向方大
5.  
    
6.  
   transform-origin: center; /* 设置变形的原点 */

四、CSS中定义变量

1.  
   html{
2.  
   --width: 300px; /* '--' '变量名', 代表一个变量 */
3.  
   --height: 300px;
4.  
   --color: red; /* 定义一个变量 color代表颜色值 */
5.  
   }
6.  
   .box1{
7.  
   width: var(--width); /* var(--变量名) 代表取值 */
8.  
   height: var(--height);
9.  
   margin: calc(var(--width) / 2); /* calc 计算函数 */
10.  
    background-color: var(--color);
11.  
    }

五、Less语法

Less是一套和CSS有点相似的语法，我们通过Less的语法写代码可以直接自动生成CSS文件，以及Less和CSS的映射文件(*.css.map)。

引入一个 Less 文件：通过@import进行引入。

@import "index.less"; 

定义一个变量：※：在Less中可以先使用变量，然后在定义。

1.  
   @a: 200px; // 定义变量 a 为200px
2.  
    
3.  
   // 方法一：直接引用
4.  
   .box2{
5.  
   width: @a; // 使用的时候直接使用变量名称
6.  
   height: @a;
7.  
   }
8.  
    
9.  
   // 方法二：通过 $ 引用某个属性的值, $ 属性名 引用某个属性的值
10.  
    .box2{
11.  
    width: @a;
12.  
    height: $width;
13.  
    }

在类名上的使用：

1.  
   @className: box1; // 也可以直接定义一个类名
2.  
    
3.  
   // 如果在标识类名 则需要加上@{变量名}来表示是一个类，不能直接@变量名
4.  
   .@{className}{
5.  
   // 需要加双引号 也是需要@{变量名}来表示路径
6.  
   background-image: url("@{className}/img.png");
7.  
   }

父元素选择器：

1.  
   .box3{
2.  
   // 子元素选择器
3.  
   > .box4{
4.  
   // & 代表当前层级(.box3 > .box4)
5.  
   &:hover{}
6.  
   }
7.  
    
8.  
   // 后代选择器
9.  
   .box4{
10.  
    // & 代表当前层级(.box3 .box4)
11.  
    &:hover{}
12.  
    }
13.  
     
14.  
    // & 代表当前层级(.box3) 如果要是写 .box1:hover css会编译成 (.box1 .box1:hover)
15.  
    &:hover{}
16.  
    }

继承：可以在某种样式的基础上继续自定义，继承多个 class 用逗号隔开。

1.  
   .box1:extend(.box2, .box3){
2.  
   background-color: deeppink;
3.  
   }

混合：将某个样式直接引入到当前样式中。

1.  
   .box1{
2.  
   .box2();
3.  
   }

混合函数：将某个样式定义成函数的样式，定义好入参的顺序以及默认值

1.  
   // box3样式 需要一个参数background-color, 默认值是red
2.  
   .box3(@background-color: red){
3.  
   background-color: @background-color;
4.  
   }
5.  
    
6.  
   使用混合函数>>>:
7.  
   @color: #bfa;
8.  
   .box7{
9.  
   .box8(@color); // 按照顺序传参
10.  
    .box8(@background-color: @color); // 指定变量传参
11.  
    }

六、Flex弹性布局

设置一个元素为弹性布局

1.  
   div{
2.  
   display: flex; /* 开启弹性布局 块元素 */
3.  
   display: inline-flex; /* 行内元素 */
4.  
   }

设置了display: flex / inline-flex 的元素为弹性容器，其直接子元素为弹性项，其子子元素就不是弹性项；一个元素既可以是弹性项，也可以是弹性容器。在弹性容器中 元素的排列方向称为主轴，与主轴垂直方向成为侧轴。

弹性容器的样式：

设置容器的样式(类似于浮动的样式)

1.  
   flex-direction: row;
2.  
   - row 按照从左到右的顺序排列(类似 float: left)
3.  
   - row-reverse 按照从右到左的顺序排列(类似 float: right)
4.  
   - column 按照从上到下的顺序排列
5.  
   - collummn-reverse 按照从下到上的顺序排列

设置元素超出容器大小是否自动换行

1.  
   flex-wrap: wrap-reverse;
2.  
   - no-wrap 不换行
3.  
   - wrap 换行
4.  
   - warp-reverse 沿着元素侧轴反向换行

flex-flow 是 flex-direction 和 flex-wrap的简写属性，值没有顺序要求。

flex-flow: row wrap;

容器中主轴空白如何分配

1.  
   justify-content: space-evenly;
2.  
   - flex-start 所有元素按着主轴起始边排列
3.  
   - flex-end 所有元素按照主轴终边排列
4.  
   - center 所有元素居中排列
5.  
   - space-around 空白环绕每一个元素
6.  
   - space-between 空白均匀分布到元素间
7.  
   - space-evenly 空白分布每一个元素单侧(兼容性差)

弹性项的样式：

设置弹性项的伸展系数：

1.  
   /* 当父元素有多余空间时子元素如何伸展 */
2.  
   flex-grow: 1;
3.  
   - 0 不伸展
4.  
   - 其他数值 父元素剩余空间会按照比例进行分配

设置弹性项的收缩系数：

1.  
   /* 指定收缩系数 */
2.  
   flex-shrink: 0;
3.  
   - 1 默认值
4.  
   - 0 不收缩
5.  
   - 其他整数 按照比例进行收缩

设置弹性项的基础长度：

1.  
   flex-basis: 50px; /* 指定元素主轴上的基础长度 */
2.  
   - 如果主轴是横向的则该值指定宽度
3.  
   - 如果主轴是纵向的则该值指定高度
4.  
   - 默认值是auto 标识参考元素的高和宽

弹性项的复合属性：

1.  
   flex: 1 1 auto; /* 弹性元素的复合属性 */
2.  
   - 值的顺序要求: 增长 缩减 基础
3.  
   - none 代表弹性元素没有弹性 相当于 0 0 auto
4.  
   - auto 相当于 flex: 1 1 auto
5.  
   - initial 相当于 flex: initial 0 1 auto

指定弹性项的顺序：

1.  
   li:nth-child(1){
2.  
   order: 1; /* 排列顺序 值越小优先级越高*/
3.  
   }

这篇好文章是转载于：学新通技术网