《左边》- 杨丞琳 【根据老黑（小白帽+倒影）改进版制作】
<style>
.outer { position: relative; width: 760px; height: 520px; cursor: pointer; background: #ccc linear-gradient(rgba(100,26,210,.75),rgba(25,175,100,.65)); }
.mama { position: absolute; left: 20px; top: 20px; width: fit-content; height: fit-content; cursor: pointer; }
.wrap { width: 96px; height: 80px; -webkit-box-reflect: below 0 linear-gradient(transparent,rgba(0,0,0,.15)); display: flex; align-items: flex-end; gap: 4px; }
.wrap span { width: 6px; height: 60px; background-color: rgba(255,0,0,.6); display: block; position: relative; }
.wrap span::before { position: absolute; content: ''; width: inherit; height: 3px; background: #eee; top: -3px; animation: up 1s ease-in infinite; }
.mama meter { width: 96px; position: absolute; bottom: -4px;}
@keyframes up { from { top: -3px;} to { top: -16px; } }
</style>
<div class="outer">
<img src="https://pic.imgdb.cn/item/6299c9d60947543129a3fabc.jpg">
<div class="mama">
<div class="wrap"></div>
<meter id="meter" value="0" min="0" max="100" low="33" high="66" optimum="70"></meter>
</div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=22740077.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
let mama = document.querySelector('.mama'), wrap = document.querySelector('.wrap'), aud = document.querySelector('#aud'), meter = document.querySelector('#meter');
let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min, prog = (tt, cc) => 100 * cc / tt;
Array.from({length: 10}).forEach((ele) => {
ele = document.createElement('span');
ele.className = 'sskey';
ele.style.backgroundColor = `rgba(${num(0,255)},${num(0,255)},${num(0,255)},.95)`;
wrap.appendChild(ele);
})
let sskey = document.querySelectorAll('.sskey');
mama.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('timeupdate', () => {
Array.from(sskey).forEach((ele) => {
ele.style.height = num(10, 60) + 'px';
})
meter.value = prog(aud.duration, aud.currentTime);
})
</script>
本帖最后由 加林森 于 2022-6-3 16:54 编辑
左边 - 杨丞琳
总是 忍不住寂寞掉下眼泪
你才会给安慰
担心 短暂的晴天随时都可能
被阴霾收回
等待 有机会最坏也最甜美
我乐观却疲惫
因为 太怕失去你
所以连快乐里 都装满伤悲
你不曾发觉
你总是用右手牵着我
但是心却跳动在左边
你和我之间的遥远
永远隔着亲切
爱少的可怜
伸出右手
想陪着你向前走
感受你爱我的心跳在左边
那么深深爱你的我
相信你会了解
总在 埋怨过你的冷漠之后
又急着说抱歉
仿佛向疏远的你
乞求一点体贴
都是我不对
结果 有可能最美也最可悲
我做好了准备
也许 太自由的你
心里面那个家
谁也不能回
你不曾发觉
你总是用右手牵着我
但是心却跳动在左边
你和我之间的遥远
永远隔着亲切
爱少的可怜
伸出右手
想陪着你向前走
感受你爱我的心跳在左边
那么深深爱你的我
相信你会了解
我一直相信总有一天
你会用左手牵着我走向明天
未来很遥远却会实现
心在同一边就能够听见
你说的那句我爱你
你不曾发觉
你总是用右手牵着我
但是心却跳动在左边
你和我之间的遥远
永远隔着亲切
爱少的可怜
伸出右手
想陪着你向前走
感受你爱我的心跳在左边
那么深深爱你的我
你一定看的见
@马黑黑 播放器还弄出道迎来啦！ 荣浩老婆的歌我基本不听 不过队长的帖子极致，赞一个 梦油 发表于 2022-6-3 17:35
播放器还弄出道迎来啦！
是的 马黑黑 发表于 2022-6-3 17:39
荣浩老婆的歌我基本不听
哦，我不知道。我又制作了另外一纯音乐的出来。你去听听。 马黑黑 发表于 2022-6-3 17:40
不过队长的帖子极致，赞一个
谢谢老黑。 队长你真的神速了{:4_177:} 队长真快，图图好看，歌好听。给队长点赞{:4_204:} 加林森 发表于 2022-6-3 17:52
哦，我不知道。我又制作了另外一纯音乐的出来。你去听听。
李荣浩谁你可能都不知道 小辣椒 发表于 2022-6-3 19:32
队长你真的神速了
谢谢小辣椒。{:4_204:} 红影 发表于 2022-6-3 19:33
队长真快，图图好看，歌好听。给队长点赞
谢谢红影。我下午刚回来就发现老黑的这个新的代码。我赶紧制作了一个出来。{:4_189:} 马黑黑 发表于 2022-6-3 20:03
李荣浩谁你可能都不知道
不知道？他是谁? 加林森 发表于 2022-6-3 20:20
不知道？他是谁?
他是杨丞琳的老公 马黑黑 发表于 2022-6-3 20:23
他是杨丞琳的老公
难道他有毛病？ 加林森 发表于 2022-6-3 20:25
难道他有毛病？
他没毛病，他很好 马黑黑 发表于 2022-6-3 20:31
他没毛病，他很好
那你啥意思？{:4_203:} 加林森 发表于 2022-6-3 20:39
那你啥意思？
你不了解杨丞琳
页:
[1]
2