梦风雨 发表于 2025-3-4 22:50

心要让你听见

本帖最后由 梦风雨 于 2025-3-4 22:58 编辑 <br /><br />
<style type="text/css">
/* 背景色动态变换的文本 */
.bgBox {
      margin: auto;
      width: 760px;
      padding: 40px;
      border: 1px solid;
      font: bold 4em/1em Arial;
      color: rgba(255,0,0,.4);
      text-shadow: 2px 2px 4px yellow;
      background: #333 linear-gradient(green, red);
}
</style>

<div id="cup" class="bgBox">
      恋晴<br>恋雨<br>又恋歌<br>
      <p style="text-align:right;">心要让你听见</p>
</div>

<script>
var flag = true;
var bb = document.querySelector('.bgBox');
var tt = setInterval(change, 2000);

function change(){
      var r = Math.floor(Math.random()*256),
                g = Math.floor(Math.random()*256),
                b = Math.floor(Math.random()*256);
      bb.style.background = 'linear-gradient(45deg,rgb(' + r + ',' + g + ',' + b + '),rgb(' + g +',' + b + ',' + r +'))';
}

bb.onclick = function(){
      flag == true ? clearInterval(tt) : tt = setInterval(change, 2000);
      flag = -flag;
}
</script>


<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2085021342.mp3" autoplay="" loop=""></audio>

小辣椒 发表于 2025-3-4 23:04

风雨文字加了背景颜色，漂亮{:4_199:}

小辣椒 发表于 2025-3-4 23:04

感谢分享{:4_171:}

梦风雨 发表于 2025-3-4 23:06

向马老师学习。{:4_191:}

梦风雨 发表于 2025-3-4 23:07

小辣椒 发表于 2025-3-4 23:04
风雨文字加了背景颜色，漂亮

分享聆听音乐，当然听到你的分享歌曲。{:4_191:}

梦风雨 发表于 2025-3-4 23:11

恋晴恋雨又恋歌{:4_191:}

梦风雨 发表于 2025-3-4 23:21

祝：大家女神节快乐！{:4_191:}

红影 发表于 2025-3-5 10:47

好听，制作漂亮。感谢梦风雨的美好祝福{:4_187:}

梦风雨 发表于 2025-3-5 13:24

红影 发表于 2025-3-5 10:47
好听，制作漂亮。感谢梦风雨的美好祝福

分享聆听歌曲旋律。{:4_191:}

红影 发表于 2025-3-5 19:13

梦风雨 发表于 2025-3-5 13:24
分享聆听歌曲旋律。

问好梦风雨，晚上好{:4_187:}
页: [1]
查看完整版本: 心要让你听见