论坛 › 欢乐水吧 › 《护花使者 (Live)》 -- 谭咏麟、李克勤

加林森 发表于 2022-3-28 12:52

《护花使者 (Live)》 -- 谭咏麟、李克勤

本帖最后由 加林森 于 2022-3-28 17:52 编辑 <br /><br /><div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1500930">
<style type="text/css">
/* 帖子容器 */
#tzDiv {
      position: relative;
      left: -304px;
      width: 1200px;
      height: 660px;
      top: 80px;
      background: #eee url('https://pic.imgdb.cn/item/62417ff027f86abb2a2f62fc.jpg') no-repeat center/cover;
      opacity: 0.95;
      box-shadow: 4px 4px 5px #888;border-radius:12px;
}
/* 音乐控制按钮 */
.picBtn {
       position: absolute;
       width: 100px;
       height: 100px;
       left: 450px;
       top: 200px;
       border: none;
       outline: none;
       border-radius: 8px;
       background: transparent url('http://image.hnol.net/c/2022-02/24/15/202202241559481151-5087368.gif') no-repeat;
       cursor: pointer;
}
body { overflow-x: hidden; } /*禁用横向滚动条 */
#baiBox {
      margin: auto;
      width: 360px;
      text-align: center;
      font-size: 3rem;
      font-weight: bold;
      color: #A7F394;
      transform-origin: top;
      animation: yao 0.8s linear infinite alternate;
}

@keyframes yao {
      from{transform: perspective(800px) rotatex(30deg); }
      to { transform: perspective(800px) rotatex(-30deg); }
}
/* 动图定位 */
.dongtu {
      position: absolute;left:-320px; top: -50px; width:200px;
      width: 200px;
      height: 224px;      
      left: 580px;
      top: 250px;
      
}
/* 走马灯父框 */
.txtFly {
      position: absolute;
      width: 260px;
      height: 230px;
      left: 120px;
      top: 312px;
      overflow: hidden;
}
/* 走马灯文本 */
.txtFly div {
      position: absolute;
      left: 260px;
      font: normal 18px /20px Sans-Serif;
      word-break: keep-all;
      white-space:nowrap;
}
.myBall2 {
   margin: 10px auto 0;
   width: 418px;
   height: 418px;
   border-radius: 50%;
   opacity: .7;
   position: absolute;
   left: 176px;
   top:157px;
   background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
   animation: turn 2s linear infinite;
}
@keyframes turn {
   to { transform: rotate(-1turn); }
}
</style>

<div id="tzDiv">
      <div id="baiBox" style="position: absolute; left:660px; top: 100px; ">护花使者 (Live)</div>
<div class="myBall2"></div>
      <div class="dongtu">
      <img alt="" src="https://pic.imgdb.cn/item/62413bd227f86abb2a127f9e.gif"/>
      <div class="txtFly">
                <div id="ziFly">《护花使者 (Live) 歌手: 李克勤 所属专辑: 《李克勤&香港小交响乐团 演奏厅2011》 介绍:《护花使者 (Live)》是 李克勤 演唱的歌曲,该歌曲收录在《李克勤&香港小交响...</div></div>
      
      <button id="picBtn" class="picBtn"></button>
      <audio id="music" src="http://www.kumeiwp.com/sub/filestores/2022/03/27/114ce6402222b3b8adf21ff19eebf0aa.mp3" loop="loop" autoplay="autoplay" ></audio>
</div><br><br><br><br><br>

<script language="javascript">

