移动web 01-day(字体图标\平面转换\渐变)

解释:字体图标展示的是图标，本质是字体
下载步骤:在iconfont.cn字体图标库选择想要的字体图标添加到购物车,点开购物车添加至项目,在我的项目中将字体图标文件夹压缩包下载至本地,解压缩为iconfont文件夹

01-字体图标unicode用法:
(1).使用link标签引入样式表：iconfont.css
(2).复制图标对应的Unicode编码,然后粘贴到需要用的标签中
(3).声明(设置)字体样式

1.png

02-字体图标font-class用法:
(1).引入字体图标样式表
(2).给标签添加类名,第一个类名iconfont(必要),第二个类名则是项目主页面对应字体图标下方的类名,若需更改字体图标样式,最好再添加一个自取的类名,iconfont.css中已经声明字体图标库

2.png

03-在线引入字体图标:iconfont.cn我的项目中font class,查看在线链接-复制链接-html页面中引入即可------注意:在线引入字体图标,要在复制的链接前面加上 http: ------

3.png

4.png

上传步骤:

5.png

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

6.png

01.位移:
转换注意点：
1.transform属性对于行内元素是无效的；
2.添加了transform属性的盒子可以提高盒子层级，保留原来的位置---类似于相对定位的特点
3.translate(只有一个值) = translateX()

7.png

8.png

02.绝对定位居中:(transform:translate( xx%, xx%)的百分比取值是参照盒子自身尺寸计算移动距离的)

9.png

03.旋转

10.png

04.转换原点

11.png

05.多重转换:(平移属性和旋转属性都要写的话,要把旋转属性写在平移属性后面)

12.png

06.缩放:
使用transform:scale缩放,是以图片中心为原点进行缩放的
设置width(宽)或height(高)缩放是以图片左上角为原点进行缩放的

13.png

07.渐变:( transparent:透明 )
背景颜色渐变 bgi background-image: linear-gradient(参数1, 参数2, 参数3, ....);
参数1：

方位：默认的方位从上到下
1.方位名词：例如：从左到右渐变 to right,从左上到右下渐变 to right bottom
2.角度单位deg：直接写度数即可，不用再加to(默认12点钟方向为0°,指针指向哪个方向,就代表向哪个方向渐变)
参数2：颜色1；
参数3：颜色2；......

14.png

15.png