红影 发表于 2021-12-25 17:08

<style type="text/css">

@keyframes iChange {
    0% { width: 136px; height:225px;top:70px; left:100px; } 25% { width:218px; height:359px;top:18px; left:240px; }
} 50% { width:136px; height:225px;top:70px; left:380px; }
}75% { width:218px; height:359px;top:18px; left:240px; }
}100% { width:136px; height:225px;top:70px; left:100px; }
}

@-moz-keyframes iChange {
    0% { width: 136px; height:225px;top:70px; left:100px; } 25% { width:218px; height:359px;top:18px; left:240px; }
} 50% { width:136px; height:225px;top:70px; left:380px; }
}75% { width:218px; height:359px;top:18px; left:240px; }
}100% { width:136px; height:225px;top:70px; left:100px; }
}

@-webkit-keyframes iChange {
    0% { width: 136px; height:225px;top:70px; left:100px; } 25% { width:218px; height:359px;top:18px; left:240px; }
} 50% { width:136px; height:225px;top:70px; left:380px; }
}75% { width:218px; height:359px;top:18px; left:240px; }
}100% { width:136px; height:225px;top:70px; left:100px; }
}

@-o-keyframes iChange {
    0% { width: 136px; height:225px;top:70px; left:100px; } 25% { width:218px; height:359px;top:18px; left:240px; }
} 50% { width:136px; height:225px;top:70px; left:380px; }
}75% { width:218px; height:359px;top:18px; left:240px; }
}100% { width:136px; height:225px;top:70px; left:100px; }
}

.s2b {position:relative;
    animation: iChange 5s infinite alternate;
    -moz-animation: iChange 5s infinite alternate;      /* Firefox */
    -webkit-animation: iChange 5s infinite alternate;      /* Safari 和 Chrome */
    -o-animation: iChange 5s infinite alternate;      /* Opera */
    width:136px;
    height:225px;
}

</style>
<div style="height:500px;">


<img class="s2b" src="https://www.huachaowang.com/data/attachment/forum/201711/19/142453t7u7xx5hz85lpdud.jpg" alt="再玩个" />

</div>

红影 发表于 2021-12-25 17:09

理想很丰满，现实很骨感{:4_189:}我感觉应该是按部就班进行的，显示出来的确不是。

马黑黑 发表于 2021-12-25 17:12

红影 发表于 2021-12-25 17:09
理想很丰满，现实很骨感我感觉应该是按部就班进行的，显示出来的确不是。

创意的实现需要坚实的基础

红影 发表于 2021-12-25 17:26

马黑黑 发表于 2021-12-25 17:00
应用的时候，过去学会的方法要带上
我只是看一个，就只会看到的这个{:4_173:}

红影 发表于 2021-12-25 17:30

我39楼做新的试验，结果29楼貌似也影响到了？

红影 发表于 2021-12-25 17:31

先吃饭去，吃饱了再来折腾{:4_173:}

马黑黑 发表于 2021-12-25 18:15

红影 发表于 2021-12-25 17:31
先吃饭去，吃饱了再来折腾

看样子玩开心了

东篱闲人 发表于 2021-12-25 18:15

马黑黑 发表于 2021-12-25 11:35
@东篱闲人 二楼征用你的茶几

这科学家整这玩意，太深奥了，迷糊。茶几随便用，俺再给你添点新茶。。。。{:5_112:}

马黑黑 发表于 2021-12-25 18:16

红影 发表于 2021-12-25 17:26
我只是看一个，就只会看到的这个

多核大脑还是要锻造的{:4_170:}

马黑黑 发表于 2021-12-25 18:17

东篱闲人 发表于 2021-12-25 18:15
这科学家整这玩意，太深奥了，迷糊。茶几随便用，俺再给你添点新茶。。。。

那就谢谢了

红影 发表于 2021-12-25 18:25

<style type="text/css">

@keyframes iChange {
    0% { width: 136px; height:225px;top:70px; left:100px; }
25% { width:218px; height:359px;top:18px; left:240px; }
50% { width:136px; height:225px;top:70px; left:380px; }
75% { width:218px; height:359px;top:18px; left:240px; }
100% { width:136px; height:225px;top:70px; left:100px; }
}

