h5c3 part5

标签：国外   scroll   网站   city   中国   tips   cal   中心   bsp   

一.背景图
　　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让元素居中
　　定位的百分比以父容器的宽度为标准
　　translate的百分人以移动元素的宽度为标准

三. 3d动画
　　transform: translate3d(x,y,z);
　　或者translateX() translateY() translateZ()

　　transform: scale3d(x,y,z)
或者scaleX()

　　transform: rotate3d(1,2,3, 30deg) 旋转

立方体: 景深透视; 

旋转角度和方向: 左手原则(电磁感应)

开启3d效果: transform-style : perserve 3d(保留3d位置)

透视距离: perspective:200px; (默认为宽高的一半)

透视坐标: perspective-origin: 100px 100px ; (x和y轴方向)

h5c3 part5

标签：国外   scroll   网站   city   中国   tips   cal   中心   bsp   

原文地址：https://www.cnblogs.com/noraZhang/p/10044732.html