论坛 › 翻唱朗诵 › 老地方的雨——To 小辣椒 冬天的雨

来看你 发表于 2022-5-26 16:08

老地方的雨——To 小辣椒 冬天的雨

<style type="text/css">
/* 外框盒子 */
#xq { position: relative; left:-245px; top:120px; width: 1100px; height: 600px; background:#333 url('https://s3.bmp.ovh/imgs/2022/04/01/3a5e4ec22ec8c356.gif') no-repeat center/cover; box-shadow: 4px 4px 5px #888;border-radius:12px;}
body { overflow-x: hidden; } /*禁用横向滚动条 */
#baiBox {
      margin: auto;
      width: 360px;
      text-align: center;
      font-size: 2rem;
      font-weight: bold;
      color: #EEEE00;
      transform-origin: top;
      animation: yao 0.8s linear infinite alternate;
}
/* 动画 */
@keyframes yao {
      from{transform: perspective(800px) rotatex(30deg); }
      to { transform: perspective(800px) rotatex(-30deg); }
}
/* 播放按钮 */
.picBtn {
      width: 71px;
      height: 48px;
      border: none;
      outline: none;
      border-radius: 8px;
      background: transparent url('https://www.huachaowang.com/data/attachment/forum/202203/15/201924gajgggtt8sznc2u5.gif') no-repeat;
      cursor: pointer;
}
</style>

<div id="xq" >
      <div id="baiBox" style="position: absolute; left:120px; top: 40px; ">老地方的雨</div>
      <div style="position: absolute; left:120px; top: 150px; width:400px;text-align:center;">
                <img alt="" src="http://image.hnol.net/c/2021-01/10/10/202101101019478794-5088534.gif"/>
                <div style="position:absolute; width:260px; left:560px; top: 10px; text-align:center;padding:10px;font-size:1em;font-family:'微软雅黑';text-shadow:1px 1px 2px #000;">
                        <marqueescrollamount="5" direction="left" > </marquee>
                </div>
      </div>
      <!-- 控制按钮应是父盒子的第一代子元素 -->
      <div style="position:absolute; width:120px; left: 10px; top:calc(100% - 140px); text-align:center;">
                <button id="picBtn" class="picBtn"></button>
      </div>
</div>
<!-- 播放器不要界面，无需放在帖子父盒子内 -->
<audio id="music" autoplay="autoplay" loop="loop" src="https://www.joy127.com/url/88450.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://www.huachaowang.com/data/attachment/forum/202203/15/201924gajgggtt8sznc2u5.gif')") : (mu.pause(), btn.style.background="url('https://pic.imgdb.cn/item/628f71a10947543129578afd.png')");
}
mu.addEventListener("ended", function(){
      btn.style.background="url('https://pic.imgdb.cn/item/628f71a10947543129578afd.png')";
});      
</script>
<br><br><br><br><br><br><br><br>

来看你 发表于 2022-5-29 17:09

顾-念 发表于 2022-5-28 22:09
撒冷憋诗去吧……哈哈

哎居然还没憋出来 ，，

来看你 发表于 2022-5-26 16:09

@小辣椒@冬天的雨

来看你 发表于 2022-5-26 16:11

顺手牵了猫儿的制图，谢谢猫儿 @大猫咪

来看你 发表于 2022-5-26 16:13

这雨下得太大了 {:4_358:}

来看你 发表于 2022-5-26 16:15

不但淋湿衣服，连人都浇得透透的 {:4_189:}

红影 发表于 2022-5-26 18:07

图片没看到，就不看了，来听水哥的歌声，真好听{:4_187:}

红影 发表于 2022-5-26 18:07

小辣椒亲爱的还没来，影子先来蹭听了，先来陶醉{:4_199:}

冬天的雨 发表于 2022-5-26 20:10

水哥这里好像不能加分{:4_197:}

冬天的雨 发表于 2022-5-26 20:11

唱的太好了{:4_178:}

冬天的雨 发表于 2022-5-26 20:11

谢谢水哥的礼物，帮叫@小辣椒

冬天的雨 发表于 2022-5-26 20:13

来看你 发表于 2022-5-26 16:09
@小辣椒@冬天的雨

来了来了，太漂亮的礼物，这个雨是及时雨，春雨连绵好景色{:4_178:}

冬天的雨 发表于 2022-5-26 20:22

水哥好厉害的 套用猫猫的做这么漂亮，就按钮按下去出现错误

来看你 发表于 2022-5-26 20:53

红影 发表于 2022-5-26 18:07
图片没看到，就不看了，来听水哥的歌声，真好听

图片反正你看过，，猫儿也不介意看不到 {:4_189:}

听歌，听歌才是主要的 {:5_106:}

来看你 发表于 2022-5-26 20:54

红影 发表于 2022-5-26 18:07
小辣椒亲爱的还没来，影子先来蹭听了，先来陶醉

先淋一会雨 {:5_106:}

来看你 发表于 2022-5-26 20:55

冬天的雨 发表于 2022-5-26 20:10
水哥这里好像不能加分

可能代码没整对，，，加分不重要，重要的是礼送出了 {:5_112:}

来看你 发表于 2022-5-26 20:56

冬天的雨 发表于 2022-5-26 20:11
唱的太好了

昨天贴别的歌，但是唱吧整不会，今天换这个了

来看你 发表于 2022-5-26 20:57

冬天的雨 发表于 2022-5-26 20:11
谢谢水哥的礼物，帮叫@小辣椒

也谢谢冬小雨 {:4_187:}

来看你 发表于 2022-5-26 20:58

冬天的雨 发表于 2022-5-26 20:13
来了来了，太漂亮的礼物，这个雨是及时雨，春雨连绵好景色

景是春天的景，雨是冬天的雨 {:4_189:}

来看你 发表于 2022-5-26 20:59

冬天的雨 发表于 2022-5-26 20:22
水哥好厉害的 套用猫猫的做这么漂亮，就按钮按下去出现错误

就是把猫儿的代码搬了一下，看来搬得不利索。。

冬天的雨 发表于 2022-5-26 21:02

来看你 发表于 2022-5-26 20:55
可能代码没整对，，，加分不重要，重要的是礼送出了

歌听到就是礼收到{:4_187:}

查看完整版本: 老地方的雨——To 小辣椒 冬天的雨