学习目标
每天都像在还高利贷
学习内容
三、移动Web
(一)、平面转换、渐变
1、平面转换transform(2D转换)
- 作用:为元素添加动态效果,一般与过度配合使用
- 概念:改变盒子在平面内的形态(位移、旋转、缩放、倾斜)
- 平移
- 属性
- transform:translate(x轴移动距离,y轴移动距离);
- 属性
translate()只写一个值表示向x轴移动
- 取值
- 像素单位数值
- 百分比(参照盒子自身尺寸计算结果)
- 正负均可
- 平移实现居中效果
- 旋转
- 属性;transform:rotate(旋转角度);
- 角度单位deg
- 技巧
- 取值正负均可
- 取值为正,顺时针旋转
- 取值为负,逆时针旋转
- 属性;transform:rotate(旋转角度);
- 改变转换原点
- 默认情况下,转换原点是盒子中心点
- 属性:transform- origin:水平原点位置 垂直原点位置;
- 取值
- 方位名词
- 像素单位数值
- 百分比
- 多重转换
- 技巧:先平移再旋转
- transform:translate()rotate();
- 技巧:先平移再旋转
- 缩放
- 属性
- transform:scale(缩放倍数);
- transform:scale(X轴缩放倍数,Y轴缩放倍数);
- 技巧
- 通常,只为scale()设置一个值,表示X轴和Y轴等比例缩放
- 取值大于1表示放大,取值小于1表示缩小
- 属性
- 倾斜
- 属性:transform:skew();
- 取值
- 角度度数deg
2、渐变
- 分类
- 线性渐变
- 属性
- 取值
- 渐变方向:可选
- to方位名词
- 角度度数
- 终点位置:可选
- 百分比
- 渐变方向:可选
- 属性
- 线性渐变
- 径向渐变
- 作用:给按钮添加高光效果
- 属性
- 取值
- 半径可以是2条,则为椭圆
- 圆心位置取值:像素单位数值/百分比/方位名词
(二)、空间转换、动画
1、空间转换(3D转换)
Z轴位置与视线方向相同
- 平移
- 属性
- 属性
电脑是平面,默认无法观察Z轴平移效果
3D小括号里面必须逗号隔开三个数
- 取值
- 像素单位数值
- 百分比(参照盒子自身尺寸计算结果)
- 视距perspective
- 作用:制定了观察者与z=0平面的距离,为元素添加透视效果
- 透视效果:近大远小、近实远虚
- 属性:(添加给父级,取值范围800-1200)
perspective:视距;
- 旋转
- transform:rotate Z(值);
- transform:rotate X(值);
- transform:rotate Y(值);
- 左手法则——根据旋转方向确定取值正负
左手握住旋转轴,拇指指向正值方向,其他四个手指弯曲方向为旋转正值方向
- 立体呈现transform- style
- 作用:设置元素的子元素是位于3D空间中还是平面中
- 属性值
- flat:子级处于平面中
- preserve-3d:子级处于3D空间
- 呈现立体图形步骤
- 父元素添加transform- style:preserve-3d;
- 子级定位
- 调整子盒子的位置(位移或旋转
.cube{
width:200px;
height:200px
margin:100px auto;
transition:a11 2s;
transform-style:preserve-3d;
}
.cube div{
position:absolute;
left:0;
top:0;
width:200px;
height:200px;
}
.front{
background-color:orange;
transform:translateZ(100px);
}
.back{
background-color:green;
transform:translateZ(-100px);
}
- 缩放
2、动画animation
实现多个状态间的变化过程,动画过程可控(重复播放、最终画面、是否暂停)
- 实现步骤
-
定义动画
-
使用动画
animation:动画名称 动画花费时长;
-
动画名称呢和动画时长必须赋值
取值不分先后顺序
如果有两个时间值,第一个时间表示动画时长,第二个时间表示延迟时间
- 精灵动画
- 多组动画
(三)、移动适配
1、分辨率与视口与二倍图使用方法
- 屏幕分辨率:纵横向上的像素点数,单位是px
- 硬件分辨率——物理分辨率(出厂设置)
- 缩放调节的分辨率——逻辑分辨率(软件/驱动设置)
- 视口:显示HTML网页的区域,用来约束HTML尺寸
- width=device-width:视口宽度=设备宽度
- initial-scale=1.0:缩放1倍(不缩放)
- 二倍图
- 概念:设计稿里面每个元素的尺寸的倍数
- 作用:防止图片在高分辨率屏幕下模糊失真
2、适配方案
- 宽度适配:宽度自适应
- 百分比布局
- Flex布局
- 等比适配:宽高等比缩放
- rem
- vw
3、rem适配方案
- rem单位,是相对单位
- rem单位是相对于HTML标签的字号计算结果
- 1rem=1HTML字号
设备宽度大,元素尺寸大
设备宽度小,元素尺寸小
- rem-flexible.js
- rem-flexible.js是手淘开发出的一个用来适配移动端的js库
- 核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size
- rem-移动适配
rem单位的尺寸=px单位数值/基准根字号
4、 less
- 简介
- 注释
- 运算
- 嵌套
- 作用:快速生成后代选择器
- 变量
- 概念:容器,存储数据
- 作用:存储数据,方便使用和修改
- 语法
- 定义变量:@变量名:数据;
- 使用变量:CSS属性:@变量名;
- 导入
- 作用:导入less公共样式文件
- 语法:导入@import“文件路径”;
提示:如果是less文件可以省略后缀
- 导出
- 作用:在less文件的第一行添加//out:储存URL (没有分号)
提示:文件名称后面添加/
- 禁止导出
- 写法:在less文件第一行添加://out:false
(四)、移动适配-vw
- vw布局
- 确定设计稿对应的vw尺寸(1/100视口宽度)
- 查看设计稿宽度—确定参考设备宽度(视口宽度)—确定vw尺寸(1/100视口宽度)
- vw单位的尺寸=px单位数值/(1/100视口宽度)
- 确定设计稿对应的vw尺寸(1/100视口宽度)
- vh单位问题
开发中,vw和vh不能混用,如果混用可能会导致盒子变形
(五)、响应式网页
解决方案
1、媒体查询
- 媒体特性
- max-width:最大宽度
- min-width:最小宽度
- 书写顺序
- 完整写法
![媒体类型
- 外部CSS
2、Bootstrap
-
简介
Bootstrap 是由Twitter公司开发维护的前端UI框架,它提供了大量编写好的CSS样式,允许开发者结合一定HTML结构及JavaScript,快速编写功能晚上的网页及常见交互效果。
中文官网下载生产文件 -
使用步骤
- 引入Bootstrap CSS文件
- 调试类名:container:响应式布局版心类
-
栅格系统
栅格化湿指将整个网页的宽度分成12等份,每个盒子占用的对应的份数
-
全局样式
-
组件
- 引入样式表
- 引入js文件
- 复制结构,修改内容
-
字体图标
学习时间
Study Time
学习产出
- CSDN 博客笔记 1 篇
- 优化草草的网页