移动web第一天

一、iconfont的引入方式

1.引入iconfont文件夹中的iconfont.css文件
2.通过i标签（绝大部分情况下都是使用 i 标签承接字体图标）把Unicode编码复制过来？

3.声明字体图标库（font-family：iconfont）字体图标的本质是文字

图标1.png

方法二、

1.引入iconfont.css文件
2.通过标签承接字体图标
类名：
第一个类名是固定的：iconfont;

第二个类名：通过demo_index.html文件或者项目主页面，直接去复制文字下方的类名即可

图标2.png

方法三、

在线引入字体图标，要在链接前面添加 http:

图标3.png

平面转换（2D转换）

目标：使用transform属性实现元素的位移、旋转、缩放等效果

平面转换属性：（transform）

一、位移-的基本使用

位移属性：（translate）

目标：使用translate实现元素位移效果
鼠标移入到父盒子，改变盒子的位置（transform: translate）
（transform: translatex）从左到右为 x轴水平方向 向左移动为负数，向右移动为正数
（transform: translatey）从上到下为y轴垂直方向 向上移动为腹水 ，向下移动为正数

二、位移-绝对定位居中

居中图.png

核心代码：

居中2.png

原理：
位移取值为百分比数值，参照盒子自身尺寸计算移动距离

旋转

目标：使用rotate实现元素旋转效果

语法

transform: rotate(角度);
注意：角度单位是deg
技巧：取值正负均可
取值为正, 则顺时针旋转
取值为负, 则逆时针旋转

转换原点

目标：使用transform-origin属性改变转换原点

语法

默认圆点是盒子中心点
transform-origin: 原点水平位置 原点垂直位置;
取值
方位名词（left、top、right、bottom、center）
像素单位数值
百分比（参照盒子自身尺寸计算）

多重转换

目标：使用transform复合属性实现多形态转换

多重转换技巧

居中3.png

多重转换原理

旋转会改变网页元素的坐标轴向
先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果

注意点：旋转会改变坐标轴方向当平移与旋转一起使用的时候，要把平移放在旋转的前面

缩放

目标：使用scale改变元素的尺寸
思考: 改变元素的width或height属性能实现吗？
语法
transform: scale(x轴缩放倍数, y轴缩放倍数);
技巧
一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放
transform: scale(缩放倍数);
scale值大于1表示放大, scale值小于1表示缩小

缩放

目标：使用scale改变元素的尺寸
播放按钮
布局
::after
样式
居中 - 效果
缩放
透明度（opacity）

渐变

渐变背景

目标：使用background-image属性实现渐变背景效果
渐变是多个颜色逐渐变化的视觉效果

一般用于设置盒子的背景

渐变1.png

渐变背景

目标：使用background-image属性实现渐变背景效果