马黑黑 发表于 2023-3-19 23:52

CSS蒙太奇手法制作动图

所用图片：

https://s1.ax1x.com/2023/03/19/pptMKxI.md.png

代码：
<style>
#mydiv {
        --state: running;
        width: 190px;
        height: 160px;
        background: url('https://s1.ax1x.com/2023/03/19/pptMKxI.md.png') 0/cover no-repeat;
        animation: run 1s steps(8,jump-none) infinite;
        animation-play-state: var(--state);
}
@keyframes run {
        0% { background-position: 0%; }
        100% { background-position: 100%; }
}
</style>

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

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

效果放在下楼。

马黑黑 发表于 2023-3-19 23:52

<style>
#mydiv {
        --state: running;
        width: 190px;
        height: 160px;
        background: url('https://s1.ax1x.com/2023/03/19/pptMKxI.md.png') 0/cover no-repeat;
        animation: run 1s steps(8,jump-none) infinite;
        animation-play-state: var(--state);
}
@keyframes run {
        0% { background-position: 0%; }
        100% { background-position: 100%; }
}
</style>

<div id="mydiv"></div>

樵歌 发表于 2023-3-20 07:41

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


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

马黑黑 发表于 2023-3-20 07:43

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

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

马黑黑 发表于 2023-3-20 08:06

图片要点：

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

红影 发表于 2023-3-20 09:07

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

红影 发表于 2023-3-20 09:20

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

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

红影 发表于 2023-3-20 09:21

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

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

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

起个网名好难 发表于 2023-3-20 09:31

本帖最后由 起个网名好难 于 2023-3-20 16:28 编辑 <br /><br />学习， 长知识了。关键是那steps，借用网友猫咪图片模仿一下（图片没处理衔接差点）
<style>
.Kitty {
    width: 565px;
    height: 614px;
    background: url(https://s1.ax1x.com/2023/03/12/ppM1ZSU.jpg) 0 / cover no-repeat;
    animation: run1 10s steps(10) 0s infinite;
        margin:12px auto;overflow:hidden;border-radius:32px;
}

@keyframes run1 {
    to {
      /* 背景图片宽度为 1600px */
      background-position: -5650px;
    }
}
</style>
<div class="Kitty"></div>

樵歌 发表于 2023-3-20 10:15

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

嗯嗯，你知道得真多{:4_173:}

马黑黑 发表于 2023-3-20 12:36

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

俺以前也拍过电影

马黑黑 发表于 2023-3-20 12:37

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

.Kitty {


很成功，也很漂亮

马黑黑 发表于 2023-3-20 12:37

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

分步我介绍的少

马黑黑 发表于 2023-3-20 12:38

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

还有jump-start和jump-end吧

马黑黑 发表于 2023-3-20 12:38

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

可以自己制作

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

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

牛人呵{:4_203:}

雨中悄然 发表于 2023-3-20 19:15

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

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

{:4_187:}原来如此。我肯定是尺寸马虎了

马黑黑 发表于 2023-3-20 20:02

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

作图一点也不能马虎

马黑黑 发表于 2023-3-20 20:04

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

二班牛

雨中悄然 发表于 2023-3-20 22:41

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

今天做了个到是成了
页: [1] 2 3 4 5 6 7 8
查看完整版本: CSS蒙太奇手法制作动图