论坛 › 现代文学 › 【三伏消暑】第九天 帆 （扬帆起航）

小辣椒 发表于 2022-7-24 13:09

【三伏消暑】第九天 帆 （扬帆起航）

<style>
#papa { left: -252px; width: 1121px; height: 639px; top: 50px; background: gray url('https://pic.imgdb.cn/item/62dd2dddf54cd3f93715be20.jpg'); overflow: hidden; box-shadow: 3px 3px 20px #000; position: relative; }
#boat { position: absolute; width: 200px; height: 118px; top: calc(100% - 150px); filter: blur(1px); animation: boating 20s linear infinite; }
#playbox { position: absolute; left: 500px; bottom: 10px; padding: 10px; background: rgba(255,255,255,.2); border-radius: 6px; backdrop-filter: blur(1px); overflow: hidden; box-shadow: 1px 1px 2px rgba(0,0,0,.15); z-index: 100; }
#playbox span { margin-left: 10px; font: normal 1.2em sans-serif; color: #eee; text-shadow: 1px 1px 1px #000; }
#btnplay { width: 30px; height: 30px; border-radius: 50%; outline: none; border: none; }
#btnplay:hover { background: #aaa; color: #ff0000; cursor: pointer; }
@keyframes boating { from { left: 100%; } to { left: -200px; } }
</style>

<div id="papa">
      <img id="boat" src='https://638183.freep.cn/638183/t22/hl/boat.gif' alt="" />
      <div id="playbox"><input id="btnplay" type="button" value=">" /><span>扬帆远航--李丹阳</span></div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=501214939.mp3" autoplay="autoplay" loop="loop"></audio>

<div id="mnBox" class="mnBox">
      <div style="color:#82000b;margin:0px;padding:10px;font-size:5px;font-family:'微软雅黑';text-shadow:1px 1px 1px #999;">
                <p style="position: absolute; width:400px;left:440px; top:940px; color: #82000b;"><marqueescrollamount="3" direction="left" ><font face="微软雅黑" size="5">花潮论坛三伏消暑活动第九天（帆）扬帆远航同时感谢黑黑老师为活动制作的最简洁的播放器 花潮论坛感谢有你
<script>
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', () => btnplay.value = '||');
aud.addEventListener('pause', () => btnplay.value = '>');
</script>
</div></div><br><br><br>

小辣椒 发表于 2022-7-24 13:16

花潮论坛三伏消暑活动第九天（帆）扬帆远航同时感谢黑黑老师为活动制作的最简洁的播放器 花潮论坛感谢有你@马黑黑

红影 发表于 2022-7-24 13:16

黑黑最新效果里的小船呢，亲爱的学得真快，漂亮的制作{:4_187:}

红影 发表于 2022-7-24 13:17

亲爱的，滚动字怎么跑最上面去了{:4_173:}

小辣椒 发表于 2022-7-24 13:19

谢谢黑黑，找不到小动图的船，你的就是我的了{:4_170:}

小辣椒 发表于 2022-7-24 13:20

红影 发表于 2022-7-24 13:17
亲爱的，滚动字怎么跑最上面去了
亲爱的，不是黑黑代码里面的我自己瞎加了{:4_170:}
预览尺寸和发帖尺寸不一样，没有加进父框里面，现在捣鼓好了

红影 发表于 2022-7-24 14:20

小辣椒 发表于 2022-7-24 13:20
亲爱的，不是黑黑代码里面的我自己瞎加了
预览尺寸和发帖尺寸不一样，没有加进父框里面，现在 ...

嗯嗯，看到了，这个帖子真清爽{:4_185:}

加林森 发表于 2022-7-24 14:35

这个制作真的很漂亮，真是清凉一下了。{:4_199:}

闲言不语 发表于 2022-7-24 14:43

辣椒等等俺，搭个顺风船。{:4_189:}

梦油 发表于 2022-7-24 14:55

小辣椒朋友下午好！一望无垠的大海，海上航行的船只，构成了一幅多么美的画面啊！

浣溪沙 发表于 2022-7-24 15:12

很是好看好听，还很能鼓舞人，大赞{:4_178:}

马黑黑 发表于 2022-7-24 15:42

小辣椒 发表于 2022-7-24 13:19
谢谢黑黑，找不到小动图的船，你的就是我的了

{:5_108:}

马黑黑 发表于 2022-7-24 15:44

励志消暑

樵歌 发表于 2022-7-24 16:25

把小黑的无人驾驶的小船来借来扬帆起航，奔向大海。{:4_187:}

醉美水芙蓉 发表于 2022-7-24 16:40

绿叶清舟 发表于 2022-7-24 16:47

这只小船用到这里正好呢

小辣椒 发表于 2022-7-24 20:52

加林森 发表于 2022-7-24 14:35
这个制作真的很漂亮，真是清凉一下了。

队长，说实话这个图图不漂亮的，我只是自己网络找了个图图

小辣椒 发表于 2022-7-24 20:53

闲言不语 发表于 2022-7-24 14:43
辣椒等等俺，搭个顺风船。

好吧，一起去远航{:4_170:}

小辣椒 发表于 2022-7-24 20:53

梦油 发表于 2022-7-24 14:55
小辣椒朋友下午好！一望无垠的大海，海上航行的船只，构成了一幅多么美的画面啊！

谢谢梦油欣赏{:4_187:}

小辣椒 发表于 2022-7-24 20:54

浣溪沙 发表于 2022-7-24 15:12
很是好看好听，还很能鼓舞人，大赞

最新潮的歌曲，真正能量的{:4_173:}

查看完整版本: 【三伏消暑】第九天 帆 （扬帆起航）