fly();
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/24/15/202202241559481151-5087368.gif')") : (mu.pause(), btn.style.background="url('http://image.hnol.net/c/2022-02/24/15/202202241559481151-5087368.gif')");
}
mu.addEventListener("ended", function(){
      btn.style.background="url('http://image.hnol.net/c/2022-02/24/15/202202241559481151-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';
}
setInterval(function() {
   let c1 = `#${Math.random().toString(16).substr(-6)}`;
   let c2 = `#${Math.random().toString(16).substr(-6)}`;
   document.querySelector('.myBall2').style.background = `linear-gradient(120deg, ${c1} 0%, ${c2} 100%)`;
}, 2000);
</script>
<br><br><br><br><br><br><br><br><br><br><br><br><br></td></tr></table>

加林森 发表于 2022-3-28 13:17

本帖最后由 加林森 于 2022-3-28 17:47 编辑

护花使者 (Live)
作词 : 潘伟源
作曲 : 长谷川集平

这晚在街中偶遇心中的她
两脚决定不听叫唤跟她归家
深宵的冷风

不准吹去她

她那幽幽眼神快要对我说话
纤纤身影飘飘身影默默转来吧
对我说浪漫情人爱我吗

贪心的晚风
竟敢拥吻她

将她秀发温温柔柔每缕每缕放下
卑污的晚风
不应抚慰她
我已决意一生护着心中的她

这晚在街中偶遇心中的她
两脚决定不听叫唤跟她归家
深宵的冷风
不准吹去她

她那幽幽眼神快要对我说话
纤纤身影飘飘身影默默转来吧
对我说浪漫情人爱我吗
贪心的晚风

竟敢拥吻她

将她秀发温温柔柔每缕每缕放下
卑污的晚风

不应抚慰她
我已决意一生护着心中的她
贪心的晚风
竟敢拥吻她
将她秀发温温柔柔每缕每缕放下
卑污的晚风
不应抚慰她

我已决意一生护着心中的她

红影 发表于 2022-3-28 14:36

队长也做成了，很赞。{:4_187:}

红影 发表于 2022-3-28 14:40

这样完整的图片，貌似可以把彩球缩小加到天边作为月亮，这样随意加感觉有点突兀呢。{:4_204:}

加林森 发表于 2022-3-28 16:08

红影 发表于 2022-3-28 14:36
队长也做成了，很赞。

红影下午好。

加林森 发表于 2022-3-28 16:09

红影 发表于 2022-3-28 14:40
这样完整的图片，貌似可以把彩球缩小加到天边作为月亮，这样随意加感觉有点突兀呢。

我试一试吧。

红影 发表于 2022-3-28 16:38

加林森 发表于 2022-3-28 16:09
我试一试吧。

这个也很好看的，只是最好和背景图结合起来就更好了呢{:4_187:}

加林森 发表于 2022-3-28 16:44

红影 发表于 2022-3-28 16:38
这个也很好看的，只是最好和背景图结合起来就更好了呢

嗯嗯，冷月很像的吧。

红影 发表于 2022-3-28 16:56

加林森 发表于 2022-3-28 16:44
嗯嗯，冷月很像的吧。

月亮怎么可能落在树根，要落也是树梢啊。

加林森 发表于 2022-3-28 17:07

红影 发表于 2022-3-28 16:56
月亮怎么可能落在树根，要落也是树梢啊。

太大了{:4_189:}

加林森 发表于 2022-3-28 17:48

红影 发表于 2022-3-28 16:56
月亮怎么可能落在树根，要落也是树梢啊。

现在换了一首歌曲上来

红影 发表于 2022-3-28 19:20

加林森 发表于 2022-3-28 17:48
现在换了一首歌曲上来

看到了，底图也换了呢{:4_204:}

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

红影 发表于 2022-3-28 19:20
看到了，底图也换了呢

就是，这个比较欢快了。

红影 发表于 2022-3-28 21:09

加林森 发表于 2022-3-28 19:21
就是，这个比较欢快了。

是呢，非常欢快的{:4_187:}

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

红影 发表于 2022-3-28 21:09
是呢，非常欢快的

就是，这个有点好玩的。

红影 发表于 2022-3-28 22:28

加林森 发表于 2022-3-28 21:11
就是，这个有点好玩的。

嗯，还不错{:4_187:}

马黑黑 发表于 2022-3-28 22:52

这个好灵动

加林森 发表于 2022-3-28 23:23

红影 发表于 2022-3-28 22:28
嗯，还不错

嗯嗯

加林森 发表于 2022-3-28 23:25

马黑黑 发表于 2022-3-28 22:52
这个好灵动

本来不是这个的，是冷漠的歌曲，影子感觉不好，我就修改了。

马黑黑 发表于 2022-3-28 23:25

加林森 发表于 2022-3-28 23:25
本来不是这个的，是冷漠的歌曲，影子感觉不好，我就修改了。

挺好

查看完整版本: 《护花使者 (Live)》 -- 谭咏麟、李克勤