加林森 发表于 2022-5-22 18:16

《痴情相思泪》- 聂枫/卢喃


<style type="text/css">
/* 帖子容器 */
#tzDiv {
      position: relative;
      left: -214px;
      width: 1024px;
      height: 683px;
      top: 80px;
      background: #eee url('https://pic.imgdb.cn/item/628a0c2009475431290cf182.jpg') no-repeat center/cover;
      opacity: 0.8;
}
/* 音乐控制按钮 */
.picBtn {
      position: absolute;
       width: 100px;
       height: 100px;
       left: 160px;
       bottom: 60px;
       border: none;
       outline: none;
       border-radius: 8px;
       background: transparent url('https://pic.imgdb.cn/item/622a00ea5baa1a80ab412ada.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: 4rem;
      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">
      <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="https://www.joy127.com/url/90450.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('https://pic.imgdb.cn/item/622a00ea5baa1a80ab412ada.gif')") : (mu.pause(), btn.style.background="url('https://pic.imgdb.cn/item/622a01115baa1a80ab414665.png')");
}

mu.addEventListener("ended", function(){
      btn.style.background="url('https://pic.imgdb.cn/item/622a01115baa1a80ab414665.png')";
});
//创建走马灯
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>
<br><br><br><br><br>

加林森 发表于 2022-5-22 18:18

痴情相思泪 - 卢喃&聂枫

词：卢喃&聂枫 曲：刘宏杰

明明知道真爱已走远

我的心却还对你眷恋

想要忘记你实在太为难

曾经约定今生白首到永远

明明知道爱情已搁浅

我却还在苦苦的期盼

夜夜盼与你梦中再相见

如何了却这段最痛的情缘

为你伤为你痛为你憔悴了双眼

被你带走的心何时能归还

痴情化作泪思念苦无边

梦中醒来只有孤枕又难眠

心凄然肝肠断唯有明月来相伴

今生擦肩来世能否在续缘

红尘独自怜隔空盼君还

不知如何了却心中这段缘

为你伤为你痛为你憔悴了双眼

心凄然肝肠断唯有明月来相伴

明明知道爱情已搁浅

我却还在苦苦的期盼

夜夜盼与你梦中在相见

如何了却这段最痛的情缘

为你伤为你痛为你憔悴了双眼

被你带走的心何时能归还

痴情化作泪思念苦无边

梦中醒来只有孤枕又难眠

心凄然肝肠断唯有明月来相伴

今生擦肩来世能否再续缘

红尘独自怜隔空盼君还

不知如何了却心中这段缘

不知如何了却心中这段缘

马黑黑 发表于 2022-5-22 19:18

队长腻害，欣赏了

醉美水芙蓉 发表于 2022-5-22 19:20

绿叶清舟 发表于 2022-5-22 19:56

队长厉害啊，第一次听这歌了

加林森 发表于 2022-5-22 20:17

马黑黑 发表于 2022-5-22 19:18
队长腻害，欣赏了

我在换着播放器玩。顺便复习一下的。

加林森 发表于 2022-5-22 20:18

醉美水芙蓉 发表于 2022-5-22 19:20
小美女好可爱！

是的，挺乖的。

加林森 发表于 2022-5-22 20:18

绿叶清舟 发表于 2022-5-22 19:56
队长厉害啊，第一次听这歌了

好听不？

小辣椒 发表于 2022-5-22 21:20

队长，以后碰到这个图图上面的字有挡住，改不了代码就图图水平翻转试一下

小辣椒 发表于 2022-5-22 21:21

现在是正式全面复习了{:4_178:}

加林森 发表于 2022-5-22 21:24

小辣椒 发表于 2022-5-22 21:20
队长，以后碰到这个图图上面的字有挡住，改不了代码就图图水平翻转试一下

好的，知道了。

加林森 发表于 2022-5-22 21:25

小辣椒 发表于 2022-5-22 21:21
现在是正式全面复习了

是的。明天再来复习了。

小辣椒 发表于 2022-5-22 21:27

加林森 发表于 2022-5-22 21:25
是的。明天再来复习了。

队长你太多了，一天5个够了，否则真涨大水了{:4_172:}

红影 发表于 2022-5-22 21:31

漂亮的制作，队长又一个帖子，真快{:4_187:}

加林森 发表于 2022-5-22 21:34

小辣椒 发表于 2022-5-22 21:27
队长你太多了，一天5个够了，否则真涨大水了

{:4_189:}知道了。

加林森 发表于 2022-5-22 21:36

红影 发表于 2022-5-22 21:31
漂亮的制作，队长又一个帖子，真快

嗯嗯。复习啦。
页: [1]
查看完整版本: 《痴情相思泪》- 聂枫/卢喃