2017-12-18今天学了3D和动画,神奇的效果!

原创 moxiao 随笔 个人笔记 269阅读 2017-12-18 22:10:57 举报

今天学了3D和动画,效果还是很炫酷的,下面是知识点:
平面 2D
横向(x)、纵向(y)

3D
x,y,z

transform 新增函数
rotateX()
rotateY()
rotateZ()
translateZ()

perspective 景深(近大远小) – 父级
perspective-origin 景深基点
transform-style建立3D空间

动画
帧动画

关键帧——keyFrames

animation 调用关键帧
animation-name 动画名称(关键帧名称)
animation-duration 动画持续时间

animation-delay 动画延迟
只是第一次

animation-iteration-count 重复次数
infinite 无限

animation-direction 播放前重置
动画是否重置后再开始播放
alternate 动画直接从上一次停止的位置开始执行
normal 动画第二次直接跳到0%的状态开始执行

animation-fill-mode 
设置动画时间之外的状态
none 不设置动画之外的状态
forwards 动画结束时的状态
backwards 动画开始时的状态
both 动画结束或开始的状态

animation-timing-function 动画运动形式
linear 匀速。
ease 缓冲。
ease-in 由慢到快。
ease-out 由快到慢。
ease-in-out 由慢到快再到慢。
cubic-bezier(number, number, number, number): 特定的贝塞尔曲线类型,4个数值需在[0, 1]区间内

animation-play-state 播放状态
running 播放
paused 暂停

今天做了点小东西:
色子
html 代码

原本是用的色子的图片,但是这上面图片不好用,所以改成了数字加背景图。

滚动图:
html 代码

跟上面一样,没法上传图片,所以只好用数字来显示了。

明天讲响应式,然后又是做页面,加油!
生日快乐!

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复