论坛 › 欢乐水吧 › 《云朵上的灯塔 》- 刘良骏

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

《云朵上的灯塔 》- 刘良骏

<style type="text/css">
/* 帖子容器 */
#tzDiv {
      position: relative;
      left: -214px;
      width: 1024px;
      height: 683px;
      top: 80px;
      background: #eee url('https://pic.imgdb.cn/item/6289fe030947543129034df6.jpg') no-repeat center/cover;
      opacity: 0.8;
}
/* 音乐控制按钮 */
.picBtn {
      position: absolute;
       width: 80px;
       height: 129px;
       left: 180px;
       bottom: 60px;
       border: none;
       outline: none;
       border-radius: 8px;
       background: transparent url('http://image.hnol.net/c/2022-03/12/19/20220312194526771-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: 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/88280.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-03/12/19/20220312194526771-5087368.gif')") : (mu.pause(), btn.style.background="url('http://image.hnol.net/c/2022-03/12/19/20220312194526771-5087368.gif')");
}

mu.addEventListener("ended", function(){
      btn.style.background="url('http://image.hnol.net/c/2022-03/12/19/20220312194526771-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-5-22 17:49

加林森朋友下午好！灯塔射出的光束效果很好，

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

云朵上的灯塔 - 刘良骏

词：吴晨

曲：吴晨

一上一下是云朵吧

一星一家 是画吗

看不清是山还是他

分不清是真还是假

那几声咂出大山的神话

阿妈也说天儿太冷了

你的额头 滴嗒着

你说我也有远方的家

今年应该是回不了吧

傻笑一声转身走向

几座灯塔

风再大 雪再下

为了诺言那几句话

夜再长 路再长

你在一盏光明后微笑

阿妈也说天儿太冷了

你的额头 滴嗒着

你说我也有远方的家

今年应该是回不了吧

傻笑一声转身走向

几座灯塔

风再大 雪再下

为了诺言那几句话

夜再长 路再长

你在一盏光明后微笑

风再大 雪再下

为了诺言那几句话

夜再长 路再长

你在一盏光明后微笑

你在一盏光明后微笑

醉美水芙蓉 发表于 2022-5-22 17:51

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

梦油 发表于 2022-5-22 17:49
加林森朋友下午好！灯塔射出的光束效果很好，

是啊，制作时特意让灯光发出来的。

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

醉美水芙蓉 发表于 2022-5-22 17:51
真漂亮！

谢谢水芙蓉！

梦油 发表于 2022-5-22 18:04

加林森 发表于 2022-5-22 17:58
是啊，制作时特意让灯光发出来的。

下面越黑，光束就越漂亮，它们形成了一个极大的反差。

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

梦油 发表于 2022-5-22 18:04
下面越黑，光束就越漂亮，它们形成了一个极大的反差。

是的，就是要这个效果的。

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

灯塔漂酿

梦油 发表于 2022-5-22 20:10

加林森 发表于 2022-5-22 18:19
是的，就是要这个效果的。

嗬！头像也改啦！好，好，挺好。

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

梦油 发表于 2022-5-22 20:10
嗬！头像也改啦！好，好，挺好。

好看吧{:4_189:}

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

马黑黑 发表于 2022-5-22 19:19
灯塔漂酿

是的。歌曲也好听的。

绿叶清舟 发表于 2022-5-22 20:41

光影效果漂亮{:4_199:}

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

绿叶清舟 发表于 2022-5-22 20:41
光影效果漂亮

这个就是用秀秀制作的。

梦油 发表于 2022-5-22 21:02

加林森 发表于 2022-5-22 20:15
好看吧

好，好，挺好。

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

梦油 发表于 2022-5-22 21:02
好，好，挺好。

嗯嗯

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

这个时间代码真心不错，能看到当下时间。队长的制作很有意境，很赞{:4_187:}

绿叶清舟 发表于 2022-5-22 21:25

加林森 发表于 2022-5-22 20:44
这个就是用秀秀制作的。

秀秀我还没玩过的呢

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

红影 发表于 2022-5-22 21:23
这个时间代码真心不错，能看到当下时间。队长的制作很有意境，很赞

谢谢红影的点评！{:4_204:}

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

绿叶清舟 发表于 2022-5-22 21:25
秀秀我还没玩过的呢

改天你去下载一个就知道了。

查看完整版本: 《云朵上的灯塔 》- 刘良骏