马黑黑 发表于 2022-4-2 20:50

送只蜘蛛给鱼儿玩玩

本帖最后由 马黑黑 于 2022-4-2 20:56 编辑 <br /><br /><style>
.spiBox {
        position: relative;
        width: 100%;
        height: 500px;
}
.spiBox img {
        position: absolute;
        width: 200px;
        height: 150px;
        top: 20px;
        right: -100px;
        transform: rotate(45deg);
        animation: walk 18s linear infinite;
}
@keyframes walk {
        to { right: 100%; }
}
</style>
<div class="spiBox">
        <img src="/data/attachment/forum/202204/02/204928eqvb53ezaw8vhhe5.gif" alt="" />
</div>

马黑黑 发表于 2022-4-2 20:54

本帖最后由 马黑黑 于 2022-4-2 21:23 编辑

这是CSS @keyframes 操作GIF图片的演示实例：
<style>
.spiBox {
      position: relative;
      width: 100%;
      height: 500px;
}
.spiBox img {
      position: absolute;
      width: 200px;
      height: 150px;
      top: 20px;
      right: 10px;
      transform: rotate(45deg);
      animation: walk 15s linear infinite;
}
@keyframes walk {
      to { right: 100%; }
}
</style>
<div class="spiBox">
      <img src="/data/attachment/forum/202204/02/204928eqvb53ezaw8vhhe5.gif" alt="" />
</div>

马黑黑 发表于 2022-4-2 20:55

本帖最后由 马黑黑 于 2022-4-2 20:57 编辑

蜘蛛走动如果有漂移或滑步的感觉是因为 animation 设定时间与行进距离不配套的原因，可调试更改

加林森 发表于 2022-4-2 21:18

老黑吓鱼儿玩啊？{:4_203:}

马黑黑 发表于 2022-4-2 21:22

加林森 发表于 2022-4-2 21:18
老黑吓鱼儿玩啊？

{:4_203:}

加林森 发表于 2022-4-2 21:24

@鱼儿帮着喊：{:4_195:}

红影 发表于 2022-4-2 21:44

这个有趣，可以让静止的动图像真的在走动了{:4_173:}

鱼儿 发表于 2022-4-2 22:06

加林森 发表于 2022-4-2 21:18
老黑吓鱼儿玩啊？

吓不到我，我又不怕{:5_106:}

加林森 发表于 2022-4-2 22:18

鱼儿 发表于 2022-4-2 22:06
吓不到我，我又不怕

不怕就好。{:5_116:}{:4_204:}

马黑黑 发表于 2022-4-2 22:23

红影 发表于 2022-4-2 21:44
这个有趣，可以让静止的动图像真的在走动了

它不是静态的，有爬动动作，只是不会前行

马黑黑 发表于 2022-4-2 22:24

鱼儿 发表于 2022-4-2 22:06
吓不到我，我又不怕

知道你喜欢

鱼儿 发表于 2022-4-2 23:09

我也没说喜欢吧

马黑黑 发表于 2022-4-2 23:42

鱼儿 发表于 2022-4-2 23:09
我也没说喜欢吧

应该喜欢的

鱼儿 发表于 2022-4-3 07:41

马黑黑 发表于 2022-4-2 23:42
应该喜欢的

才怪

马黑黑 发表于 2022-4-3 07:45

鱼儿 发表于 2022-4-3 07:41
才怪

蜘蛛侠不是喜欢吗

鱼儿 发表于 2022-4-3 08:36

你这个长得像蜘蛛侠吗？

马黑黑 发表于 2022-4-3 10:12

鱼儿 发表于 2022-4-3 08:36
你这个长得像蜘蛛侠吗？

穿上衣服就像了，人家是原生的

红影 发表于 2022-4-3 10:33

马黑黑 发表于 2022-4-2 22:23
它不是静态的，有爬动动作，只是不会前行

是的，现在看起来就会前行了{:4_173:}

大猫咪 发表于 2022-4-3 10:44

哈   这个也好玩    老黑早上好   {:5_117:}{:4_204:}{:4_190:}

马黑黑 发表于 2022-4-3 11:58

大猫咪 发表于 2022-4-3 10:44
哈   这个也好玩    老黑早上好

好玩多玩玩
页: [1] 2
查看完整版本: 送只蜘蛛给鱼儿玩玩