加林森 发表于 2022-5-13 13:53

《老鼠》-- 白皮书乐队

本帖最后由 加林森 于 2022-5-13 14:30 编辑 <br /><br /><style type="text/css">
.paBox { /* 父框 */
      margin: 10px auto;
      width: 1024px;
      height: 576px;
      position: relative;
      background: #000 url('https://pic.imgdb.cn/item/627df1200947543129235294.jpg') no-repeat;
      left: -210px;
}
/* 父框和 .soBox 的伪元素共同样式 */
.paBox::before, .paBox::after, .soBox::before, .soBox::after {
      content: "";
      position: absolute;
      width: 500px; height: 2px;
      background: silver;
      left: 300px; top: 230px;
      opacity: 0.1;
      transform-origin: center center;
}
/* 父框和 .soBox 的伪元素各自的动画样式 */
.paBox::before { animation: fly 2s linear infinite alternate;}
.paBox::after { height: 4px; animation: fly 5s linear infinite;}
.soBox::before { animation: fly 3s linear infinite;}
.soBox::after { height: 5px; animation: fly 1s linear infinite alternate;}

@keyframes fly { 100% { transform: rotate(360deg); } }
/*旋转按钮*/
.roBox32 {
      margin: 10px;
      position: relative;
      width: 32px; height: 32px;
      line-height: 32px; font-size: 12px;
      background: linear-gradient(blue,gray,red);
      outline:none;
      color: white;
      border-radius: 50%;
      text-align: center;
      box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.25);
      cursor: pointer;
      animation: rol linear 2s infinite;
}
.roBox32:hover { opacity: 0.8; }
.roBox32:active { opacity: 1; }
@keyframes rol { to { transform:rotate(360deg); } }
</style>

<div class="paBox">
      <div class="soBox"></div>
      <p style="position: absolute; left:240px; top:480px; color:#FFA500;"><marqueescrollamount="3" direction="left" >白皮书乐队 - 老鼠 </marquee></p>
      <!-- 按钮 -->
      <div id="roBox" class="roBox32" style="left:10%;top:88%;">●</div>
</div>

<audio id="ymusic" src="http://www.kumeiwp.com/sub/filestores/2022/05/11/e383d703f9227a1435fea8a536b4edd0.mp3" autoplay="autoplay" loop="loop"></audio>

<script language="javascript">
var mu = document.getElementById('ymusic');      
var roBtn = document.getElementById('roBox');
mu.autoplay ? roBtn.style.animationPlayState="running" : roBtn.style.animationPlayState="paused";
mu.addEventListener("ended", function(){ roBtn.style.animationPlayState="paused"; })
roBtn.onclick = function(){ mu.paused ? (mu.play(), roBtn.style.animationPlayState="running") : (mu.pause(), roBtn.style.animationPlayState="paused"); }
</script>

加林森 发表于 2022-5-13 13:54

本帖最后由 加林森 于 2022-5-13 13:55 编辑

《老鼠》-- 白皮书乐队
作词:刘家辉

作曲:刘家辉

我是个老鼠猥琐的活着

在这个纸醉迷金的世界

不感到绝望或者一丝慌张

也不知道自己活在什么地方

他们赤裸的来到我的身旁

没有一丝羞愧或者是苦恼

脚踩着尸首或者心怀着鬼胎

然后悄悄说

Get Off

Get Off

Get Off

我是个老鼠骄傲的活着

在这个纸醉迷金的世界

不感到绝望或者一丝慌张

也不知道自己来到什么地方

他们赤裸的来到我的身旁

没有一丝羞愧或者是苦恼

脚踩着尸首或者心怀着鬼胎

然后悄悄说

Get Off

Get Off

Get Off

编曲：白皮书乐队

主唱/吉他：刘家辉

贝斯：卢子建

鼓：虫子

混音：包玉树


红影 发表于 2022-5-13 15:16

这个底图的色彩好，让闪光棒和播放器按钮都很突出，队长好制作{:4_187:}

加林森 发表于 2022-5-13 15:43

红影 发表于 2022-5-13 15:16
这个底图的色彩好，让闪光棒和播放器按钮都很突出，队长好制作

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

樵歌 发表于 2022-5-13 16:49

佳作，只是音乐过门太长了

加林森 发表于 2022-5-13 16:57

樵歌 发表于 2022-5-13 16:49
佳作，只是音乐过门太长了

他们的组合就是这样的。

梦油 发表于 2022-5-13 17:19

你设计的这个画面挺有意思的。

我又没分了。{:4_203:}

樵歌 发表于 2022-5-13 18:05

加林森 发表于 2022-5-13 16:57
他们的组合就是这样的。

嗯，年青人的歌曲，咱们还是爱听的

加林森 发表于 2022-5-13 19:09

樵歌 发表于 2022-5-13 18:05
嗯，年青人的歌曲，咱们还是爱听的

是的，有朝气！

樵歌 发表于 2022-5-13 20:33

加林森 发表于 2022-5-13 19:09
是的，有朝气！

咱们必须保持住。{:4_208:}

马黑黑 发表于 2022-5-13 20:36

白的不错

加林森 发表于 2022-5-13 20:41

梦油 发表于 2022-5-13 17:19
你设计的这个画面挺有意思的。

我又没分了。

没关系的，没有分就说明你很努力给别人在加分了，辛苦了！

加林森 发表于 2022-5-13 20:41

樵歌 发表于 2022-5-13 20:33
咱们必须保持住。

必须的。

加林森 发表于 2022-5-13 20:41

马黑黑 发表于 2022-5-13 20:36
白的不错

嗯嗯。

大猫咪 发表于 2022-5-13 21:05

白皮书乐队，第一次欣赏   真不错，好听好看    队长好分享，辛苦{:4_204:}{:4_179:}

红影 发表于 2022-5-13 21:30

加林森 发表于 2022-5-13 15:43
谢谢红影支持！

不客气，制作好看，歌也好听{:4_187:}

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

红影 发表于 2022-5-13 21:30
不客气，制作好看，歌也好听

嗯嗯。我是先听了再去找的图片，然后再制作一下就发出来了。

樵歌 发表于 2022-5-14 07:22

加林森 发表于 2022-5-13 20:41
必须的。

相信一定能，生命不息开心不已{:4_189:}

加林森 发表于 2022-5-14 09:06

樵歌 发表于 2022-5-14 07:22
相信一定能，生命不息开心不已

是的。

红影 发表于 2022-5-14 11:19

加林森 发表于 2022-5-13 21:51
嗯嗯。我是先听了再去找的图片，然后再制作一下就发出来了。

非常棒{:4_187:}
页: [1] 2
查看完整版本: 《老鼠》-- 白皮书乐队