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

字体图标

1,字体图标Unicode时使用方法
a.登录https://www.iconfont.cn/
b.添加各类需要的字体图标，添加带购物车
c.点击购物车，把在购物车内的字体图标添加至新建项目
d.点击下载至本地
e.把解压包解压后的文件重命名为iconfont并拖拽到代码文件

字体图标0.png

f.
第一种用法:用link引入css文件,在body种给一个i标签并在style种声明字体图标库

字体图标1.png

第二种用法:通过标签承接字体图标

字体图标2.png

平面转换

转换注意点 transform：translate
a,transform 对行内元素无效
b, 添加了transform属性的盒子可以提高盒子的层级,且保留原来的位置
c,translate(只有一个值)=translateX()
2.tf 百分比取值：参考盒子自身大小
transform: translate(50%,50%);

3.绝对定位水平垂直居中
子绝父相后，子元素代码：
position: absolute;
top: 50%;
left: 50%;
子盒子先到达父盒子中部
然后子盒子再往左水平垂直参照自身的一半位移
transform: translate(-50%,-50%);

4.旋转transform：rotate（）；
顺时针旋转 360deg
transform: rotate(360deg);
*逆顺时针旋转 360deg *
transform: rotate(-1080deg);
旋转rotate不加坐标轴XYZ属于平面转换，不属于3D转换，只在平面根据数值正负来顺时针逆时针旋转

5.转换原点transform-origin：；
a.取值方位名词最多 tfo
transform-origin
transform-origin: right bottom;
b.具体的像素单位（正负均可）
transform-origin: 300px 300px;
c.百分比(参照于盒子自身尺寸)
transform-origin: 50% 50%;

  / 大部分 /
  / 当取值是用括号包括的就是要用逗号隔开 /
  / 当取值没有括号包括的就空格隔开 /

6.多重转换：让轮胎滚动
transform:translate(600px) rotate(720deg);
note：注意点：旋转会改变坐标轴方向
当平移与旋转一起使用的时候，要把平移放在旋转的前面

7.缩放：transform：scale（）；
scale（1）=没变化；
小于1=缩小
大于1=放大
scale（）通常按比例放大缩小宽高，所以可以只写一个值或者scale（0.5,0.5）

渐变

语法:background-image:linear-gradient();
背景颜色渐变 bgi background-image: linear-gradient(参数1, 参数2, 参数3, ....);
参数1：
方位：默认的方位从上到下
1.方位名词：例如：从左到右渐变 to right,从左上到右下渐变 to right bottom
2.角度deg：直接写度数即可，不用再加to
参数2：颜色1；
参数3：颜色2；.....

2.练习综合案例
结合平移,渐变(遮罩层),缩放

image.png

鼠标悬停到图片后效果

image.png