No.2.1

字体图标（目的：使用字体图标技巧实现网页中简洁的图标效果）

字体图标展示的是图标，本质是字体，处理简单的、颜色单一的图片

优点：灵活性：灵活的修改样式，例如：尺寸，颜色等

　　　轻量级：体积小，渲染快，降低服务器请求次数

　　　兼容性：几乎兼容所有主流浏览器

使用方便：1.下载字体包　　2.使用字体图标

使用字体图标-类名：

引入字体图标样式表

调用图标对应的类名，必须调用2个类名

iconfont类：基本样式，包含字体的使用等

icon-xxx：图标对应的类名

上传矢量图：如果图标库没有项目所需的图标怎么办？（iconfont网站上传矢量图生成字体图标）

1.与设计师沟通，得到SVG矢量图　　2.iconfont网站上传图标，下载使用

上传——>上传SVG图标　　浏览本地图标——>去除颜色提交　　加入购物车——>下载使用

平面转换（目的：使用transform属性实现元素的位移、旋转、缩放等效果）

平面转换：改变盒子在平面内的形态（位移[常用]、旋转[不常用]、缩放[常用]）　　2D转换

平面转换属性：transform

位移：（使用translate实现元素位移效果）

语法：transform: translate(水平移动距离,垂直移动距离);

取值（正负即可）:像素单位数值，百分比（参照物为盒子自身尺寸）注意：X轴正向为右，Y轴正向为下

技巧:　　translate() 如果只给出一个值，表示x轴方向移动距离　　单独设置某个方向的移动距离：translateX() & translateY()

旋转：（使用translate实现元素旋转效果）（旋转效果必须配合过渡）

语法：transfrom: rotate(角度);　　注意：角度单位是deg

技巧：取值正负即可（取值为正，则顺时针旋转，取值为负，则逆时针旋转）

转换圆点：（使用transform-origin属性改变转换圆点）

语法：默认圆点是盒子中心点　　transform-origin: 原点水平位置原点垂直位置;

取值：方位名词（left、top、right、bottom、center）　　像素单位数值　　百分比（参照盒子自身尺寸计算）

/* 添加给标签本身，不要加到hover */

/* transform-origin: right bottom; */右下角

transform-origin: left bottom; 　　左下角

多重转换：（使用transform复合属性实现多形态转换）

多重转换技巧：transform: translate() rotate();　　（不能改变先后顺序：旋转会改变坐标轴向，先旋转改变了坐标轴向，位移方向会受影响--多重转换如果涉及到旋转往最后在书写）

/* transform: translate(600px);

transform: rotate(720deg); */单独设置会发生层叠

缩放：（使用scale改变元素的尺寸）

思考：改变元素的width或height属性能实现吗？能够放大图片效果，但是不是我们想要的效果

语法：transform: scale(x轴缩放倍数,y轴缩放倍数)

技巧：一般情况下，只为scale设置一个值，表示x轴和y轴等比例缩放（transform: scale(缩放倍数); 　　scale值大于1表示放大，scale值小于1表示缩小）

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

渐变是多个颜色逐渐变化的视觉效果，一般用于设置盒子的背景

background-image: linwar-gradient(颜色1,颜色2);

/* 半透明渐变：transparent透明-rgba() */

background-image: linear-gradient(

transparent,

rgba(0,0,0,.5)

);

巴特西

No.2.1

最新文章

热门文章