移动 Web 第一天

目录

平面转换

平面转换 transform

平面转换 – 平移

平移实现居中效果

平面转换 – 旋转

平面转换 – 改变转换原点

平面转换 – 多重转换

平面转换 – 缩放

平面转换 – 倾斜

渐变

线性渐变

径向渐变

---

---

平面转换

平面转换 transform

⚫ 作用：为元素 添加动态效果 ，一般与 过渡 配合使用

⚫ 概念：改变盒子在 平面 内的 形态 （位移、旋转、缩放、倾斜）

⚫ 平面转换又叫 2D 转换

平面转换 – 平移

⚫ 属性

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

⚫ 取值

◆ 像素单位数值

◆ 百分比（参照 盒子自身尺寸 计算结果）

◆ 正负均可

⚫ 技巧

◆ translate() 只写 一个值 ，表示沿着 X 轴移动

◆ 单独设置 X 或 Y 轴移动距离： translateX() 或 translateY()

平移实现居中效果

⚫ 方法一

⚫ 方法二：百分比参照 盒子自身尺寸 计算结果

平面转换 – 旋转

⚫ 属性

transform : rotate ( 旋转角度 );

◆ 角度单位是 deg

⚫ 技巧

◆ 取值 正负均可

◆ 取值为 正 ， 顺 时针旋转（自西向东）

◆ 取值为 负 ， 逆 时针旋转（自东向西）

平面转换 – 改变转换原点

⚫ 默认情况下，转换原点是 盒子中心点

⚫ 属性

        transform-origin : 水平原点位置 垂直原点位置 ;

⚫ 取值

        ⚫ 方位名词 （left、top、right、bottom、center）

        ⚫ 像素单位数值

        ⚫ 百分比

平面转换 – 多重转换

⚫ 多重转换技巧： 先平移再旋转

transform : translate () rotate ();

⚫ 多重转换原理： 以第一种转换方式坐标轴为准转换形态

➢ 旋转会改变网页元素的坐标轴向

➢ 先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果

平面转换 – 缩放

⚫ 思考: 改变元素的width或height属性能实现吗？

⚫ 属性

transform : scale ( 缩放倍数 );

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

⚫ 技巧

        ⚫ 通常，只为 scale() 设置 一个值 ，表示 X 轴和 Y 轴 等比例缩放

        ⚫ 取值 大于1 表示 放大 ，取值 小于1 表示 缩小

平面转换 – 倾斜

⚫ 属性

transform : skew ();

⚫ 取值

        ⚫ 角度度数 deg

                        负数 往右倾斜

                        正数 往左倾斜

渐变

⚫ 渐变是 多个颜色 逐渐变化的效果，一般用于设置 盒子背景

⚫ 分类

        ⚫ 线性渐变

        ⚫ 径向渐变

线性渐变

⚫ 属性

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

⚫ 取值

        ◆ 渐变方向： 可选（可以不写）

                to 方位名词

                角度度数

        ◆ 终点位置： 可选（可以不写）

                百分比

background-image: linear-gradient(
transparent,
rgba(0, 0, 0, 0.6)
);

径向渐变

⚫ 作用：给按钮添加 高光 效果

⚫ 属性

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

⚫ 取值

        ⚫ 半径可以是 2条 ，则为 椭圆

        ⚫ 圆心位置取值：像素单位数值 / 百分比 / 方位名词