红影 发表于 2022-4-2 22:48

漫步（学个动图移动）TO加林森

<style type="text/css">
/* 背景图 */
.xq { position: relative; left:-206px; top:120px; width: 1000px; height: 270px; background-image: url('https://pic.imgdb.cn/item/62485e3d27f86abb2a656c36.jpg'); box-shadow: 4px 4px 5px #888; border-radius:12px;         
background-size: 1200px 270px;background-position: 1200px 0;animation: mv 32s linear infinite; }
@keyframes mv { from { background-position: 1200px 0; } to { background-position: 0 0; } }


/* 播放按钮 */
.picBtn {
      width: 144px;
      height: 52px;
      border: none;
      outline: none;
      border-radius: 8px;
      background: transparent url('https://pic.imgdb.cn/item/6238153e27f86abb2a9a9323.gif') no-repeat;
      cursor: pointer;
}
/* 行走 */
.xq img {
      position: absolute;
      width: 127px;
      height: 77px;
      top: 170px;
      left: 10px;
      animation: walk 25s linear infinite;
}
@keyframes walk {
      to { left: 88%; }
}
</style>

<div class="xq" >
      <div><img alt="" src="https://pic.imgdb.cn/item/62485e7927f86abb2a6603ec.gif"/>
                </div>   
      <!-- 控制按钮应是父盒子的第一代子元素 -->
      <div style="position:absolute; width:144px; left: 800px; top:40px; text-align:center;">
                <button id="picBtn" class="picBtn"></button>
      </div>
</div>
<!-- 因为播放器不要界面，无需放在帖子父盒子内 -->
<audio id="music" autoplay="autoplay" loop="loop" src="http://music.163.com/song/media/outer/url?id=167940.mp3" ></audio>


<script language="javascript">
var mu = document.getElementById('music');
var btn = document.getElementById('picBtn');
btn.onclick = function(){
      mu.paused ? (mu.play(), btn.style.background="url('https://pic.imgdb.cn/item/6238153e27f86abb2a9a9323.gif')") :
(mu.pause(), btn.style.background="url('https://pic.imgdb.cn/item/623814ec27f86abb2a99801f.png')");
}
mu.addEventListener("ended", function(){
      btn.style.background="url('https://pic.imgdb.cn/item/623814ec27f86abb2a99801f.png')";
});


</script>
<br><br><br><br><br><br><br><br>

红影 发表于 2022-4-2 22:49

学个动图移动。谢谢黑黑的代码。{:4_187:}@马黑黑

感谢队长送我的礼物，就把这个刚学习的漫步当作回礼吧{:4_173:}@加林森

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

不错。动画周期时长调试一下，让步进更真实一些

红影 发表于 2022-4-2 22:55

许巍的一首《漫步》，嗯，我也是第一次听。搜漫步于是找到这首{:4_173:}

加林森 发表于 2022-4-2 23:12

本帖最后由 加林森 于 2022-4-2 23:13 编辑

红影 发表于 2022-4-2 22:49
学个动图移动。谢谢黑黑的代码。@马黑黑

感谢队长送我的礼物，就把这个刚学习的漫步当作回礼 ...
不客气的啊。你很创意的啊！真漂亮！

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

马黑黑 发表于 2022-4-2 22:52
不错。动画周期时长调试一下，让步进更真实一些

调了一下，现在可以么？

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

加林森 发表于 2022-4-2 23:12
不客气的啊。你很创意的啊！真漂亮！

看黑黑那个蜘蛛很有意思，赶紧学了个{:4_173:}

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

哈   红影是用的蜘蛛代码吗，好玩    {:5_106:}{:4_204:}

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

红影 发表于 2022-4-3 10:37
调了一下，现在可以么？

理论上是可以的。可能与背景也运动有关，还是感谢狗狗的进步有点虚

转转 发表于 2022-4-3 12:37

太酷啦，飞碟贴地面飞行，雷达都发现不了，只能靠搜寻犬啦{:4_172:}

加林森 发表于 2022-4-3 12:39

红影 发表于 2022-4-3 10:38
看黑黑那个蜘蛛很有意思，赶紧学了个

喜欢的，慢步在森林里。。。。

红影 发表于 2022-4-3 19:49

大猫咪 发表于 2022-4-3 10:48
哈   红影是用的蜘蛛代码吗，好玩

是的，就是那个蜘蛛代码{:4_173:}

红影 发表于 2022-4-3 19:50

马黑黑 发表于 2022-4-3 12:01
理论上是可以的。可能与背景也运动有关，还是感谢狗狗的进步有点虚

哪个动图本身脚步也有点拌，不那么顺畅{:4_173:}

红影 发表于 2022-4-3 19:50

转转 发表于 2022-4-3 12:37
太酷啦，飞碟贴地面飞行，雷达都发现不了，只能靠搜寻犬啦

哈哈，做的时候都没想到这一点，转转的脑筋转得快的{:4_173:}

红影 发表于 2022-4-3 19:51

加林森 发表于 2022-4-3 12:39
喜欢的，慢步在森林里。。。。

队长也去做个玩{:4_173:}

加林森 发表于 2022-4-3 20:03

红影 发表于 2022-4-3 19:51
队长也去做个玩

嗯嗯，先找到感觉就去做一个出来玩。{:4_189:}

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

红影 发表于 2022-4-3 19:50
哪个动图本身脚步也有点拌，不那么顺畅

原来如此

红影 发表于 2022-4-3 21:57

加林森 发表于 2022-4-3 20:03
嗯嗯，先找到感觉就去做一个出来玩。

我在黑黑蜘蛛走墙脚的帖子里分享了几个行走的动图，队长可以用的。

红影 发表于 2022-4-3 21:58

马黑黑 发表于 2022-4-3 20:07
原来如此

本来想用那只豹的，那个跑太快，和歌曲节奏不太搭{:4_189:}

加林森 发表于 2022-4-3 22:00

红影 发表于 2022-4-3 21:57
我在黑黑蜘蛛走墙脚的帖子里分享了几个行走的动图，队长可以用的。

好的好的，我等会就去看。
页: [1] 2
查看完整版本: 漫步（学个动图移动）TO加林森