论坛 › 马黑黑教程专版 › 《午夜怨曲》代码解析

马黑黑 发表于 2022-1-25 23:24

《午夜怨曲》代码解析

本帖最后由 马黑黑 于 2022-1-28 14:13 编辑

单曲音乐帖《午夜怨曲》地址：https://www.huachaowang.com/forum.php?mod=viewthread&tid=56427

先说下思路：

一张背景图 1024*640，父容器就依这个尺寸设计大小，背景色设为黑色以防图片加载失败时能友好一些。动画就设计四条光条，让它们在中间某处以同心圆方式转圈圈，其中有两条转完倒着转，形成交错效果。歌词用一个div装载，通过JS控制显示隐藏；音乐也是用JS控制放停。

HTML的结构：

<!-- 此处为CSS代码 -->
<div id="paBox" class="paBox">
      <div class="soBox"></div>
      <div class="txtPan"><span id="gc">歌词</span><span id="play">停止</span></div>
      <div id="txtBox" class="txtBox">此处是歌词全文</div>
</div>
<audio id="aud" src="MP3地址" autoplay="autoplay" loop="loop"></audio>
<!-- 此处为JS代码 -->

4个div，外层的id为paBox，它的两个伪元素还参与光影动画；内层3个并列的子div，第一个div的两个伪元素参与光影动画，第二个是左下角的按钮，第三个是装载歌词用的。

以下是全部代码：
<style type="text/css">


.paBox {
        margin: 10px auto;
        width: 1024px;
        height: 640px;
        position: relative;
        background: #000 url('/data/attachment/forum/202201/25/205918ws8dyd8srobyeq4e.jpg') no-repeat;
        left: -210px;
}


.txtBox {
        padding: 20px;
        color: silver;
        column-count: 4;
        display: none;
}


.txtPan {
        position: absolute;
        left:10px; top: 600px;
        color: white;
        cursor: pointer;
}


.paBox::before, .paBox::after, .soBox::before, .soBox::after {
        content: "";
        position: absolute;
        width: 600px; height: 2px;
        background: silver;
        left: 200px; top: 300px;
        opacity: 0.1;
        transform-origin: center center;
}
.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); } }


</style>


<div id="paBox" class="paBox">
      <div class="soBox"></div>
      <div class="txtPan"><span id="gc">歌词</span>&nbsp; <span id="play">停止</span></div>
      <div id="txtBox" class="txtBox">
<p>午夜怨曲<br><br>
词 | 叶世荣<br>
曲 | 黄家驹<br>
主唱 | 黄家驹<br><br>
从来不知想拥有多少的理想<br>
还离不开种种困忧<br>
勉强去掩饰失意的感觉<br>
再次听到昨日的冷嘲<br>
徘徊於街中恐怕只得孤独<br>
寻回思忆中的碎片<br>
变作了一堆草芥风中散<br>
与你奏过午夜的怨曲<br>
总有挫折打碎我的心<br>
紧抱过去抑压了的手<br>
我与你也彼此一起艰苦过<br>
写上每句冰冷冷的诗<br>
不会放弃高唱这首歌<br>
我与你也彼此真的相识过<br>
从回忆中找不到天真的笑声<br>
曾留不低心中斗争<br>
每次去担当失意的主角<br>
冷笑变作故事的作者<br>
总有挫折打碎我的心<br>
紧抱过去抑压了的手<br>
我与你也彼此一起艰苦过<br>
写上每句冰冷冷的诗<br>
不会放弃高唱这首歌<br>
我与你也彼此真的相识过<br>
啊......啊......障碍能撕破<br>
总有挫折打碎我的心<br>
紧抱过去抑压了的手<br>
我与你也彼此一起艰苦过<br>
写上每句冰冷冷的诗<br>
不会放弃高唱这首歌<br>
我与你也彼此真的相识过<br>
总有挫折打碎我的心<br>
紧抱过去抑压了的手<br>
我与你也彼此一起艰苦过<br>
写上每句冰冷冷的诗<br>
不会放弃高唱这首歌<br>
我与你也彼此真的相识过<br>
总有挫折打碎我的心<br>
紧抱过去抑压了的手<br>
我与你也彼此一起艰苦过</p>
      </div>
</div>
<audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2021/12/27/db5031ddc52e16860f4aeb70b530099b.mp3" autoplay="autoplay" loop="loop"></audio>


<script language="javascript">


var gc = document.getElementById('gc');
var txtgc = document.getElementById('txtBox');
var play = document.getElementById('play');
var au = document.getElementById('aud');


play.onclick = function() {
        au.paused ? (au.play(), play.innerHTML='停止') : (au.pause(), play.innerHTML='播放');
}


gc.onclick = function() {
        txtgc.style.display == 'block' ? (txtgc.style.display = 'none', gc.innerHTML='歌词') : (txtgc.style.display = 'block', gc.innerHTML='隐藏');
}


</script>

JS中，我通过对两个行内有id的 <span> 标签的点击动作与歌词显示隐藏、音乐播放暂停函数进行了捆绑，id请查看HTML代码部分。

总体就是这样，低调而奢华、简单而繁复的风格，不完美但耐看，对得起主题，对得住歌曲。

马黑黑 发表于 2022-1-25 23:49

css部分代码老挨吞掉，这里补全：

CSS 代码：
<style type="text/css">

.paBox { /* 父框 */
      margin: 10px auto;
      width: 1024px;
      height: 640px;
      position: relative;
      background: #000 url('/data/attachment/forum/202201/25/205918ws8dyd8srobyeq4e.jpg') no-repeat;
      left: -210px;
}

.txtBox { /* 歌词框 */
      padding: 20px;
      color: silver;
      column-count: 4;
      display: none;
}

.txtPan { /* 按钮框 */
      position: absolute;
      left:10px; top: 600px;
      color: white;
      cursor: pointer;
}
/* 父框和 .soBox 的伪元素共同样式 */
.paBox::before, .paBox::after, .soBox::before, .soBox::after {
      content: "";
      position: absolute;
      width: 600px; height: 2px;
      background: silver;
      left: 200px; top: 300px;
      opacity: 0.1;
      transform-origin: center center;
}
/* 光条的独自样式 可修改尺寸和动画方式 */
.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); } }
</style>

红影 发表于 2022-1-26 09:31

transform-origin: center center;
这个是对什么起作用的？

红影 发表于 2022-1-26 09:37

父框和 .soBox 的伪元素样式相同，为什么看演示时感觉有粗细之分？

哦哦，看到了，在定义动画的时候另给了 height值，如此马虎的我{:4_173:}

红影 发表于 2022-1-26 09:43

看看学学，我也想做一个，不过我做的话会要很折腾，不知道什么时候能做起来。先回帖子去{:4_173:}

红影 发表于 2022-1-26 09:43

这个效果好美，感谢黑黑的耐心讲解，辛苦了{:4_187:}

马黑黑 发表于 2022-1-26 10:31

红影 发表于 2022-1-26 09:43
这个效果好美，感谢黑黑的耐心讲解，辛苦了

随意做的，没有精心策划

查看完整版本: 《午夜怨曲》代码解析