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(动画执行时间)