管窥CSS3动画的实现原理

马黑黑

小辣椒 发表于 2021-12-25 13:58
有弹性的，看见上面加分的会有弹性

哦，整明白了，你说的是二楼的评分。

想避免这样的情况，可以考虑图片放在一个有固定高度的 div 内，这样他就有足够的空间伸展，从而不会去撑开地下的内容

小辣椒

马黑黑 发表于 2021-12-25 15:22
哦，整明白了，你说的是二楼的评分。

想避免这样的情况，可以考虑图片放在一个有固定高度的 div 内， ...

那在帖可能加高度设置？

马黑黑

红影 发表于 2021-12-25 15:04
奇怪，这个楼层小辣椒的评分也跟着一起变化了？

我看明白了，是二楼的评分。

原理简单：图片预设是较小的高度，变大后撑开顶部的内容。解决思路是给 img 加一个父容器 div，设置这个div的高度我图片变到最大时的高度

红影

马黑黑 发表于 2021-12-25 15:20
一楼里说道，只要是CSS支持的，都可以。我的例子的大小变化，所以变大小；可以尝试改变 position 的left ...

嗯嗯，太好玩了，我也来试试

红影

马黑黑 发表于 2021-12-25 15:25
我看明白了，是二楼的评分。

原理简单：图片预设是较小的高度，变大后撑开顶部的内容。解决思路是给 i ...

哦哦，明白了，这样下面的评分就不会跟着跑了吧。

马黑黑

小辣椒 发表于 2021-12-25 15:24
那在帖可能加高度设置？

1. <!-- 父容器 -->
   
2. <div style="height:450px;">
   
3.   <img alt="" class="s2b" src="地址" />
   
4. </div>

复制代码

马黑黑

红影 发表于 2021-12-25 15:27
哦哦，明白了，这样下面的评分就不会跟着跑了吧。

对的

马黑黑

红影 发表于 2021-12-25 15:25
嗯嗯，太好玩了，我也来试试

我知讨论了原理，用它去实现什么，各自开动脑筋，多多尝试

红影

马黑黑

红影 发表于 2021-12-25 12:31
在本页中，如果我重新设定s2b，是自动执行前面一还是后面一个？

后面的

红影

马黑黑 发表于 2021-12-25 15:45
后面的

我加了top和left，它怎么不往左面跑？

红影

1. <style type="text/css">
   
2. 
   
3. @keyframes iChange {
   
4.     from { width: 272px; height:449px;top:10px; left:100px; } to { width:136px; height:225px;top:78px; left:300px; }
   
5. }
   
6. 
   
7. @-moz-keyframes iChange {
   
8.     from { width: 272px; height:449px;top:10px; left:100px; } to { width:136px; height:225px;top:78px; left:300px; }
   
9. }
   
10. 
    
11. @-webkit-keyframes iChange {
    
12.     from { width: 272px; height:449px;top:10px; left:100px; } to { width:136px; height:225px;top:78px; left:300px; }
    
13. }
    
14. 
    
15. @-o-keyframes iChange {
    
16.     from { width: 272px; height:449px;top:10px; left:100px; } to { width:136px; height:225px;top:78px; left:300px; }
    
17. }
    
18. 
    
19. .s2b {
    
20.     animation: iChange 5s infinite alternate;
    
21.     -moz-animation: iChange 5s infinite alternate;        /* Firefox */
    
22.     -webkit-animation: iChange 5s infinite alternate;        /* Safari 和 Chrome */
    
23.     -o-animation: iChange 5s infinite alternate;        /* Opera */
    
24.     width:272px;
    
25.     height:449px;
    
26. }
    
27. 
    
28. </style>
    
29. 
    
30. <img class="s2b" src="https://www.huachaowang.com/data/attachment/forum/201711/19/142453t7u7xx5hz85lpdud.jpg" alt="我来试验一下" />

复制代码

马黑黑

红影 发表于 2021-12-25 15:46
我加了top和left，它怎么不往左面跑？

你没有告诉 .s2b 用什么方式来定义 position，加一句到 .s2b 那里:

    position:relative;

红影

马黑黑 发表于 2021-12-25 15:45
后面的

嗯嗯，知道了。

红影

马黑黑 发表于 2021-12-25 16:00
你没有告诉 .s2b 用什么方式来定义 position，加一句到 .s2b 那里:

    position:relative;

加在大括号里面么？

红影

马黑黑 发表于 2021-12-25 16:00
你没有告诉 .s2b 用什么方式来定义 position，加一句到 .s2b 那里:

    position:relative;

真神奇啊，现在可以了

马黑黑

红影 发表于 2021-12-25 16:43
真神奇啊，现在可以了

应用的时候，过去学会的方法要带上

马黑黑

红影 发表于 2021-12-25 16:40
加在大括号里面么？

必须的

红影

红影

我想试试百分比，结果跑路的线路跟我想的不一样呢。
我想从左面的小图，跑到当中的大图，然后到右边的小图，再回到当中大图，最后回到初始位置。
现在看着是满世界乱跑啊