css

视距 perspective: 1000px;
transform-style: preserve-3d;//显示模式
过度
transition : 1s;

过渡的时间（transition-duration）

过渡的属性 transition-property:all;

过渡的变化效果transition-timing-function：linear;

• ease：慢速→快速→慢速
• linear：匀速变化
• steps（n）：过渡分为几步完成（n个步骤完成）

过渡的延时transition-delay：2s；

transition: all 1s linear 2s; 连写

@keyframes dong {
    /* 动画的开始状态 */
    from {
        width: 200px;
    }
    /* 动画的结束状态 */
    to {
        width: 600px;
    }
}

0%{}
100%{}

animation-timing-function: linear; 动画效果
animation-iteration-count: infinite; 动画重复次数
animation-direction: alternate; 动画方向

display: flex;
/* 设置主轴方向的对齐方式：justify-content */
justify-content: center;
/* 设置侧轴方向的对齐方式：align-items */
align-items: center;
//是否换行
flex-wrap ：wrap；

取值：flex-start 开始的位置
flex-end 结束的位置
center 居中
space-around 空白环绕
space-between 空白只在盒子之间

flex : 1;
aligin-self: center;

给单个元素设置对齐方式
flex-start 开始位置
flex-end
center
stretch 子元素高度拉伸显示（只有没设高才有效果）

/* 样式生效的最小宽为600px——》只有当屏幕宽度大于等于600px时，样式才会生效！！*/
@media screen and (min-width:600px) {
    div {
        width: 400px;
        height: 400px;
        background-color: green;
    }
}

媒体查询方式

下载插件 easy less

"less.compile": {
    "out": "../css/"
}

配置

@mainColor:#e92322;//设置变量的方法