论坛 › 欢乐水吧 › 《LETTING GO》 - 蔡健雅

加林森 发表于 2022-3-26 21:28

《LETTING GO》 - 蔡健雅

<style type="text/css">
/* 帖子容器 */
#tzDiv {
      position: relative;
      left: -214px;
      width: 1024px;
      height: 600px;
      top: 80px;
      background: #eee url('https://pic.imgdb.cn/item/623f0c9b27f86abb2a8af90c.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('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">LETTING GO</div>
      <div id="textClock"></div>
      <div class="txtFly">
                <div id="ziFly">LETTING GO - 蔡健雅 这是一封离别信

写下我该离开的原因

我在你生命中扮演的角色太模糊了

你对我常忽冷忽热

我到底是情人还是朋友

爱你是否不该太认真

That’s why

I’m letting go。。。。。。</div>
      </div>
      <button id="picBtn" class="picBtn"></button>
      <audio id="music" src="http://www.kumeiwp.com/sub/filestores/2022/01/16/943220ffea171395f83c82f63169d7ac.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>

杨柳青 发表于 2022-3-26 21:35

来听歌~~好好好~~{:5_116:}

加林森 发表于 2022-3-26 21:43

杨柳青 发表于 2022-3-26 21:35
来听歌~~好好好~~

欢迎欢迎。{:4_190:}

加林森 发表于 2022-3-26 21:45

Letting Go演唱：蔡健雅这是一封离别信写下我该离开的原因我在你生命中扮演的角色太模糊了你对我常忽冷忽热我到底是情人还是朋友爱你是否不该太认真That’s whyI’m letting go我终于舍得为你放开手因为爱你爱到我心痛但你却不懂I’m letting go你对一切的软弱与怠惰让人怀疑你是否爱过我 真的爱过我为你再也找不到借口That’s when we should let it go你是呼吸的空气脱离不了的地心引力你在我生命中 曾经是我存在的原因或许就像他们说爱情只会让人变愚蠢自作多情 爱得太天真That’s whyI’m letting go我终于舍得为你放开手因为爱你爱到我心痛但你却不懂I’m letting go你对一切的软弱与怠惰让人怀疑你是否爱过我 真的爱过我为你再也找不到借口That’s when we should let it go在夜深人静里想着心不安 血越沸腾我无助 好想哭我找不到退路在夜深人静里写着心慢慢就越变冷我不恨 也不哭我的眼泪 早已哭干了

红影 发表于 2022-3-26 21:54

好听又好看，欣赏队长好帖{:4_187:}

大猫咪 发表于 2022-3-26 22:02

制作真棒， 歌也好听，队长好分享{:4_187:}   赞~~~~~~~~~~


{:4_204:}{:4_199:}

加林森 发表于 2022-3-26 22:35

本帖最后由 加林森 于 2022-3-26 23:09 编辑

红影 发表于 2022-3-26 21:54
好听又好看，欣赏队长好帖
谢谢红影支持！{:4_204:}

加林森 发表于 2022-3-26 22:36

大猫咪 发表于 2022-3-26 22:02
制作真棒， 歌也好听，队长好分享   赞~~~~~~~~~~

谢谢猫猫支持。{:4_187:}

加林森 发表于 2022-3-26 22:38

手机回复怎么会这样啊？有点晕了！

加林森 发表于 2022-3-26 23:13

现在电脑就对了。{:5_114:}

朵拉 发表于 2022-3-26 23:15

最近森队高产，欣赏学习咯{:4_190:}

加林森 发表于 2022-3-26 23:18

朵拉 发表于 2022-3-26 23:15
最近森队高产，欣赏学习咯

正在学习呢。晚上好，朵拉好！{:4_204:}

大猫咪 发表于 2022-3-27 10:43

队长中午好{:4_187:}

红影 发表于 2022-3-27 11:17

加林森 发表于 2022-3-26 22:35
谢谢红影支持！

现在越发觉得这个数字时钟真不错，每次进帖子就直接看到当前日期和时间{:4_173:}

加林森 发表于 2022-3-27 11:47

大猫咪 发表于 2022-3-27 10:43
队长中午好

猫猫中午好。{:4_190:}

加林森 发表于 2022-3-27 11:48

红影 发表于 2022-3-27 11:17
现在越发觉得这个数字时钟真不错，每次进帖子就直接看到当前日期和时间

就是，越来越顺眼了。{:4_189:}

马黑黑 发表于 2022-3-27 11:50

太给力了

加林森 发表于 2022-3-27 12:03

马黑黑 发表于 2022-3-27 11:50
太给力了

嗯嗯，老黑中午好！

红影 发表于 2022-3-27 20:39

加林森 发表于 2022-3-27 11:48
就是，越来越顺眼了。

非常棒的一个代码呢，黑黑太厉害了{:4_204:}

加林森 发表于 2022-3-27 20:58

红影 发表于 2022-3-27 20:39
非常棒的一个代码呢，黑黑太厉害了

就是，以后制作帖子就找老黑的教程来看就搞定了。

查看完整版本: 《LETTING GO》 - 蔡健雅