@-moz-keyframes iChange {
    0% { width: 136px; height:225px;top:70px; left:100px; }
25% { width:218px; height:359px;top:18px; left:240px; }
50% { width:136px; height:225px;top:70px; left:380px; }
75% { width:218px; height:359px;top:18px; left:240px; }
100% { width:136px; height:225px;top:70px; left:100px; }
}

@-webkit-keyframes iChange {
    0% { width: 136px; height:225px;top:70px; left:100px; } 25% { width:218px; height:359px;top:18px; left:240px; }
50% { width:136px; height:225px;top:70px; left:380px; }
75% { width:218px; height:359px;top:18px; left:240px; }
100% { width:136px; height:225px;top:70px; left:100px; }
}

@-o-keyframes iChange {
    0% { width: 136px; height:225px;top:70px; left:100px; } 25% { width:218px; height:359px;top:18px; left:240px; }
50% { width:136px; height:225px;top:70px; left:380px; }
75% { width:218px; height:359px;top:18px; left:240px; }
100% { width:136px; height:225px;top:70px; left:100px; }
}

.s2b {position:relative;
    animation: iChange 24s infinite alternate;
    -moz-animation: iChange 5s infinite alternate;      /* Firefox */
    -webkit-animation: iChange 5s infinite alternate;      /* Safari 和 Chrome */
    -o-animation: iChange 5s infinite alternate;      /* Opera */
    width:136px;
    height:225px;
}

</style>
<div style="height:500px;">


<img class="s2b" src="https://www.huachaowang.com/data/attachment/forum/201711/19/142453t7u7xx5hz85lpdud.jpg" alt="再玩个" />

</div>

红影 发表于 2021-12-25 18:26

马黑黑 发表于 2021-12-25 18:16
多核大脑还是要锻造的

这下子彻底不动了，你看上面这个，前面还乱跑呢，现在不会动了{:4_173:}

东篱闲人 发表于 2021-12-25 18:29

马黑黑 发表于 2021-12-25 18:17
那就谢谢了

不客气，随便喝哈。。。。

https://s4.ax1x.com/2021/12/25/TaD3es.jpg

马黑黑 发表于 2021-12-25 18:32

红影 发表于 2021-12-25 17:09
理想很丰满，现实很骨感我感觉应该是按部就班进行的，显示出来的确不是。
代码中有多余的大括号。另，先不考虑兼容旧版浏览器，做好主要的就行：
@keyframes iChange {
      0% { width: 136px; height:225px;top:70px; left:100px; }
      25% { width:218px; height:359px;top:18px; left:240px; }
      50% { width:136px; height:225px;top:70px; left:380px; }
      75% { width:218px; height:359px;top:18px; left:240px; }
      100% { width:136px; height:225px;top:70px; left:100px; }
}

.s2b {position:relative;
    animation: iChange 5s infinite alternate;
    width:136px;
    height:225px;
}

</style>
<div style="height:500px;">
      <img class="s2b" src="https://www.huachaowang.com/data/attachment/forum/201711/19/142453t7u7xx5hz85lpdud.jpg" alt="再玩个" />
</div>

马黑黑 发表于 2021-12-25 18:34

东篱闲人 发表于 2021-12-25 18:29
不客气，随便喝哈。。。。

还是茶青呢

马黑黑 发表于 2021-12-25 18:35

红影 发表于 2021-12-25 18:26
这下子彻底不动了，你看上面这个，前面还乱跑呢，现在不会动了

你去看看我修正的代码

红影 发表于 2021-12-25 18:56

嗯嗯，现在可以了。原来多复制了半边的大括号{:4_173:}

红影 发表于 2021-12-25 19:08

马黑黑 发表于 2021-12-25 18:35
你去看看我修正的代码

这个好像变快了，我把时间都加大到24秒了，还是觉得比前面的5秒还快。

马黑黑 发表于 2021-12-25 19:28

红影 发表于 2021-12-25 19:08
这个好像变快了，我把时间都加大到24秒了，还是觉得比前面的5秒还快。

不会是喝醉了吧？我在本地测试没问题的

红影 发表于 2021-12-25 19:37

马黑黑 发表于 2021-12-25 19:28
不会是喝醉了吧？我在本地测试没问题的

是不是时间值越大应该动得越慢的？
页: 1 2 [3] 4 5 6
查看完整版本: 管窥CSS3动画的实现原理