加林森 发表于 2022-4-12 12:00

《幸好我们还有音乐》-- 刺猬

本帖最后由 加林森 于 2022-4-12 20:41 编辑 <br /><br /><style type="text/css">
/* 帖子容器 */
#tzDiv {
      position: relative;
      left: -302px;
      width: 1200px;
      height: 736px;
      top: 80px;
      background: #eee url('https://pic.imgdb.cn/item/6254f137239250f7c508b5bd.jpg') no-repeat center/cover;
      opacity: 0.8;
}
/* 音乐控制按钮 */
.picBtn {
      position: absolute;
       width: 100px;
       height: 100px;
       left: 180px;
       bottom: 60px;
       border: none;
       outline: none;
       border-radius: 8px;
       background: transparent url('http://image.hnol.net/c/2022-02/23/01/2022022301050291-5087368.gif') no-repeat;
       cursor: pointer;
}
/* 文本时钟 */
#textClock {
      position: absolute;
      top: 180px;
      right: 200px;
      width: 300px;
      height: 30px;
      font: 20px / 30px Sans-Serif;
      text-align: center;
}
/* 走马灯父框 */
.txtFly {
      position: absolute;
      width: 260px;
      height: 30px;
      right: 100px;
      bottom: 100px;
      overflow: hidden;
}
/* 走马灯文本 */
.txtFly div {
      position: absolute;
      left: 260px;
      font: normal 18px /20px Sans-Serif;
      word-break: keep-all;
      white-space:nowrap;
}
/* 变色文本 */
.txtBg {
      position: absolute;
      top: 80px;
      right: 100px;
      font-size: 3rem;
      color: transparent;
      width: 500px;
      height: 100px;
      line-height: 100px;
      text-align: center;
      background-image: linear-gradient(90deg, green, olive, transparent, tomato, green);
      background-size: 500px 100px;
      background-position: 500px 0;
      border: 1px solid;
      background-clip: text;
      -webkit-background-clip: text;
      animation: chgc 2s linear infinite;
}
/* 文本变色动画 */
@keyframes chgc {
      from { background-position: -500px 0; }
      to { background-position: 0 0; }
}
</style>

<div id="tzDiv">

<br><br><div class="txtBg">幸好我们还有音乐</div>
      <div id="textClock"></div>
      <div class="txtFly">
                <div id="ziFly">幸好我们还有音乐 - 刺猬 幸好生活里 我还有音乐
有音乐时我可以 不需要语言
即使她永远都 不会出现
痛苦也一并会 走到终点
现实已如此决绝 还好有音乐。。。。。。</div>
      </div>
      <button id="picBtn" class="picBtn"></button>
      <audio id="music" src="http://music.163.com/song/media/outer/url?id=1935880332.mp3" loop="loop" autoplay="autoplay" ></audio>
</div>

<script language="javascript">

fly(); //运行走马灯
showTime(); //显示时间
setInterval(showTime, 1000); //运行时钟

//文本时钟函数
function showTime(){
      var now = new Date();
      var year = now.getFullYear();
      var month = now.getMonth() + 1;
      var date = now.getDate();
      var day = now.getDay();
      var hour = now.getHours();
      if(hour < 10) hour = "0" + hour;
      var minute = now.getMinutes();
      if(minute < 10) minute = "0" + minute;
      var second = now.getSeconds();
      if(second < 10) second = "0" + second;
      document.getElementById("textClock").innerHTML = year + "年" + month + "月" + date + "日 星期" + toHz(day) + "" + hour + ":" + minute + ":" + second;
}
function toHz(num) { var hz = "日一二三四五六九"; return(hz.charAt(num)); }
//音乐控制代码
var mu = document.getElementById('music');
var btn = document.getElementById('picBtn');

btn.onclick = function(){
      mu.paused ? (mu.play(), btn.style.background="url('http://image.hnol.net/c/2022-02/23/01/2022022301050291-5087368.gif')") : (mu.pause(), btn.style.background="url('http://image.hnol.net/c/2022-02/23/01/202202230106029651-5087368.gif')");
}

mu.addEventListener("ended", function(){
      btn.style.background="url('http://image.hnol.net/c/2022-02/23/01/202202230106029651-5087368.gif')";
});
//创建走马灯
function fly() {
      var ziFly = document.getElementById('ziFly');
      var width = ziFly.clientWidth;
      var style = document.createElement('style');
      style.type = 'text/css';
      var flyStr = '@keyframes fly {to { left: -' + width + 'px; } }';
      style.innerHTML = flyStr;
      ziFly.appendChild(style);
      ziFly.style.animation = 'fly 40s linear infinite';
}
</script>

加林森 发表于 2022-4-12 12:00

本帖最后由 加林森 于 2022-4-12 12:02 编辑

幸好我们还有音乐 -- 刺猬

作词 : 子健
作曲 : 子健
编曲 : 刺猬/陆希文
制作人 : 陆希文
幸好生活里 我还有音乐
有音乐时我可以 不需要语言
即使她永远都 不会出现
痛苦也一并会 走到终点
现实已如此决绝 还好有音乐
有音乐时我可以 忘掉一切
只是彼时此刻 我还会想念
望你余生平安 仅此已无愿
啊… 时间… 一切… 啊…
我曾 做梦闪耀整个世界
而今却 烟雾缭绕恍惚每个黑夜
一根 燃尽在这宁静的街
再一根 划落入记忆的残缺
过去 你从未在意过那些
而今 却再也无法被忽略
我发誓 一定要让你记得
此生今世 都不会再忘了

红影 发表于 2022-4-12 19:43

音乐的乐字没出来，队长可以调整一下文字宽度。
又是时钟帖子，欣赏队长好帖{:4_187:}

东篱闲人 发表于 2022-4-12 19:44

野！{:5_116:}

加林森 发表于 2022-4-12 20:42

红影 发表于 2022-4-12 19:43
音乐的乐字没出来，队长可以调整一下文字宽度。
又是时钟帖子，欣赏队长好帖

现在修改了，字体大了点，现在正常了。谢谢红影。{:4_204:}

加林森 发表于 2022-4-12 20:43

东篱闲人 发表于 2022-4-12 19:44
野！

野什么啊。。。。{:4_189:}

东篱闲人 发表于 2022-4-12 20:49

加林森 发表于 2022-4-12 20:43
野什么啊。。。。

歌比较野！{:5_117:}

加林森 发表于 2022-4-12 20:53

东篱闲人 发表于 2022-4-12 20:49
歌比较野！

哦哦。。。。{:4_189:}

红影 发表于 2022-4-13 19:35

加林森 发表于 2022-4-12 20:42
现在修改了，字体大了点，现在正常了。谢谢红影。

幸好有音乐，在封闭的时候可以愉悦心灵。这个歌名真好{:4_187:}

加林森 发表于 2022-4-13 19:39

红影 发表于 2022-4-13 19:35
幸好有音乐，在封闭的时候可以愉悦心灵。这个歌名真好

是新歌曲，挺好的。
页: [1]
查看完整版本: 《幸好我们还有音乐》-- 刺猬