css效果

双伪元素清除浮动+清除父级元素塌陷

transform动画属性---只能结合在一起写，否则后面的属性会覆盖前面的属性

1.移动旋转：如： transform: translate(360px) rotate(200deg)

2.平面缩放： transform :scale()或则transform :scale(x缩放倍数,y缩放倍数)------大于1放大，小于1缩小

3.倾斜：transform: skew(30deg)--正数向左倾斜，负数向右倾斜

4.线性渐变 ： background-image: linear-gradient( to right或则45deg, red(可选百分数位置), green(可选百分数位置) )

5.径向渐变： background-image: redial-gradient( 50px at enter ccenter, red, pink )

3D动画属性

1.perspective:透视距离（添加给直接父级，一般800-1000px）

2.transform-style(加给父级) flat:子级处于平面中 preserve-3d:子级处于3D空间中

3.animation动画

animation: 动画名称 动画花费时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕状态；
                                  linear匀速
                                  steps(3)分步
                                              infinite无限重复
                                              infinite alternate反向
                                                                  forwards停在结束状态
@keyframes 动画名称{
from{}
to{}
}



@keyframes 动画名称{
0% {}----时长占百分比
10%{}
...
100%{{}
}

3.拆分animation动画

4.代码优化。如果动画的初始状态和盒子的状态一致，则可以省略@keyframs 的第一个参数（动画开始的代码

移动设备效果

• rem： 1rem=1html字号大小（font-size）

媒体查询

@media(){
    选择器{
        css属性
    }
}

• flexible.js方便移动视口适配

• less除法需要用（）或者用 ./

• & 表示当前选择器，不产生后代，写到那个大括号就表示谁，一般结合hover nt-child使用

媒体查询完整写法

less-变量

less 导入

1vw=1/100*视口宽度 vh

• vw和vh不能混用