html3D效果与动画,宅男炫酷作品

170 阅读1分钟

一、3D的主要属性及我的感想 3D,主要属性transform,translate(xyz),rotate旋转,scale缩放,origin,设置原点 主要谈谈感受吧,3D这东西得靠感觉,(讲完了^v^)刚开始学的时候自己还有点感觉,后来越转越懵,空间感强的学习能力也会好一些

二、动画

@keyframes 关键帧的意思

可以做多个状态的变化

取的值:move

0%是开始状态

100%是结束状态

From:0%

To:100%

 

动画分布:补间动画,逐帧动画

动画的顺序:

动画名称,动画时长,速度曲线,延迟时间,重复次数,动画方向,执行完毕时的状态

Animation-name:动画名称

值一般是给类名,谁用给谁

Animation-duration:

1、默认的是ease匀速运动   

2、steps:步常(8步

3、Forwards:停留在结束位子

4、infinite无限循环

Move 位子的意思

花多长时间走完

元素可以添加多个动画,用,号隔开

动画必须要写的属性的name和duration名字和时长****

总结:动画的常见属性

@keyframes:规定动画

Animation:动画属性的简写

Animation-name:规定keyframes动画的名词

Animation-duration:花多长时间

Alternate:逆向播放

Steps:分几步完成动画

Animation-timing-function:steps(n)

默认是ease

如果有两个时间值,第一个表示时长,第二个表示延迟时间