CSS蒙太奇手法制作动图

马黑黑

所用图片：

                               
登录/注册后可看大图

代码：

1. <style>
   
2. #mydiv {
   
3.         --state: running;
   
4.         width: 190px;
   
5.         height: 160px;
   
6.         background: url('https://s1.ax1x.com/2023/03/19/pptMKxI.md.png') 0/cover no-repeat;
   
7.         animation: run 1s steps(8,jump-none) infinite;
   
8.         animation-play-state: var(--state);
   
9. }
   
10. @keyframes run {
    
11.         0% { background-position: 0%; }
    
12.         100% { background-position: 100%; }
    
13. }
    
14. </style>
    
15. 
    
16. <div id="mydiv"></div>

复制代码

这张图片从尺寸上讲不是很规整，1568*160，8个熊奔跑的分解动作。理论上，1568/8=196，但若div宽度使用 196*160 的尺寸，一些帧会出现两个动作同框（但不是完全同框）的现象，故而调整一下尺寸，div宽度设为190，大约可以避免尴尬的现象。

和那个帖子《她自身》所用到的合成动图相比，这个示例代码更简洁，忽略了一些其他设计，从而更易操作大家可以仿效。

效果放在下楼。

马黑黑

樵歌

马黑黑 发表于 2023-3-19 23:52
#mydiv {
        --state: running;
        width: 190px;

电影上动画不是要画24张连续小变化的图国吗。你这代码真神奇，那么，现在电影是不是动画都 可以用代码实现？

马黑黑

樵歌 发表于 2023-3-20 07:41
电影上动画不是要画24张连续小变化的图国吗。你这代码真神奇，那么，现在电影是不是动画都 可以用代码实 ...

帧数没有严格要求。电影是可以用代码实现的，阿凡达的一些特效，就是由代码制作的。

马黑黑

图片要点：

每一动作帧所占的宽度都应该是相等的。比如有八个动作，则 8 帧中各帧的尺寸要一样，这样就好通过 animation 的steps 进行分解了。

红影

animation 的steps，前面好像学习连续动画的比较多，这个还算是刚接触吧。非常有趣

红影

去搜索学习了一下：jump-none 同时保留动画的起始状态和结束状态。 jump-both 表示起始和结束的两个状态都跳过。

steps中的number，是将整个动画分成了number+1份。例如number为3，它其实是将一个连续的动画，分成了4份：有点像快照，在一个连续的动画上，截取均匀的4个位置快照。它的第二个参数为start或者end，表示舍弃头或尾的截图。

红影

马黑黑 发表于 2023-3-20 08:06
图片要点：

每一动作帧所占的宽度都应该是相等的。比如有八个动作，则 8 帧中各帧的尺寸要一样，这样就 ...

其实昨天就看明白了，只是这样的图图挺难找，接下来就是找图做试验了

起个网名好难

学习， 长知识了。关键是那steps，借用网友猫咪图片模仿一下（图片没处理衔接差点）

樵歌

马黑黑 发表于 2023-3-20 07:43
帧数没有严格要求。电影是可以用代码实现的，阿凡达的一些特效，就是由代码制作的。

嗯嗯，你知道得真多

马黑黑

樵歌 发表于 2023-3-20 10:15
嗯嗯，你知道得真多

俺以前也拍过电影

马黑黑

起个网名好难 发表于 2023-3-20 09:31
学习， 长知识了。关键是那steps，借用网友猫咪图片模仿一下（图片没处理衔接差点）

.Kitty {

很成功，也很漂亮

马黑黑

红影 发表于 2023-3-20 09:07
animation 的steps，前面好像学习连续动画的比较多，这个还算是刚接触吧。非常有趣

分步我介绍的少

马黑黑

红影 发表于 2023-3-20 09:20
去搜索学习了一下：jump-none 同时保留动画的起始状态和结束状态。 jump-both 表示起始和结束的两个状态都 ...

还有jump-start和jump-end吧

马黑黑

红影 发表于 2023-3-20 09:21
其实昨天就看明白了，只是这样的图图挺难找，接下来就是找图做试验了

可以自己制作

樵歌

马黑黑 发表于 2023-3-20 12:36
俺以前也拍过电影

牛人呵

雨中悄然

马黑黑 发表于 2023-3-20 08:06
图片要点：

每一动作帧所占的宽度都应该是相等的。比如有八个动作，则 8 帧中各帧的尺寸要一样，这样就 ...

原来如此。我肯定是尺寸马虎了

马黑黑

雨中悄然 发表于 2023-3-20 19:15
原来如此。我肯定是尺寸马虎了

作图一点也不能马虎

马黑黑

樵歌 发表于 2023-3-20 18:49
牛人呵

二班牛

雨中悄然

马黑黑 发表于 2023-3-20 20:02
作图一点也不能马虎

今天做了个到是成了