加林森 发表于 2022-4-3 19:02

《Ludwig van Beethoven - 欢乐颂》 -- 贝多芬（跟老黑教程学习制作）

本帖最后由 加林森 于 2022-4-3 20:16 编辑 <br /><br /><style>
      .oml { position: relative; left: -340px; width: 1280px; height: 720px; background: olive url('https://pic.imgdb.cn/item/6249ea70239250f7c5167b7e.jpg') no-repeat center/cover; font: 1em / 30px Sans-serif; color: #aaa; text-shadow: 1px 1px 1px #666; opacity: .85;}
      .oml::before { content:''; position: absolute; width: 100%; height: 365px; background: url('/data/attachment/forum/202204/03/154038ppjf8hsz7h4fjfms.gif') repeat-x; }
      .oml::after { content: attr(data-t); position: absolute; width: 250px; left: 160px; bottom: 15px; animation: fly 20s linear infinite alternate; }
      .btn { position: absolute; width: 120px; height: 30px; left: 10px; bottom: 15px; text-align: center;background: #666; border-radius: 8px; cursor: pointer; opacity: .8; animation: color 1s ease infinite; }
      @keyframes fly { to { left: 1000px; } }
      @keyframes color { to { color: gold; } }
</style>

<div class="oml" data-t="Ludwig van Beethoven - 欢乐颂">
      <div class="btn">Play&Pause</div>
</div>

<script>
let canplay = true;
let btn = document.querySelector('.btn');
let oml = document.querySelector('.oml');
let aud = document.createElement('audio');
aud.src = "http://www.kumeiwp.com/sub/filestores/2022/04/03/d45eaa4fdbad3ec5b76457c1b528b79f.mp3";
aud.loop = true;
document.querySelector('.oml').appendChild(aud);
btn.onclick = function() {
      canplay ? (aud.play(), this.style.animationPlayState='paused', canplay = false) : (aud.pause(), this.style.animationPlayState = 'running', canplay = true);
}
</script>

加林森 发表于 2022-4-3 19:04

感谢老黑的教程，试着制作一个古典音乐出来。

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

@马黑黑

马黑黑 发表于 2022-4-3 20:04

壮观。还要左移。

加林森 发表于 2022-4-3 20:07

马黑黑 发表于 2022-4-3 20:04
壮观。还要左移。

好的好的，我去调一下。

马黑黑 发表于 2022-4-3 20:07

加林森 发表于 2022-4-3 20:07
好的好的，我去调一下。

{:4_190:}

加林森 发表于 2022-4-3 20:13

马黑黑 发表于 2022-4-3 20:07


现在怎么样？谢谢你！

马黑黑 发表于 2022-4-3 20:14

加林森 发表于 2022-4-3 20:13
现在怎么样？谢谢你！

还需要左移。你得计算一下，拿像素尺量量

加林森 发表于 2022-4-3 20:16

马黑黑 发表于 2022-4-3 20:14
还需要左移。你得计算一下，拿像素尺量量

好的好的。

加林森 发表于 2022-4-3 20:18

马黑黑 发表于 2022-4-3 20:14
还需要左移。你得计算一下，拿像素尺量量

现在拉满了，应该可以了吧。

马黑黑 发表于 2022-4-3 20:19

加林森 发表于 2022-4-3 20:18
现在拉满了，应该可以了吧。

是的，这样子完美

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

马黑黑 发表于 2022-4-3 20:19
是的，这样子完美

谢谢！{:4_190:}

马黑黑 发表于 2022-4-3 20:39

加林森 发表于 2022-4-3 20:26
谢谢！

客气了

加林森 发表于 2022-4-3 20:45

马黑黑 发表于 2022-4-3 20:39
客气了

好的好的。我感觉这样的制作才能表现出音乐的魅力的。

红影 发表于 2022-4-3 20:54

很壮观的音乐会现场，欣赏队长好帖{:4_187:}

加林森 发表于 2022-4-3 20:59

红影 发表于 2022-4-3 20:54
很壮观的音乐会现场，欣赏队长好帖

红影晚上好。跟着老黑的步伐制作的。{:4_204:}

马黑黑 发表于 2022-4-3 21:17

加林森 发表于 2022-4-3 20:45
好的好的。我感觉这样的制作才能表现出音乐的魅力的。

感觉好就行

加林森 发表于 2022-4-3 21:22

马黑黑 发表于 2022-4-3 21:17
感觉好就行

嗯嗯

马黑黑 发表于 2022-4-3 21:44

加林森 发表于 2022-4-3 21:22
嗯嗯

{:4_181:}

加林森 发表于 2022-4-3 21:59

马黑黑 发表于 2022-4-3 21:44


{:4_190:}
页: [1] 2
查看完整版本: 《Ludwig van Beethoven - 欢乐颂》 -- 贝多芬（跟老黑教程学习制作）