关于3D和动画的学习
景深
近大远小 景深的样式
程序中实现的方法 perspective 元素距离 视线的距离(物体和眼睛的距离越小,
近大远小的效果越明显)
属性和属性值:
perspective: 1200px;(在父元素中使用)
transform:perspective(1200px) (在子元素中使用)
3D属性
2d场景,在屏幕上水平和垂直的交叉线x轴和y轴
3d场景,在垂直于屏幕的方法,相对于3d多出个z轴
Z轴:靠近屏幕的方向是正向,远离屏幕的方向是反向
3D:
形成3d空间 属性和属性值
transform-style:preserve-3d
关于3D的位移:
1:3D位移
transform:translate3d(tx,ty,tz)
transform:translateZ(t)
2:3D旋转
transform:rotateX()
transform:rotateY()
transform:rotateZ() rotate3d(x,y,z矢量值,angel)
transform:rotate3d()
浏览器默认的空间是2d空间 设置z轴的前提条件是让浏览器形成3d空间
属性:transform-style
属性值
- 默认值 flat 形成2d空间
- 形成3d空间 preserve-3d
位移 transform
- translate(x,y)
- translateX(x)
- translateY(y)
- translateZ(z)
- translate3d(x,y,z)
旋转 transform
- rotateX() 单杠运动
- rotateY() 钢管舞
- rotateZ() rotate() 默认就是沿着z轴旋转
- rotate3d(四个参数) x,y,z的矢量值 角度值
- rotate3d(1/0,1/0,1/0,30deg)
动画的使用:
属性:
animation-name
/* 动画的名字 */
/* animation-name:divMove ; */
animation-duration
/* 动画运动的时间 */
/* animation-duration: 3s; */
animation-timing-function
/* 动画运动的方式 */
/* animation-timing-function: linear; */
animation-delay
动画运动前等待的时间
animation-iteration-count
/* 动画运动的次数:number/infinite 无限循环*/
/* animation-iteration-count: infinite; */
animation-direction
/* 方向 */
/* animation-direction: alternate-reverse */
animation-play-state
play-state 运动状态 属性值:
paused暂停;running 运动;
/* 简写方式 */
animation: divMove 3s linear infinite
概括:
animation 动画的属性值
name 名字;timing-function 运动方式;duration 运动所需要的时间;delay 运动前等待的时间;iteration-cout:infinite 运动次数及 无限循环;direction 运动的方向;play-state 运动状态 属性值:
paused暂停;running 运动;
简写方式:animation :名字 时间 方式 次数;
step-star 不要运动过程 ,只要开始和结果。
——————————————
需求:浏览器中有一个盒子
- 浮动
- 定位
- 盒模型
- 位移
-
- 动画
关键帧动画 gif动态图
1.需要声明帧动画
- 在css样式表中声明
- @keyframs 自定义的动画名字{动画的运动方式}
- 第一种:单次运动方式 from...to
- 第二种:多次运动方式 百分比
2.调用动画
- 使用动画的属性调用 - 哪个元素运动就给哪个元素添加动画
注意:
- 动画需要结合定位属性使用
- 起始和结束的位置属性一定要是相同
总结过渡和动画的区别
- 相同点 可以控制元素在浏览器中移动
- 不同点 过渡需要人为控制(hover) 刷新浏览器动画自动触发