论坛 › 欢乐水吧 › 《赛里木湖的云》 - 李东信

加林森 发表于 2022-3-24 13:13

《赛里木湖的云》 - 李东信

本帖最后由 加林森 于 2022-3-24 17:54 编辑 <br /><br />
<style type="text/css">
/* 帖子容器 */
#tzDiv {
      position: relative;
      left: -214px;
      width: 1024px;
      height: 600px;
      top: 80px;
      background: #eee url('https://pic.imgdb.cn/item/623bf2a627f86abb2af1c8a8.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">赛里木湖的云</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=1854632448.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-24 16:22

这个制作真漂亮，队长真棒{:4_187:}

加林森 发表于 2022-3-24 16:51

红影 发表于 2022-3-24 16:22
这个制作真漂亮，队长真棒

谢谢红影支持！{:4_204:}

加林森 发表于 2022-3-24 17:49

赛里木湖的云

作词 : 如风/林芏
作曲 : 真晶不怕火@子弹
编曲 : 达吾然/文克津

为了遇见你
我跨越雪山来找你
不管相距几万里
耗费多少力气
天鹅游青波
游出淡淡的相忆
月亮照水杉
照亮朦胧的爱意
为了遇见你
我跨过草原来找你
青丝那头栓着你
这头搁在我心里
湖边种黄花
种下含苞的故事
有苦也有蜜
等风等云也等你
赛里木湖的云在等风
而我在等你
等你带回来那春天的消息
深藏在我瞳孔里
冰封的秘密
只在一个人的时候化成泪滴
赛里木湖的云在等风
而我在等你
就像雪山张开温柔的双臂
轻轻将你揉进我的怀里
只在一个人的时候为你甜蜜

为了遇见你
我跨过草原来找你
青丝那头栓着你
这头搁在我心里
湖边种黄花
种下含苞的故事
有苦也有蜜
等风等云也等你
赛里木湖的云在等风
而我在等你
等你带回来那春天的消息
深藏在我瞳孔里
冰封的秘密
只在一个人的时候化成泪滴
赛里木湖的云在等风
而我在等你
就像雪山张开温柔的双臂
轻轻将你揉进我的怀里
只在一个人的时候为你甜蜜
只在一个人的时候为你甜蜜

樵歌 发表于 2022-3-24 19:43

好漂亮！坐下欣赏。{:4_174:}

加林森 发表于 2022-3-24 20:43

樵歌 发表于 2022-3-24 19:43
好漂亮！坐下欣赏。

歌曲很好听吧{:4_190:}

红影 发表于 2022-3-24 21:08

加林森 发表于 2022-3-24 16:51
谢谢红影支持！

非常清爽明媚{:4_187:}

绿叶清舟 发表于 2022-3-24 21:13

这个制作漂亮的{:4_199:}

加林森 发表于 2022-3-24 21:16

红影 发表于 2022-3-24 21:08
非常清爽明媚

谢谢你的点评。快去收礼物，送你的。

加林森 发表于 2022-3-24 21:16

绿叶清舟 发表于 2022-3-24 21:13
这个制作漂亮的

清舟晚上好。{:4_204:}

红影 发表于 2022-3-24 21:49

加林森 发表于 2022-3-24 21:16
谢谢你的点评。快去收礼物，送你的。

哦哦，我去看看。。。

加林森 发表于 2022-3-24 21:51

红影 发表于 2022-3-24 21:49
哦哦，我去看看。。。

嗯嗯

大猫咪 发表于 2022-3-24 22:33

风景真美，和歌融合的真棒，队长越来越厉害了，赞！！！！！！！

歌真好听！ 非常喜欢！

{:4_204:}{:4_190:}

加林森 发表于 2022-3-24 23:31

大猫咪 发表于 2022-3-24 22:33
风景真美，和歌融合的真棒，队长越来越厉害了，赞！！！！！！！

歌真好听！ 非常喜欢！


猫猫晚上好！{:4_204:}你感觉好！{:4_179:}

樵歌 发表于 2022-3-26 11:00

加林森 发表于 2022-3-24 20:43
歌曲很好听吧

好听，有味道，动情。

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

樵歌 发表于 2022-3-26 11:00
好听，有味道，动情。

嗯嗯，就是。{:4_190:}

樵歌 发表于 2022-3-26 20:39

加林森 发表于 2022-3-26 12:27
嗯嗯，就是。

你选的歌合我胃口。{:4_190:}

加林森 发表于 2022-3-26 20:41

樵歌 发表于 2022-3-26 20:39
你选的歌合我胃口。

那就好，说明我们都一样的。

樵歌 发表于 2022-3-27 14:00

加林森 发表于 2022-3-26 20:41
那就好，说明我们都一样的。

烂兄烂弟{:4_189:}

加林森 发表于 2022-3-27 14:10

樵歌 发表于 2022-3-27 14:00
烂兄烂弟

哈哈哈哈。你真逗。{:4_172:}

查看完整版本: 《赛里木湖的云》 - 李东信