1. 透视
Perpective 属性为0 – 1200 视觉效果 , 如现实中的远小近大效果是一样的 . 相对于屏幕而言设置perpective , 当数值为800 时显示为正常大小 , 当大于800 取1000px时就会显示放大效果 , 就好比一张图片从电脑屏幕想眼睛移动了200px , 反之取600px就像是王里面移动了200px , 因此产生了放大或者缩小的视觉效果 .
2. 动画 (animation)
当刷新浏览器时 , 可以自动触发动态效果 , 即为动画 , 需要使用animation 元素 .
此元素作用于盒子本身 .
动画有两个重要属性 , 动画的名称 (name) 以及动画执行时间(duration) , 此两个元素缺一不可 .
其他属性包括 :
animation – delay : 2s ; 动画延迟时间 , 设置之后刷新了浏览器后两秒后开始执行 .
animation – iteration – count : 20 ; 动画执行次数 .
infinite 意思为执行无数次,相比于固定行为次数,无限次使用的更为频繁 .
alternat ; 意为往返 , 添加此属性可以使动画运行结束后按照原路返回 , delay记作运行两次 .
linear匀速运动 .
以上为几个常用属性 .
动画效果为设置
@keyformes{
Form{} ; /* 动画开始 */
To{}; /* 中间为动画属性 , 可以设置旋转 , 位移 , 等等一些动态效果
To{};
} ; 动画结束标志 .
也可以用百分比来代替,如10%即为从时间0到10%的这段时间所展现的效果 , 运用百分比可以控制多个时段的动画效果 , 相比于form和to只能控制起始与结束单个点效果要灵活许多 , 但是对于网页中的只有几秒钟的动态图 , 感知并不明显 .
