移动 Web 第一天

tang游戏王123

已于 2024-06-19 13:13:10 修改

阅读量652

点赞数 15

分类专栏：前端h5+c3 文章标签： css

于 2024-05-17 23:57:58 首次发布

原文链接：https://blog.youkuaiyun.com/weixin_73295475/article/details/131454631

版权

前端h5+c3 专栏收录该内容

15 篇文章

订阅专栏

平面转换

平面转换 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条，则为椭圆

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