午夜怨曲（to 红影）
<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> 美美的夜空炫技，漂亮{:4_187:} 这个厉害了，那闪闪发光的也是代码做的。还有歌词的隐藏浮现和歌曲的停止播放。又有好东西可以学习了{:4_187:} 制作真漂亮，歌也好听。谢谢黑黑的好礼{:4_187:} 那个闪闪发光的貌似还是第一次展示呢，空了我也学习做个{:4_173:} 黑黑这个新产品漂亮的{:4_199:} 这个效果太漂亮了{:4_199:} 绿叶清舟 发表于 2022-1-25 22:17
这个效果太漂亮了
有点低调的效果 马黑黑 发表于 2022-1-25 22:38
有点低调的效果
都这么闪了还低调啊，这星长短可以调的吧 绿叶清舟 发表于 2022-1-25 22:41
都这么闪了还低调啊，这星长短可以调的吧
是光影，不是星星
马黑黑 发表于 2022-1-25 22:42
是光影，不是星星
不就是星在闪的光嘛 千羽 发表于 2022-1-25 21:25
美美的夜空炫技，漂亮
羽羽晚上好 红影 发表于 2022-1-25 21:27
这个厉害了，那闪闪发光的也是代码做的。还有歌词的隐藏浮现和歌曲的停止播放。又有好东西可以学习了{:4_18 ...
好像没新的内容，是之前的东东的组合运用 红影 发表于 2022-1-25 21:29
那个闪闪发光的貌似还是第一次展示呢，空了我也学习做个
这个只是之前弄过的animation动画，只是把元素一生二再加一个只派儿子出来的元素，同一个运动圆心，然后有两个转完倒转，看上去好多条光影一样，实际就四条光影。光影长600，宽2到5个像素。 小辣椒 发表于 2022-1-25 21:52
黑黑这个新产品漂亮的
辣辣晚上好 绿叶清舟 发表于 2022-1-25 22:44
不就是星在闪的光嘛
光源可能是星星，也可能是萤火虫{:4_170:} 马黑黑 发表于 2022-1-25 22:50
光源可能是星星，也可能是萤火虫
虫吃电了啊，这么大的光 冬雨喜欢这首粤语歌{:4_208:} 冬天的雨 发表于 2022-1-26 20:32
冬雨喜欢这首粤语歌
谢谢。喝茶{:4_190:} 绿叶清舟 发表于 2022-1-26 20:13
虫吃电了啊，这么大的光
一切物质都有电，比如萤火虫，比如壁虎。离开了电，物质就不是物质