一.背景图
backgroung-repeat :
1.round : 缩小之后平铺
2.space : 不会缩小, 会在背景图之间产生间距
background-attachment:
滚动浏览器页面
1.fixed: 视差滚动(国外网站用的比较多)
2.scroll:
滚动内容
1.local:
2.scroll:
background-position:
background-image:url()
background-size: 1.300px 设置一个值, 另一个值等比自动设置
2.设置百分比, 不以图片大小为参照,而是以父容器宽度为参照
3.contain 自适应容器宽高中的较小值(是图片在容器中全部显示 , 容器可能有空白)
4.cover 自适应容器宽高中国的较大值(图片覆盖容器全部, 图片可能显示不全)
background-origin: content-box padding-box border-box 背景图片从哪里开始设置
background-clip: content-box padding-box border-box 设置的是背景裁切, 控制的是背景显示
background: url() no-repeat center/cover
二.2d动画
1.transition: 动画对象 动画时间 时间函数 动画速度(或者step(4))
transition有严格的要求,必须是有具体值的属性才能做动画
*display不能做动画, 因为只有显示和不显示
opacity可以做动画
2. 移动 transform: translate(400px,500px) ; x轴,y轴
translateX(-300px) ; 不加X或Y , 默认X轴方向
以自身左上角为移动原点
3. 缩放 transform: scale(2,1) x方向放大两倍, y方向放大一倍; 一个参数x/y方向等比缩放
tips: 以自己的中心点为坐标,缩放的时候不会影响周边的元素
4. 旋转 transform: rotate(-30deg) :
1. 默认围绕z轴旋转
2. 只要一个参数,负数为逆时针方向
transform-origin : top left; || (30px 40px)
transform:none; 清除
5. 扭曲 transform: skew(-30deg, 30deg)
正数, 沿着当前轴的逆时针方向扭曲, 反之顺时针方向,只扭曲,不移动
6. 多个transform叠加, 空格连接
transform: scale(2) rotate(30deg)
tips: rotate会将坐标系移动, 所以rotate应该放在其他属性后面
***7. translate让元素居中 left: 50%; top: 50% ; transform: translate(-50%, -50%)
定位的百分比以父容器的宽度为标准
translate的百分人以移动元素的宽度为标准
三. 3d动画
transform: translate3d(x,y,z);
或者translateX() translateY() translateZ()
transform: scale3d(x,y,z)
或者scaleX()
transform: rotate3d(1,2,3, 30deg) 旋转轴
立方体: 景深透视;
旋转角度和方向: 左手原则(电磁感应)
开启3的效果: transform-style : perserve 3d(保留3d位置)
透视距离: perspective:200px; (默认为宽高的一半)
透视坐标: perspective-origin: 100px 100px ; (x和y轴方向)