HTML+CSS基础14

1.背景图的固定

（默认情况下背景图跟着滚动条滚动，固定的话内容跟着滚，但是背景图是固定的）
background-attachment：scroll（滚动）/fixed（固定）

2.背景图大小

background-size：宽度 高度；
a.数值/百分比（百分比设置会导致图片变形）
b.关键字：
cover：图片不断延伸，直到充满整个盒子，可能会出现背景图裁切
contain：图片不断拉伸，拉伸到碰到某个边缘的时候就停止拉伸，可能会出现六百的情况
复合写法background：pink url（） no-repeat 0 0/contain；背景图的位置和大小用/隔开

3.背景图的起始位置

background-origin：
padding-box：从padding区域开始显示
border-box：从边框区域开始显示
content-box：从内容去开始显示

4.背景图从哪里开始被裁掉

background-clip：
border-box：从边框之后不显示
padding-box：padding区域后不显示
content-box：内容区后不显示

5.变形属性

A.变形位移
X轴位移：transform：translateX（）向右为正 向左为负
Y轴位移：transform：translateY（）向下为正 向上为负
Z轴位移：transform：translateZ（）向前为正，向后为负（结合景深和3d舞台）
景深：perspective：数值+px；需要加在父元素身上，近大远小（值越小里平面越近）
3d舞台：transform-style：preserve-3d；默认值（flat 2d）加在外层大盒子身上（如果要看3d空间的效果，需要添加这个属性，且加完后进行旋转，效果更明显）
transform：rotateX/Y（40deg）；舞台旋转
XY都位移：transform：translateX（-100px）translateY（100px）；
或transform：translate（-100px，100px）；transform：translate（-100px）只位移X；
XYZ都位移：
transform：translateX（-100px）translateY（100px）translateZ（100px）；
或transform：tranlate3d（-100px，100px，100px ）；
位移实现水平垂直居中（不论子元素宽高 如何修改或者是否设置，百分比都可以设置）
a.元素设置：position：absolute；
b.元素设置top：50%；left：50%；
c.利用位移向左向上拉取transform：translate（-50%，-50%）；
B.变形旋转
x轴旋转：transform：rotateX（数值deg）需要加景深和3d舞台；
y轴旋转：transform：rotate Y（数值deg）需要加景深和3d舞台；
z轴旋转：transform：rotateZ（数值deg）；可以直接看效果，顺时针为正，逆时针为负
变形原点：transform-origin：水平 垂直；加在变形元素身上
a.可以是数值px；
b.可以是百分比；
c.可以是和背景图一样的关键字
注：立方体设置透明后，如果不想看到正面之外的其他面，设置背部隐藏：backface-visiblity：hidden；
xyz都旋转：transform：rotateX（数值deg）rotateY（数值deg） rotateZ（数值deg）；
或transform：rotate3d（a，b，c，d）；acb的取值为0或1，0表示不旋转，1表示旋转，d旋转角度
例：transform：rotate3d（1，1，0，360deg）；
C.变形缩放
x缩放 transform：scaleX（数值） 0直接隐藏 1不缩放 0-1缩小 >1放大
y缩放 transform：scaleY（数值） 0直接隐藏 1不缩放 0-1缩小 >1放大
z缩放 transform：scaleZ（数值） 0直接隐藏 1不缩放 0-1缩小 >1放大
xy缩放transform：scale（x缩放数值，y缩放数值）只写一个值是X和Y
xyz都缩放transform：scale3d（x缩放数值，y缩放数值，z缩放值）没缩放写1即可

6.动画

A.定义动画
方式一：关键字@keyframes 动画名{
关键帧划分的是时间
from{}
to{}
}
方式二：关键字@keyframes 动画名{
关键帧（可以随意划分）
0%{}
20%{}
50%{}
100%{}
}
B.使用动画
animation-name：动画名；
animation-duration：动画执行时间；
animation-iteration-count；动画执行的次数 具体的数值/infinite（无限次）
animation-delay：动画延迟的时间
animation-timing-function：动画效果
复合写法：animation：动画名 动画执行时间 动画执行次数 动画延迟时间 动画效果；
动画停留的关键帧：animation-fill-mode：forwards；停留在最后一个关键帧
动画停止：animation-play-state：pasused；
动画需要注意的几点：
a.动画的浏览器前缀要加在@和keyframes之间，如@-webkit-keyframes 动画名{}
b.定义动画和使用动画不分先后顺序
c.动画中不能缺失的属性是：animation-name（动画名）和animation-duration（动画执行时间）