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

字体图标

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


字体图标的优点:

灵活性:灵活地修改样式,例如:尺寸、颜色等

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

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

使用方便:

1. 下载字体包

2. 使用字体图标


图标库

Iconfont:https://www.iconfont.cn/


下载字体包:

登录(新浪微博) → 选择图标库 → 选择图标,加入购物车 → 购物车 → 添加至项目 → 下载至本地


使用字体图标 - Unicode编码:

引入样式表:iconfont.css

复制粘贴图标对应的Unicode编码

设置文字字体


上传矢量图:

l 思考:如果图标库没有项目所需的图标怎么办?

l 答:IconFont网站上传矢量图生成字体图标

Ø 1. 与设计师沟通,得到SVG矢量图

Ø 2. IconFont网站上传图标,下载使用

作用:使用字体图标技巧实现网页中简洁的图标效果


通过i标签(大部分情况下都是i标签承接字体图标)把unicode编码复制过来

引入方式:

1.文件夹引入:将阿里巴巴矢量图标库:iconfornt  下载到根目录引入到css

2.类名引入:通过标签承接字体图标

        类名:

          第一个类名是固定的:iconfont;

          第二个类名:通过demo_index.html文件或者项目主页面,直接去复制文字下方的类名即可


3.伪元素导入方式: 在content内容中,填充该字体图标的unicode编码,然后把前面三个字符和后面的分好去掉,在最前面添加  \            《 \  作用编译 》  


4.在线引入字体图标:直接在link里面写入阿里巴巴矢量图标库网站链接的css元素

平面转换

1.平面转换

Ø 改变盒子在平面内的形态(位移、旋转、缩放)

Ø 2D转换

l 平面转换属性

Ø transform

语法

Ø transform: translate(水平移动距离, 垂直移动距离);

l 取值(正负均可)

Ø 像素单位数值

Ø 百分比(参照物为盒子自身尺寸)

注意:X轴正向为右,Y轴正向为下

l 技巧

Ø translate()如果只给出一个值, 表示x轴方向移动距离

Ø 单独设置某个方向的移动距离:translateX( ) & translateY( )


右侧盒子背景图

Ø left:向左侧移动自身宽度

Ø right:向右侧移动自身宽度

使用rotate实现元素旋转效果

语法

Ø transform: rotate(角度);

注意:角度单位是deg

l 技巧:取值正负均可

Ø 取值为正, 则顺时针旋转

Ø 取值为负, 则逆时针旋转

使用transform-origin属性改变转换原点

语法

Ø 默认圆点是盒子中心点

Ø transform-origin: 原点水平位置 原点垂直位置;

l 取值

Ø 方位名词(left、top、right、bottom、center)

Ø 像素单位数值

Ø 百分比(参照盒子自身尺寸计算)

使用transform复合属性实现多形态转换

多重转换原理

Ø 旋转会改变网页元素的坐标轴向

Ø 先写旋转,则后面的转换效果的轴向以旋转后的轴向为准,会影响转换结果

使用scale改变元素的尺寸

思考: 改变元素的width或height属性能实现吗?

l 语法

Ø transform: scale(x轴缩放倍数, y轴缩放倍数);

l 技巧

Ø 一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放

Ø transform: scale(缩放倍数);

Ø scale值大于1表示放大, scale值小于1表示缩小

使用scale改变元素的尺寸

播放按钮

Ø 布局

Ø ::after

Ø 样式

Ø 居中

Ø 效果

Ø 缩放

Ø 透明度(opacity)

渐变

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

渐变是多个颜色逐渐变化的视觉效果

l 一般用于设置盒子的背景

你可能感兴趣的:(移动web第一天 字体图标 平面转换 渐变)