-
字体图标
1. 素材来源:
打开iconfont官网>登录账号>素材库的图标库或者直接中文搜索图标名字>选好所需图标>加入购物车>创建项目>加入项目>下载至本地>解压缩文件并重命名为iconfont>移动至目标文件夹根目录
注意点:
①在iconfont网站上找到资源管理 > 我的项目,可以找到图标的unicode编码、font-class类名和在线链接
②在iconfont网站上找不到想要的图标时可以上传图标再引用
上传方法:找到上传按钮 > 上传svg格式的图标文件(需要提前准备,没有找UI) > 去除颜色提交 > 加入购物车 > 加入项目 > 下载本地
2. 引用方式:
①unicode引用方法:
用link链接iconfont里面的iconfont.css文件 > 声明字体图标库 > 把unicode编码复制过来写在i标签里面(大部分情况下都是i标签承接字体图标)把unicode编码复制过来(需要更改样式的, 在i标签上添加类名控制)
②font-class引用方法:
引入iconfont.css文件 > 在i标签上创建类名
类名:第一个类名固定为iconfont
第二个通过demo_index.html文件或者项目主页面，直接去复制文字下方的类名即可
第三个类名是自定义的, 用来控制字体图标达到自己想要的样式
③在线引用方法:
点击我的项目 > 查看在线链接 > 生成并复制链接 > 用link承接链接,但要在最前面添加http:
3.字体图标用法:
①普通用法:
即上面所讲的三种引入方式
②搭配伪元素:
引入iconfont.css文件 > 创建伪元素 > content里面写上复制的unicode代码 > 去掉前面的三个字符和分号,在最前面加上\ > 声明字体图标库
-
平面转换
1.位移基本使用:
两种取值方式:
①像素单位取值
transform: translate(100px,50px);
②百分比取值：参考盒子自身大小
transform: translate(50%,150%);
提醒:
①想要观察位移的变化过程需要给本身盒子设置过渡,
后面的旋转和缩放效果也是如此
transition: all 0.5s;
②关于取值正负问题:
X轴向右为正方向,取正值
X轴向下为正方向,取正值
其余方向为负值
注意:
①对行内元素无效
②位移之后提升层级,且保留原来位置,类似相对定位
2.绝对定位元素居中:
使用子绝父相:父盒子相对定位,子盒子绝对定位
①先走父盒子的一半
left: 50%;
top: 50%;
②再走子盒子的一半
transform: translate(-50%,-50%);
3.旋转效果:
顺时针旋转 360deg
transform: rotate(360deg);
逆顺时针旋转 360deg
transform: rotate(-360deg);
4.旋转中心:
取值方位名词(最多)
transform-origin: left bottom;
具体的像素单位(正负均可)
transform-origin: 200px 50px;
百分比(参照于盒子自身尺寸)
transform-origin: 20% 50%;
5.缩放:
scale()----同时代表缩小和放大
括号里面的数值大于1表示放大，小于1表示缩小,等于1无变化
transform: scale(1.1);
6.多重转换效果:
位移一段距离且位移时旋转
transform: translate(600px) rotate(360deg);
注意:
①旋转会改变坐标轴方向
当平移与旋转一起使用的时候，要把平移放在旋转的前面
②书写代码易错点
当多个转换属性同时使用时,要连写,否则后面的属性会覆盖前面的属性(层叠性,后来者居上)
错误示范:transform: translate(600px);
transform: rotate(360deg);
正确书写:transform: translate(600px) rotate(360deg);
-
渐变效果
1.渐变背景
背景颜色渐变
bgi background-image: linear-gradient(参数1, 参数2, 参数3, ....);
参数1：
代表方位：默认的方位从上到下
①方位名词：例如：从左到右渐变 to right,从左上到右下渐变 to right bottom
②角度deg：直接写度数即可，不用再加to
参数2：代表颜色1；
参数3：代表颜色2；
-
补充
1.单词汇总
2.每日一句鼓励自己的话：
学习是世界上最简单的事了，没有比学习更简单的事了。
