💎一站式轻松地调用各大LLM模型接口,支持GPT4、智谱、星火、月之暗面及文生图 广告
# CSS关键帧与动画 ## 动画的原理 即静态图片的快速切换,快到人眼分辨不出来的时候就可以产生连续移动动画的效果。 ## 需要多快 对于纯静态图片来说,需要一秒切换三十张(游戏的CG),对于拍摄来说,需要一秒切换24张(电影)。 因为摄像机拍出来的东西并不是纯静态的,它的每一帧包含有它的上一帧和下一帧的部分信息(比如如果说风扇再转,拍摄出来的效果的每一张截图都是模糊的,相反赛车游戏,你截屏的每一张都是清晰的风景壁纸) ## 帧 通解即最小单元,这个概念在网络上也同样适用,在这里就是构成动画的每一张静态图片。 ## 关键帧 对于早期动画来说,例如《大闹天宫》,30帧的动画几乎每一帧都是画出来的,但是现在在计算机的帮助下不需要了,计算机可以自动推算补帧,而你需要给出的是**关键帧**,关键帧与关键帧之间的动画则由计算机自己脑补。比如第一个关键帧说盒子在左边,第二个关键帧说盒子在右边,那么计算机会自动补齐从左到右的移动过程。 ## 实战一下 HTML部分 ```html <body> <div class="box"></div> </body> ``` 非常简单,一个盒子就可以了 css部分 ```css // 设置背景颜色 body { background: #333; } .box { background: #fff; // 设置显眼的颜色 width: 200px; // 固定宽,为了看的见 height: 200px; // 固定高,为了看的见 position: relative; // 相对定位 animation-name: myanimation; // 动画名字,指定关键帧的名字就可以,细节在下面的定义 animation-duration: 4s; // 动画持续时间,间接控制速率,越长越慢! } // 定义关键帧 @keyframes myanimation { // 必须。在动画开始时,关键帧的位置 0% { background: #fff; left: 0; top: 0; } // 在动画四分之一时,关键帧的位置 25% { background: #f00; left: 300px; top: 0; } // 在动画一半时,关键帧的位置 50% { background: #0f0; left: 300px; top: 300px; } // 在动画四分之三时,关键帧的位置 75% { background: #00f; left: 0; top: 300px; } // 必须,在动画结束时,关键帧的位置 100% { background: #fff; left: 0; top: 0; } } ``` 更多内容下个篇章见 > 本文作者: 不爱喝橙子汁