小辣椒 发表于 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 ...
嗯嗯，太好玩了，我也来试试{:4_173:}
马黑黑 发表于 2021-12-25 15:25
我看明白了，是二楼的评分。
原理简单：图片预设是较小的高度，变大后撑开顶部的内容。解决思路是给 i ...
哦哦，明白了，这样下面的评分就不会跟着跑了吧。
小辣椒 发表于 2021-12-25 15:24
那在帖可能加高度设置？
<!-- 父容器 -->
<div style="height:450px;">
<img alt="" class="s2b" src="地址" />
</div>
红影 发表于 2021-12-25 15:27
哦哦，明白了，这样下面的评分就不会跟着跑了吧。
对的
红影 发表于 2021-12-25 15:25
嗯嗯，太好玩了，我也来试试
我知讨论了原理，用它去实现什么，各自开动脑筋，多多尝试
<style type="text/css">
@keyframes iChange {
from { width: 272px; height:449px;top:10px; left:100px; } to { width:136px; height:225px;top:78px; left:300px; }
}
@-moz-keyframes iChange {
from { width: 272px; height:449px;top:10px; left:100px; } to { width:136px; height:225px;top:78px; left:300px; }
}
@-webkit-keyframes iChange {
from { width: 272px; height:449px;top:10px; left:100px; } to { width:136px; height:225px;top:78px; left:300px; }
}
@-o-keyframes iChange {
from { width: 272px; height:449px;top:10px; left:100px; } to { width:136px; height:225px;top:78px; left:300px; }
}
.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:272px;
height:449px;
}
</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 12:31
在本页中，如果我重新设定s2b，是自动执行前面一还是后面一个？
后面的
马黑黑 发表于 2021-12-25 15:45
后面的
我加了top和left，它怎么不往左面跑？
<style type="text/css">
@keyframes iChange {
from { width: 272px; height:449px;top:10px; left:100px; } to { width:136px; height:225px;top:78px; left:300px; }
}
@-moz-keyframes iChange {
from { width: 272px; height:449px;top:10px; left:100px; } to { width:136px; height:225px;top:78px; left:300px; }
}
@-webkit-keyframes iChange {
from { width: 272px; height:449px;top:10px; left:100px; } to { width:136px; height:225px;top:78px; left:300px; }
}
@-o-keyframes iChange {
from { width: 272px; height:449px;top:10px; left:100px; } to { width:136px; height:225px;top:78px; left:300px; }
}
.s2b {
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:272px;
height:449px;
}
</style>
<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
后面的
嗯嗯，知道了。{:4_187:}
马黑黑 发表于 2021-12-25 16:00
你没有告诉 .s2b 用什么方式来定义 position，加一句到 .s2b 那里:
position:relative;
加在大括号里面么？
马黑黑 发表于 2021-12-25 16:00
你没有告诉 .s2b 用什么方式来定义 position，加一句到 .s2b 那里:
position:relative;
真神奇啊，现在可以了{:4_177:}
红影 发表于 2021-12-25 16:43
真神奇啊，现在可以了
应用的时候，过去学会的方法要带上
红影 发表于 2021-12-25 16:40
加在大括号里面么？
必须的
<style type="text/css">
@keyframes hy {
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 hy {
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 hy {
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 hy {
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; }
}
.lss {position:relative;
animation: hy 6s infinite alternate;
-moz-animation: hy 6s infinite alternate; /* Firefox */
-webkit-animation: hy 6s infinite alternate; /* Safari 和 Chrome */
-o-animation: hy 6s infinite alternate; /* Opera */
width:136px;
height:225px;
}
</style>
<div style="height:500px;">
<img class="lss" src="https://www.huachaowang.com/data/attachment/forum/201711/19/142453t7u7xx5hz85lpdud.jpg" alt="再玩个" />
</div>
我想试试百分比，结果跑路的线路跟我想的不一样呢。
我想从左面的小图，跑到当中的大图，然后到右边的小图，再回到当中大图，最后回到初始位置。
现在看着是满世界乱跑啊{:4_173:}