CSS 第四天 多重背景 变形 过渡

时间:2023-03-09 06:53:12
CSS 第四天  多重背景 变形 过渡

背景原点:
background-origin 图片起始位置 border-box包括边框 padding-box边框内

content-box 内容内

**background-repeat 为no-repeat才有效

背景显示区域
background-clip 超过部分被裁剪,属性同上

背景尺寸
background-size 设置背景大小,auto原图片大小,可以是数值或百分比(

表示长宽) cover缩放至能覆盖整个容器 contain缩放至某一边能覆盖容器

**多重背景格式
background:背景色 背景图 背景位置/尺寸 平铺方式 attachment 原点 显示区

**背景色只能存在一个,所以当我们要设置多个背景图又要加上背景色时,建议
背景色放在最后一个写,避免被覆盖,例如:

background:url(1.jpg) center center/100px 100px no-repeat content-
box;
background:url(2.jpg) center center/100px 100px no-repeat content-
box;
background:url(3.jpg) center center/100px 100px no-repeat content-box
#cccccc;

  

*上面三组background可以写在一起,用逗号隔开

变形
transform:function(); translate()/translateX()/translateY() 2D平移

rotate() 2D旋转 scale()2D缩放 skew()斜切扭曲 translate3d() 3D位移

变形方法非常多,建议有兴趣可以去手册查看并亲自做出效果
例如,鼠标悬停时放大1.1倍:

div:hover{transform:scale(1.1,1.1);}

  

过渡动画
过渡属性:transition-property 例如background-color width height等 带

有数值的属性基本都支持过渡动画,也可以用all表示全部
过渡时间:transition-duration 过渡这个过程所用的时间
过渡函数:transition-timing-function 主要是对过渡速度的描述 默认:

ease 逐渐变慢 linear:匀速 ease-in:加速 ease-out:减速 ease-in-out:

先加速再减速 cubic-bezer(n,n,n.n):自定义
过渡延迟:transition-delay 过渡开始前的延迟时间

过渡缩写:transition:过渡属性 过渡时间 过渡函数 过渡延迟;
例如,下面过渡动画:

transition-property:all;
transition-duration:.5s;
transition-timing-function:ease-in;
transition-delay:.1s;

  

可以缩写为:

transition:all .5s ease-in .1s;