1、目标伪类选择器
选择器:target{} 当元素被点击时的指向,发生样式的改变
2、css样式 圆角:
border-radius:; 元素是正方形：宽度的一半px /50%是 正圆 元素是长方形： 较小值的一半px 是半圆，50% 是椭圆。
3、css3 景深 (3D的空间) 观察物体的时候，近大远小
给父级元素添加:
transform-style:preserve-3d;形成3D的空间环境
perspective:800px;添加景深 形成近大远小的效果，范围 900px-1200px
4、设置观察点:perspective-origin:;
left right
top bottom
px %
5、background:rgba(红,绿,蓝,透明度);
透明度 ：取值范围 0-1 背景颜色透明
6、2d与3d区别
2d: 水平方向(x轴) 和 垂直方向(y轴)
3d: 多了一个z轴，z轴就是你对屏幕垂直的视线,靠近屏幕的方向就是正向,远离屏幕的线是反向
7、3D功能函数:transform： ；
3D的位移：
translateX()
translateY()
translateZ()
3D的旋转：
rotateX()
rotateX()
rotateZ()
3D的缩放：
scaleX()
scaleY()
scaleZ()
8、backface-visibility:背面不可见;
visible 可见
hidden 不可见
9、动画
transition:; 过渡 需要事件触发
animation 动画 不需要事件触发,使用关键帧就可以执行
(1) 定义动画
<1> from{}起始位置
to{}终点位置
<2> 0%{}起始位置
25%{}过程1
...过程n
100%{} 终点位置
(2) 调用动画
animation-name:;关键帧名字 动画名
animation-duration:;关键帧时长 总运动时间
animation-delay:;关键帧延迟时间
animation-iteration-count:;运动执行次数 ,数字 数字为几,执行多少次 ,默认情况一次 .infinite无限循环
animation-direction:;动方向
reverse 反向运动
alternate 单数次,顺时针 偶数次,逆时针
alternate-reverse 单数次,逆时针 偶数次,顺时针
animation-timing-function:;运动使用的类型(加速 减速 贝塞尔曲线运动...)
animation-play-state:;
paused 暂停
running 运动
(3)综合写法: animation:名字 运动时间 速度 延迟时间 次数;
10、定义动画
@keyframes mz{
from{margin-left:0;}
to{
margin-left:500px;
}
}