加林森 发表于 2022-5-23 11:08

《差一点》- 阿杜


<style type="text/css">
/* 帖子容器 */
#tzDiv {
      position: relative;
      left: -214px;
      width: 1024px;
      height: 575px;
      top: 80px;
      background: #eee url('https://pic.imgdb.cn/item/628aed72094754312968b5ee.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: 10px;
      right: 200px;
      width: 300px;
      height: 30px;
      font: 20px / 30px Sans-Serif;
      text-align: GhostWhite;
}
/* 走马灯父框 */
.txtFly {
      position: absolute;
      width: 260px;
      height: 30px;
      right: 100px;
      bottom: 100px;
      overflow: hidden;
}
/* 走马灯文本 */
.txtFly div {
      position: absolute;
      left: -460px;
      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/90463.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-5-23 11:08

差一点-阿杜


差一点 你就是我的女人

差一些 手牵手的完整

却在对的时间错过对的人

抓不住幸福时分

遇上了错的人

渐渐的吻在她无心的嘴唇

感觉像一个旅程 走完了就分

错过了对的人

决定就只在那一秒那一分

爱情的岔口

你是我等不到的路人

差一点 你就是我的女人

差一些 就和你共度一生

因为对的时间对的人

就值得我为你奋不顾身

差一点 你就是我的女人

差一些 手牵手的完整

却在对的时间错过对的人

抓不住幸福时分

错过了对的人

决定就只在那一秒那一分

如果没缘分

我也会固执的为你一人

差一点 你就是我的女人

差一些 就和你共度一生

因为对的时间对的人

就值得我为你奋不顾身

差一点 你就是我的女人

差一些 手牵手的完整

却在对的时间错过对的人

抓不住幸福时分

马黑黑 发表于 2022-5-23 12:44

欣赏

加林森 发表于 2022-5-23 12:45

马黑黑 发表于 2022-5-23 12:44
欣赏

谢谢啊！

马黑黑 发表于 2022-5-23 12:51

加林森 发表于 2022-5-23 12:45
谢谢啊！

{:5_108:}

加林森 发表于 2022-5-23 13:21

马黑黑 发表于 2022-5-23 12:51


{:5_108:}

红影 发表于 2022-5-23 13:25

队长的这个时间代码有点看不出来呢。这首歌好听，画面也好看，给队长点赞{:4_187:}

加林森 发表于 2022-5-23 14:05

红影 发表于 2022-5-23 13:25
队长的这个时间代码有点看不出来呢。这首歌好听，画面也好看，给队长点赞

我忘记该在上面地方修改时间了。

梦油 发表于 2022-5-23 15:10

欣赏佳作，问候队长。

红影 发表于 2022-5-23 15:46

加林森 发表于 2022-5-23 14:05
我忘记该在上面地方修改时间了。

没事，仔细看还是看的出的{:4_173:}

加林森 发表于 2022-5-23 17:57

红影 发表于 2022-5-23 15:46
没事，仔细看还是看的出的

嗯嗯。

加林森 发表于 2022-5-23 18:01

梦油 发表于 2022-5-23 15:10
欣赏佳作，问候队长。

谢谢老梦！

梦油 发表于 2022-5-23 20:39

加林森 发表于 2022-5-23 18:01
谢谢老梦！

不客气

加林森 发表于 2022-5-23 21:03

梦油 发表于 2022-5-23 20:39
不客气

好的
页: [1]
查看完整版本: 《差一点》- 阿杜