小辣椒 发表于 2024-3-7 23:18

周冰倩 - 爱情雨 (DJ默涵版)

<meta charset="UTF-8">
<style type="text/css">
.mnBox {
      margin: auto;
      margin-top: 150px;
      position: relative;
      background: #333 url('https://xlaj.cn/assets/file/zp/20240307231057.gif') no-repeat center/cover;
      height: 791px;
      width: 1400px;
      left: -290px;
      border: 1px solid;
      box-shadow: 0px 0px 0px 2px tan;
}

.rain {
      width: 1px;
      height: 8px;
      top: -5px;
      left: 200px;
      background: #eee;
      position: relative;
      display: block;
      animation: rain 0.5s linear infinite;
}

.rain::before, .rain::after{
      content: "";
      position: absolute;
      left: 10px;
      top: -120px;
      width: 1px;
      height: 10px;
      background: #eee;
}

.rain::after { height: 12px; left: -70px; top: 50px; }

.circle {
      position:absolute;
      width: 3px;
      height: 1px;
      left: 85px;
      top: 90%;
      background:none;
      border: 1px solid #FFF;
      border-radius: 50%;
      animation:circle 2s ease-out infinite;
}

@keyframes circle {
      0% { width:0; height:0; }
      50% { opacity:0.1; width:2%; height:2%; }
      60% { opacity:0.2; width:2%; height:2%; }
      100% { opacity:0; width:2%; height:2%; }
}

@keyframes rain {
      0% { opacity:0.5; }
      100% { opacity:0.5; top:40%;}
}
/* 旋转按钮*/
.btn-ro {
      position: absolute;
      left: 120px;
      top: 650px;
      width: 40px; height: 40px;
      line-height: 40px; font-size: 12px;
      background: linear-gradient(blue,gray,red);
      outline:none;
      color: white;
      border-radius: 50%;
      text-align: center;
      box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.25);
      cursor: pointer;
      animation: rol linear 2s infinite;
}

.btn-ro:hover { opacity: 0.8; }
.btn-ro:active { opacity: 1; }

@keyframes rol { to { transform:rotate(360deg); } }

</style>

<div id="mnBox" class="mnBox">
      <div style="color:#fff;margin:0px;padding:10px;font-size:5px;font-family:'微软雅黑';text-shadow:1px 1px 1px #000;">
                <p style="position: absolute; left:450px; width: 500px; top:550px; color: #b6d8d8;"><marqueescrollamount="3" direction="left" ><font face="微软雅黑" size="4">【周冰倩 - 爱情雨 (DJ默涵版)】我的爱情雨就这样的下了 滴滴哒哒不要再等了。。。。</font></marquee></p>
      </div>
      <div id="btn-ro" class="btn-ro">●</div>
</div>
<audio id="ymusic" src="https://file.uhsea.com/2403/da4e3b1338572fd1e46e4f47162cb4b10K.mp3" autoplay="autoplay" loop="loop"></audio>


<script language="javascript">
//雨丝放在前面
function rain() {
      var str = "";
      for(i=0; i<50; i++) {
                var l = Math.ceil(Math.random()*1200);
                str += "<span class='rain' style='left:" + l +"px;'></span>";
      }
      for(j=0;j<40; j++){
                var k1 = Math.ceil(Math.random()*100);
                var k2 = Math.round(Math.random()*20+70);
                str += "<span class='circle' style='left:" + k1 +"%;top:" + k2 +"%;'></span>";
      }
      document.getElementById('mnBox').innerHTML += str;
}
rain();

//按钮放后面
var mu = document.getElementById('ymusic');
var mbtn = document.getElementById('btn-ro');
mu.autoplay ? mbtn.style.animationPlayState="running" : mbtn.style.animationPlayState="paused";
mu.addEventListener("ended", function(){ mbtn.style.animationPlayState="paused"; })
mbtn.onclick = function(){ mu.paused ? (mu.play(), mbtn.style.animationPlayState="running") : (mu.pause(), mbtn.style.animationPlayState="paused"); }

</script>

小辣椒 发表于 2024-3-7 23:20

同一首无名，不好意思赶速度，来不及加歌词同步

liumang 发表于 2024-3-7 23:21

小辣椒 发表于 2024-3-7 23:20
同一首无名，不好意思赶速度，来不及加歌词同步

小辣椒速度的{:5_150:}

liumang 发表于 2024-3-7 23:22

@無名

小辣椒 发表于 2024-3-7 23:24

小转盘播放器，图图加了个下雨的效果

小辣椒 发表于 2024-3-7 23:25

音乐是無名的帖里面取的，我没有重新上传的，320K高音质效果很好的。

小辣椒 发表于 2024-3-7 23:29

liumang 发表于 2024-3-7 23:21
小辣椒速度的

liumang，我得下了，明天上班的，你也是早点休息，晚安了

liumang 发表于 2024-3-7 23:30

小辣椒 发表于 2024-3-7 23:29
liumang，我得下了，明天上班的，你也是早点休息，晚安了

好的，晚安，我也是就下了

無名 发表于 2024-3-7 23:36

谢谢分享，晚安！

亦是金 发表于 2024-3-8 09:24

问好！欣赏谢谢点赞了！{:5_147:}
页: [1] 2
查看完整版本: 周冰倩 - 爱情雨 (DJ默涵版)