移动web

01

01平面转换

平移

transform: translate(X轴移动距离, Y轴移动距离);

旋转

transform: rotate(旋转角度 deg);

转换原点

transform-origin: 水平原点位置 垂直原点位置;
 取值  方位名词（left、top、right、bottom、center）

多重转换

transform: translate() rotate();

缩放

transform: scale(缩放倍数);
transform: scale(X轴缩放倍数, Y轴缩放倍数);

02渐变

线性渐变

background-image: linear-gradient(
  渐变方向,
  颜色1 终点位置,
  颜色2 终点位置,
  ......
);

  background-image: linear-gradient(
      transparent,
      rgba(0,0,0,0.5)
      }；
      transition: all .5s;

  background-image: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.3),
    #f86442
  );

取值：

• 渐变方向：可选
  • to 方位名词
  • 角度度数
• 终点位置：可选
  • 百分比

径向渐变

background-image: radial-gradient(
  半径 at 圆心位置,
  颜色1 终点位置,
  颜色2 终点位置,
  ......
);

  background-image: radial-gradient(
    50px at 10px 10px,
    rgba(255, 255, 255, 0.5),
    transparent
  );

取值：

• 半径可以是2条，则为椭圆
• 圆心位置取值：像素单位数值 / 百分比 / 方位名词

02

01-空间转换

平移

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

视距
作用：指定了观察者与 Z=0 平面的距离，为元素添加透视效果

透视效果：近大远小、近实远虚

属性：(添加给父级，取值范围 800-1200)

perspective: 视距;

旋转

transform: rotateX(-20deg) rotateY(30deg) rotateZ(30deg)；

02 动画

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

01 定义动画

/* 方式一 */
@keyframes 动画名称 {
  from {}
  to {}
}

/* 方式二 */
@keyframes 动画名称 {
  0% {}
  10% {}
  ......
  100% {}
}

2 使用动画

animation: 动画名称 动画花费时长;

animation 复合属性

提示：

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

03rem

• rem单位，是相对单位
• rem单位是相对于HTML标签的字号计算结果
• 1rem = 1HTML字号大小

变量
概念：容器，存储数据

作用：存储数据，方便使用和修改

• 定义变量：@变量名: 数据;
• 使用变量：CSS属性：@变量名;

// 定义变量
@myColor: pink;
// 使用变量
.box {
  color: @myColor;
}
a {
  color: @myColor;
}

04导入

作用：导入 less 公共样式文件

语法：导入: @import “文件路径”;

提示：如果是 less 文件可以省略后缀

@import './base.less';
@import './common';

05导出

写法：在 less 文件的第一行添加 // out: 存储URL

提示：文件夹名称后面添加 /

// out: ./index.css
// out: ./css/
// out: false   禁止导出

03 响应式布局

01 媒体查询

• max-width：最大宽度（小于等于）
• min-width：最小宽度（大于等于）

书写顺序

• min-width（从小到大）
• max-width（从大到小）

.box {
  display: flex;
}

.left {
  width: 300px;
  height: 500px;
  background-color: pink;
}

.main {
  flex: 1;
  height: 500px;
  background-color: skyblue;
}

@media (max-width: 768px) {
  .left {
    display: none;
  }
}