移动web第一天，字体图标，平面转换，渐变

一，字体图标

1，下载字体图标：

登录iconfont（https://www.iconfont.cn/）
搜索需要的图标

image.png

将需要的图标添加入库（购物车图标）

image.png

点击右上角购物车图标

image.png

选择下方添加至项目（没有项目选择新建项目再添加）
在项目界面点击下载至本地
最后将文件解压，且重命名文件夹为"iconfont"，放到代码根目录

image.png

2，字体图标引用

一般用 i 标签来承载字体图标

①本地引用：

用link标签选择iconfont文件夹里的iconfont.css

②在线引用（不推荐）

用link标签挂上项目中的在线链接，注意连接前面需要加上http

image.png

3，字体图标的属性修改

字体图标的本质是文字，可以直接用font-zise，color修改大小和颜色
但是要注意，不要直接使用默认类名，应该再给 i 标签添加一个类名如：icon1

---

二，平面转换（transform）

平面转换主要有：
transform: translate(-50%, -50%);————平移
transform:rotate(-360deg);————旋转
transform: scale(1.2);————缩放

0，转换中心——transform-origin

元素转换默认以元素正中心为原点，可根据需要改变。
如 transform-origin：left bottom；
表示转换中心变更为元素左上角

如 transform-origin：50px 50px；
表示转换中心变更为（以左上角0px 0px为原点计算）50px 50拼px。

1，平移translate

x轴正方向朝右，y轴正方向朝下。

如果用百分比，则以自身为参照。

也可以用具体像素值，则以原来的位置为参照。

如果用方位名词：left，right，center，bottom，top，则以父盒子为参照

2，旋转rotate

旋转一定要带单位deg，负号表示逆时针旋转。

3，缩放scale数值小于1表示缩小，大于1表示放大。

三，渐变linear-gradient( );

渐变指背景色渐变
background-image: linear-gradient(36deg, #59C173, #a17fe0, #5D26C1);

image.png

其中36deg可省略，意为渐变方向，默认值为180deg，180deg表示6点钟方向，即从上往下渐变，
也可以使用方位名词，如right表示向右（从左往右）渐变。

四，回顾

1，子绝父相：图层覆盖显示，常用子绝父相完成。
2，p::after{}，此为伪元素，默认为行内元素无法设置宽高，且必须要添加content属性

image.png

3，超出显示范围需要隐藏元素，用 overflow: hidden;（不占位置）
4，多种平面转换需要进行连写，否则会被覆盖：
transform: translateX(600px) scale(1.2);
5，旋转会导致元素方向改变（x轴，y轴），连写时先旋转再平移和先平移再旋转效果不一样。
6， transition: 1s;——表示花费1秒时间来过渡，谁过渡写在谁的选择器里面
7，p:hover::after{}——表示当鼠标移到p上时，p里面的为元素p::after状态改变，若需求是鼠标移动到p的父级.box时，则为：.box:hover p::after{}——（hover和p之间有一个空格）