1. 字体图标
- 使用场景
网页中需要用到的小图标可以使用字体图标 - 实质: 展示样式为图标 本质还是文字 可以按照文字的方式处理
- 特点:
1. 轻量级: 渲染快 减少请求次数
2. 灵活性: 可以根据需求方便的转换突变样式 大小
3. 兼容性: 几乎可以兼容所有浏览器
放大不会失真
使用方法
首先访问iconfont 阿里巴巴矢量图标库, 选取图标 加入到项目中 将图标下载到本地 解压后iconfont文件添加到本地项目
- Unicode码方式引入图标
a. 通过link标签引入iconfont样式表
b. 使用i标签包裹需要图标对应的unicode码
c. 在i标签对应的css样式中添加css代码:
- Unicode码方式引入图标
css:
<link rel="stylesheet" href="./iconfont/iconfont.css" />
i{
font-family:iconfont;
}
html
<i></i>
- 类名方式引入字体图标
a. 通过link标签引入iconfont样式表
b. 给引用图标的i标签添加 class='iconfont' 设置字体样式 根据引用图标的样式 添加对应的图标类名 类名可以通过iconfont.css文件查看
- 类名方式引入字体图标
- 注意:
如果需要更改样式 建议添加类名修改
在原来的类名上直接修改样式会层叠之前的样式
css:
<link rel="stylesheet" href="./iconfont/iconfont.css" />
html:
<i class='iconfont iconfont-arrow-right'></i>
- 伪元素方式使用字体图标
字体unicode码可在iconfont.css文件查看
- 伪元素方式使用字体图标
css: <link rel="stylesheet" href="./iconfont/iconfont.css" />
span::before{
content:'\ed40';
font-family:iconfont;
}
html:
<span></span>
- 4 在线引入图标
link标签引入网址:操作同上 - 5 上传图标:
打开项目 上传svg文件 添加到项目 下载即可
2.平面转换 transform:
- 平面内元素平移 旋转 缩放
-
2D效果
2.1 transform: translate:(x,y)平移
语法:
- transform:translateX() translateY();
- translateX:水平方向上的偏移 正值 向右
- translateY:垂直方向上的偏移 正值 向下
translate(value) 当value值只有一个时 与translateX一样的效果 - 单位:
1 数值+px
2 百分比 百分比的值是根据⭐自身元素大小⭐计算出来的 - 特点:
1⭐不脱标⭐ 元素的移动是根据自身在标准流的位置进行偏移的 离开后原来的位置仍然保留
2 ⭐对行内元素⭐不起作用
3 translate移动的元素 ⭐不会影响其他元素的位置⭐
垂直水平居中
.fa{
position:relation;
}
div{
position:absolute;
top:50%;
left:50%;
width:200px;
hieght:200px;
transform:translate(-50%,-50%);
}
2.2 rotate(x,y)旋转: 默认旋转的原点是盒子的中心点
- x为正值 顺时针旋转
- x值为负值 逆时针旋转
可以搭配 transition属性使用 谁需要过渡加在谁身上 不要要在链接伪类上: :hover 当鼠标悬停有过渡效果 离开时没有过渡效果
2.3 transform-origin:(x,y)可以修改元素的旋转原点
-
默认旋转的原点是盒子的中心点
位移偏移从左上角顶点计算
单位: 1 方位名词 2 数值+px 3 百分比
2.4 transform:scale(x,y)缩放
- 语法: 使用scale改变元素的尺寸
- 单位: 数值 >1 放大
< 1 缩小
scale(n)表示等比例缩放n倍 - 注意:
(1) 当这三个属性同时出现时使用时 注意每次改变只写一个属性其他的属性 可能会被默认值覆盖掉
(2) 要先写平移 再写其他两个属性 旋转后坐标轴方向会变
3. 渐变
3.1 background-image:linear-gradient(方向,颜色参数1 ,arg2,arg3,...);
3.2 background-image:radical-gradient;径向渐变
- 默认渐变方向是从上到下 也可以自己设置渐变方向
- 省略起点
1. 方位名词 :to 终点 to left / right /右下 right bottom
2. 角度 deg 0 向上 90 向右 180 向下 -90 向左
.grad {
background-image: linear-gradient(to right, red , yellow);
}
#grad {
background-image: linear-gradient(to bottom right, red, yellow);
}
注意点:
** 显示隐藏是不可以参与过渡的 所以过渡效果想要出现透明的情况一般使用opacity属性**
diaplay:none;
visibility:hidden;
opacity:0;