字体图标与平面转换

` #web第一天

“

1.字体图标的使用

本质还是字体，展示的是图标

1.1优点

1.灵活随机改变图标颜色和图标尺寸

2.轻量化 体积小 渲染快

3.兼容性好

1.2使用方法

（unicode的方法）

1.引入样式表iconfont.css

2.复制粘贴图标对应的unicode编码到标签内

3.设置文字字体 span {

font-family：‘iconfont’；}

iconfont-class 类名法

1.引入字体图标css

2.调用图标对应的类名（有两个） iconfont

3.图标对应类名iconfont-xxxx

1.3在线引入字体图标

1.link链接引入在线iconfontcss

2.标签内引用对于字体图标类名

2.平面转换

1.分类

有平面位移translate 旋转rotate 缩放sacle

2.1translate属性

1.平面转换也称2D转换，属性值有translatex translatey 分别代表轴和y轴

2.数值可以取正负

取值有px 和百分比 （百分比时为盒子自身的大小位移）

图如下

3.旋转属性（rotate）

1.rotate属性值也是属于transform的一种

2.能使元素发现位置旋转，如果要看到动态效果 可以配合transition属性实现

3.1旋转中心transform-origin属性

1.取值有方位名词 left top right bottom

2.像素取值px 像素大小为盒子本身大小

3.百分比取值 百分比大小为盒子自身大小

3.2边位移边旋转的效果

3.2.1属性连写语法transfrom：translate（300px） rotate（360deg）;

3.2.2注意的是如果位移和旋转单独书写会出现层叠覆盖性

4.缩放属性（scale）

4.1缩放transfrom：scale（1) 数字1代表元素本身大小 数值＞1表示放大 数值<1表示缩小

3.渐变

3.1特征

渐变要给背景图片添加而不是背景颜色（transparent 透明）

3.2渐变还可以改变方向，例如从上到下（100%高度划分），从左到右 （to right 方位名词） 角度（0deg），

4.知识点

4.1谷歌调试工具的拓展

4.2盒子透明和背景透明度的区别

​ 1. opacity: 0.4;属性会使 当前盒子 连同背景和内容都变透明了

​ 2.rgba代码 背景会透明而文字不会透明 background-color: rgba(0, 0, 0, 0.4);

3. div的背景颜色 等于 父元素的背景颜色，background-color: transparent; 默认的代码

4.3渐变过渡和背景图片过渡的特性

渐变没有过渡效果的！！背景图片 渐变效果 不是完善 工作中 要慎用 （浏览器的支持不够好 ） 想要实现 鼠标移入 图片切换的渐变的过程！！

1.换另外的思路来实现这个功能， div 里面包装两个图片标签

1 先让一个图片隐藏 一个图片显示

2 div hover 再让另外一个图片隐藏 另外一个图片显示！

3 定位加透明度来实现 透明度有过渡

4 display:none 渐变 背景图!片 没有过渡效果 none black

`