字体图标（这里指的是阿里的图标库）
本地引入
- 1.挑选图标并添加至项目
- 2.下载代码，解压并更名iconfont
- 3.放入项目文件夹
- 4.引入iconfont.css文件路径
- 5.
在线引入
- 1.挑选图标并添加至项目
- 2.复制在线链接
- 3.通过link标签引入在线链接路径，并在链接前补上https
- 4.
<i class="iconfont icon-XXX"></i>
2D转换
平移（translate）
-
transform：translate(水平，垂直);
-
实际开发
- 常用于实现子类在父类中水平且垂直居中（不受父和子更改宽高所影响）
- 子绝父相 left: 50%; top: 50%; transform: translate(-50%, -50%);
旋转（rotate）
transform：rotate(30deg); //顺时针旋转30°
transform-origin: left top; //旋转的原点：左上角
缩放（scale）
- transform：scale(水平倍数，垂直倍数);
- 倍数：0-1则缩小，大于1则放大
- transform-origin: left top; 缩放的原点：左上角
斜切（skew）
//实际开发：擦亮效果
transform：skew(30deg)
transform：skewY(30deg)
注意点
- 1.行内样式设置转换无效
- 2.如果同时有平移和旋转效果，尽量最后再写旋转，因为先旋转会改变平移的方向
- 3.要注意：hover内的transform属性会覆盖原来的类的transform属性！！！
-
-
如果有多个转换要写到同一个transform里面 并且用空格分隔
transform: translate(100px) rotate(10deg)
-
背景渐变
background-image：linear-gradient(方向，颜色，颜色);
例： 红色从左上渐变到右下的绿色
background-image：linear-gradient(to right bottom，red，green);
方向
-
可以用方位名词
-
也可以用角度，例：45deg
- 方向参考时钟的指向
拓展
背景裁切
-
background-clip
-
border-box
-
padding-box
-
content-box
-
text
- 背景只显示在文字的区域
- -webkit-background-clip: text
- 应用：可以配合背景渐变实现渐变色文字
- color: transparent;
-
3D转换
空间平移
- 左手定则
- transform:translateX(30px)
- transform:translateY(30px)
- transform:translateZ(30px)
- transform:translate3d(x,y,z,)
透视、视距
- 添加至父元素！
- perspective:600px
- 作用：仅能实现近大远小的伪3D效果
空间旋转（绕轴旋转）
-
左手定则
- 左手的大拇指指向轴线的正值方向，四指弯曲的方向即为正值旋转的方向
-
transform:rotateX(30deg);
-
transform:rotateY(30deg);
-
transform:rotateZ(30deg);
-
自定义轴旋转
- transform: rotate3d(x,y,z,30deg) 原点与目标点两点一线
-
上帝视角（了解）
- transform: rotateX() rotateY();
3D呈现
- transform-style: preserve-3d;
动画
定义动画
- @keyframes 动画名{}
- @keyframes move {
from {}
to {}
}
- @keyframes move {
0% {}
50% {}
100% {}
}
调用动画
-
animation
-
属性不分顺序
-
必写属性
animation: move 2s;动画名称 动画时间
-
非必写属性
-
速度曲线
- linear 匀速
- steps() 步长、帧数
-
次数
- infinite 无限
-
设置反向播放
- alternate 注意：会占用一次执行次数
-
结束停留位置
- forwards 注意：会与Infinite冲突
-
暂停动画
- 简写anpp
animation-play-state: paused;- 注意：开发中常搭配hover使用
-
动画延迟
animation-delay：3s;3秒后执行
-
-
