《午夜怨曲》代码解析

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

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

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

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

先说下思路：

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

HTML的结构：


<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>


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>  <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>