CSS进阶-黑马程序员-web前端零基础
目录
1.字体图标
2.平面转换
2.1translate-位移
2.2rotate-旋转
2.3transform-origin-转换原点（任何转换形式）
2.4多重转换
2.5scale-缩放
3.渐变
4.空间转换（3D转换）
4.1空间位移
透视-perspective
4.2空间旋转-rotate
使用transform-style: preserve-3d呈现立体图形
5.动画-animation
6.逐帧动画/分辨率/视口
使用steps实现逐帧动画
分辨率
视口
二倍图
6.Flex-弹性盒子
6.1主轴对齐方式-justify-content
6.2侧轴对齐方式-align-items
6.3flex-direction改变元素排列方向
6.4flex-wrap-弹性盒子多行排列
1.字体图标
简单的，颜色单一的图标--字体图标
复杂的--CSS精灵
下载图标网站：
iconfont-阿里巴巴矢量图标库
没有所需图标：找设计师要SVG矢量图-上传至iconfont网站再下载
.icon-cart-Empty-fill {
color: orange;
}
购物车
2.平面转换
使用transform属性实现元素的位移、旋转、缩放等效果
2.1translate-位移
语法
transform: translate(水平移动距离, 垂直移动距离);
取值（正负均可）
- 像素单位数值
- 百分比（参照物为盒子自身尺寸）
- 注意：X轴正向为右，Y轴正向为下
技巧
translate()如果只给出一个值, 表示x轴方向移动距离
单独设置某个方向的移动距离：translateX() & translateY(）
绝对定位居中
- 用margin
- 用translate快速实现
2.2rotate-旋转
语法
transform: rotate(角度); 注意：角度单位是deg
技巧：
- 取值正负均可
- 取值为正, 则顺时针旋转 取值为负, 则逆时针旋转
2.3transform-origin-转换原点（任何转换形式）
默认圆点是盒子中心点
transform-origin: 原点水平位置 原点垂直位置;
取值
方位名词（left、top、right、bottom、center）
像素单位数值
百分比（参照盒子自身尺寸计算
2.4多重转换
transform: translate()rotate();2.5scale-缩放
transform: scale(x轴缩放倍数, y轴缩放倍数);
一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放
transform: scale(缩放倍数);
scale值大于1表示放大, scale值小于1表示缩小
3.渐变
background-color: pink;
/* 半透明渐变：透明：transparent，rgba（） */
background-image: linear-gradient(transparent,
rgba(0, 0, 0, .6));4.空间转换（3D转换）
x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。
transform: translate3d(x, y, z);
4.1空间位移
Z轴是视线方向，移动效果应该是距离的远或近， 电脑屏幕是平面，默认无法观察远近效果
透视-perspective
透视效果：近大远小，近实远虚
属性（添加给父级）
perspective: 值;
取值：像素单位数值， 数值一般在800 – 1200
4.2空间旋转-rotate
transform: rotateZ(值);
左手法则：
大拇指：x轴指向右，y轴指向下，z轴指向自己
四指弯曲的方向代表旋转正数方向
使用transform-style: preserve-3d呈现立体图形
5.动画-animation
过渡：实现2个状态间的变化过程
动画：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）
构成动画的最小单元：帧或动画帧
定义动画
@keyframes change {
from {
width: 200px;
}
to {
width: 600px;
}
/* 二. 定义动画：200 到 500*300 到 800*500 */
/* 百分比指的是动画总时长的占比 */
@keyframes change {
0% {
width: 200px;
}
50% {
width: 500px;
height: 300px;
}
100% {
width: 800px;
height: 500px;
}
}
/* 使用动画 */
animation: change 1s;
重复次数：infinite为无限循环
forwards：最后一帧状态 backwards：第一帧状态
动画执行方向 alternate为反向
速度曲线 steps(数字)：逐帧动画 匀速linear
6.逐帧动画/分辨率/视口
使用steps实现逐帧动画
逐帧动画配合精灵图使用
补间动画/逐帧动画
分辨率
视口
目标：使用meta标签设置视口宽度，制作适配不同设备宽度的网页
目标：网页宽度和设备宽度(分辨率)相同。
解决办法：添加视口标签。
视口：显示HTML网页的区域，用来约束HTML尺寸
viewport：视口
width=device-width：视口宽度 = 设备宽度
initial-scale=1.0：缩放1倍（不缩放）
二倍图
二倍图设计稿尺寸：750px
6.Flex-弹性盒子
布局网页更简单、灵活
避免浮动脱标的问题
父元素添加 display: flex，子元素可以自动的挤压或拉伸
6.1主轴对齐方式-justify-content
6.2侧轴对齐方式-align-items
align-items（添加到弹性容器）
align-self： 控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）
6.3flex-direction改变元素排列方向
6.4flex-wrap-弹性盒子多行排列
弹性盒子换行显示 : flex-wrap: wrap; //no-wrap
调整行对齐方式 ：align-content
取值与justify-content基本相同