-
移动Web
her~~llo，我是你们的好朋友Lyle，是名梦想成为计算机大佬的男人！
博客是为了记录自我的学习历程，加强记忆方便复习，如有不足之处还望多多包涵！非常欢迎大家的批评指正。
目录
一、字体图标
目标：使用字体图标技巧实现网页中简洁的图标效果
字体图标
- 字体图标展示的是图标，本质是字体。
- 处理简单的、颜色单一的图片
字体图标的优点：
- 灵活性：灵活地修改样式，例如：尺寸、颜色等
- 轻量级：体积小、渲染快、降低服务器请求次数
- 兼容性：几乎兼容所有主流浏览器
- 使用方便： 1.下载字体包 2.使用字体图标
图标库lconfont：iconfont
下载字体包：登录→选择图标库→选择图标，加入购物车→购物车→添加至项目→下载至本地
1.1 使用字体图标-Unicode编码：
①引入样式表：iconfont.css
<link rel="stylesheet" href="iconfont.css" />②复制粘贴图标对应的Unicode编码
③设置文字字体
- <style>
- span{
- font-family: 'iconfont';
- }
- style>
1.2 使用字体图标–类名：引入字体图标样式表
①引入字体图标样式表
②调用图标对应的类名，必须调用2个类名
- iconfont类：基本样式，包含字体的使用等
- icon-xxx：图标对应的类名
<span class="iconfont icon-quanbu">span>二、平面转换
目标：使用transform属性实现元素的位移、旋转、缩放等效果
平面转换
- 改变盒子在平面内的形态（位移、旋转、缩放）
- 2D转换
平面转换属性
- transform
语法：
transform: translate(水平移动距离, 垂直移动距离);取值（正负均可）：
- 像素单位数值
- 百分比（参照物为盒子自身尺寸）
注意：X轴正向为右，Y轴正向为下
技巧：
- translate()如果只给出一个值, 表示x轴方向移动距离
- 单独设置某个方向的移动距离：translateX() & translateY()
2.1 位移
2.1.1 绝对定位居中
核心代码：
- div {
- background-color: #000;
- position: absolute;
- width: 200px;
- height: 100px;
- left: 50%;
- top: 50%;
- transform: translate(-50%, -50%);
- }
原理:
位移取值为百分比数值，参照盒子自身尺寸计算移动距离
2.1.2 双开门
核心代码：
- .box {
- width: 1366px;
- height: 600px;
- margin: 0 auto;
- background: url('C:\\Users\\13792\\Desktop\\bg.jpg');
- overflow: hidden;
- }
- .box::after,.box::before
- {
- float: left;
- content: '';
- width: 50%;
- height: 600px;
- background-image: url(C:\\Users\\13792\\Desktop\\fm.jpg);
- }
- .box::after{
- background-position: right;
- }
- .box:hover::after{
- transition: 1s;
- transform: translate(100%);
- }
- .box:hover::before{
- transition: 1s;
- transform: translate(-100%);
- }
background-position:right;- left：向左侧移动自身宽度
- right：向右侧移动自身宽度
2.2 旋转
目标：使用rotate实现元素旋转效果
语法：
transform: rotate(角度);注意：角度单位是deg
取值：正负均可
技巧：
- 取值为正, 则顺时针旋转
- 取值为负, 则逆时针旋转
2.2.1转换原点
目标：使用transform-origin属性改变转换原点
语法：
- 默认圆点是盒子中心点
- transform-origin: 原点水平位置原点垂直位置;
取值：
- 方位名词（left、top、right、bottom、center）
- 像素单位数值
- 百分比（参照盒子自身尺寸计算）
2.3 多重转换
目标：使用transform复合属性实现多形态转换
transform: translate() rotate();多重转换原理
- 旋转会改变网页元素的坐标轴向
- 先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果
2.4 缩放
目标：使用scale改变元素的尺寸
思考:改变元素的width或height属性能实现吗？
语法：
transform: scale(x轴缩放倍数,y轴缩放倍数);技巧：
- 一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放
- transform:scale(缩放倍数);
- scale值大于1表示放大, scale值小于1表示缩小
三、渐变
目标：使用background-image属性实现渐变背景效果
- 渐变是多个颜色逐渐变化的视觉效果
- 一般用于设置盒子的背景
- background-image: linear-gradient(transparent,rgba(200, 200, 1, 0.6))
- background-image: linear-gradient(颜色1,颜色2)
四、空间转换（配合透视效果好）
目标：使用transform属性实现元素在空间内的位移、旋转、缩放等效果
空间：是从坐标轴角度定义的。x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。
空间转换也叫3D转换
属性：transform
4.1 空间位移
目标：使用translate实现元素空间位移效果
语法：
- transform: translate3d(x, y, z);
- transform: translateX(值);
- transform: translateY(值);
- transform: translateZ(值);
取值（正负均可）：
- 像素单位数值
- 百分比
4.2 透视
目标：使用perspective属性实现透视效果
属性（添加给父级）
- perspective:值;
- 取值：像素单位数值，数值一般在800–1200。
作用
- 空间转换时，为元素添加近大远小、近实远虚的视觉效果
透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。
4.3 空间旋转
目标：使用rotate实现元素空间旋转效果
语法：
- transform:rotateZ(值);
- transform:rotateX(值);
- transform:rotateY(值);
左手法则：
- 判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向
拓展：
rotate3d(x, y, z, 角度度数)：用来设置自定义旋转轴的位置及旋转的角度，x，y，z取值为0-1之间的数字立体呈现
4.4 立体呈现
目标：使用transform-style: preserve-3d呈现立体图形
思考：使用perspective透视属性能否呈现立体图形？
答：不能，perspective只增加近大远小、近实远虚的视觉效果。
实现方法：
- 添加transform-style: preserve-3d;
- 使子元素处于真正的3d空间
呈现立体图形步骤
1.盒子父元素添加transform-style: preserve-3d；
2.按需求设置子盒子的位置（位移或旋转）
注意：
- 空间内，转换元素都有自已独立的坐标轴，互不干扰
3D导航
目标：使用立体呈现技巧实现3D导航效果
实现思路
1.搭建立方体：绿色盒子是立方体的前面，橙色盒子是立方体的上面
li标签
添加立体呈现属性transform-style: preserve-3d;
添加旋转属性（为了便于观察效果，案例完成后删除即可）
a标签
a标签定位（子绝父相）
英文部分添加旋转和位移样式
中文部分添加位移样式
2.添加hover状态旋转切换效果
鼠标滑过li，添加空间旋转样式
li添加过渡属性
注意：案例完成后，删除li的旋转样式。
4.5 空间缩放
目标：使用scale实现空间缩放效果
语法：
- transform: scaleX(倍数);
- transform: scaleY(倍数);
- transform: scaleZ(倍数);
- transform: scale3d(x, y, z);
五、动画
目标：使用animation添加动画效果
思考：过渡可以实现什么效果？
答：实现2个状态间的变化过程
动画效果：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）
动画的本质是快速切换大量图片时在人脑中形成的具有连续性的画面
构成动画的最小单元：帧或动画帧
实现步骤：
①定义动画（在
