《睫毛弯弯》- 王心凌
<style>
.outer {
left: -214px;
width: 1024px;
height: 625px;
background: #ccc url('https://pic.imgdb.cn/item/62957d500947543129e5ec9a.jpg') no-repeat;
cursor: pointer;
position: relative;
}
.wrap { width: 60px; height: 60px;box-reflect: right; -webkit-box-reflect: right; position: relative; }
.mama meter { width: 120px; height: 20px; position: relative; }
.wrap span { --ww: 6px; width: var(--ww); height: 60px; bottom: -6px; background-color: rgba(255,0,0,.6); display: inline-block; position: absolute; }
.wrap span:nth-child(2) { left: var(--ww); }
.wrap span:nth-child(3) { left: calc(var(--ww) * 2); }
.wrap span:nth-child(4) { left: calc(var(--ww) * 3); }
.wrap span:nth-child(5) { left: calc(var(--ww) * 4); }
.wrap span:nth-child(6) { left: calc(var(--ww) * 5); }
.wrap span:nth-child(7) { left: calc(var(--ww) * 6); }
.wrap span:nth-child(8) { left: calc(var(--ww) * 7); }
.wrap span:nth-child(9) { left: calc(var(--ww) * 8); }
.wrap span:nth-child(10) { left: calc(var(--ww) * 9); }
</style>
<div class="outer">
<div class="mama">
<div class="wrap"></div>
<meter id="meter" value="0" min="0" max="100" low="33" high="66" optimum="70"></meter>
<audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2022/05/30/a8b54a376c134fa0f53d830f8a6e7ca2.mp3" autoplay="autoplay" loop="loop"></audio>
</div>
</div>
<script>
let mama = document.querySelector('.outer'), 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(20, 60) + 'px';
})
meter.value = prog(aud.duration, aud.currentTime);
})
</script>
睫毛弯弯 - 王心凌 (Cyndi Wang)
词：严云农
曲：曹格
我 心砰砰跳跳
灵魂快要出窍 这感觉真好
Oh 你 对着我微笑
温度越来越高 怎么办才好
眼神雾濛濛 小鹿在乱跳
（跳上了心扉）
心情荡秋千脸上红苹果
（滋味真甜美）
Baby 你是谁
为什么我变成胆小鬼
好喜欢你却说好久不见
明明才见你一次面
睫毛弯弯 眼睛眨啊眨
话说到嘴边怎么会转弯
你的微笑 像月弯弯
气氛好浪漫 需要你陪伴
睫毛弯弯 眼睛眨啊眨
心动的世界变得好好玩
来玩的大风 吹什么
吹一见钟情的人
我 心砰砰跳跳
灵魂快要出窍 这感觉真好
Oh 你 对着我微笑
温度越来越高 怎么办才好
眼神雾濛濛 小鹿在乱跳
（跳上了心扉）
心情荡秋千脸上红苹果
（滋味真甜美）
Baby 你是谁
为什么我变成胆小鬼
好喜欢你却说好久不见
明明才见你一次面
睫毛弯弯 眼睛眨啊眨
话说到嘴边怎么会转弯
你的微笑 像月弯弯
气氛好浪漫 需要你陪伴
睫毛弯弯 眼睛眨啊眨
心动的世界变得好好玩
来玩的大风 吹什么
吹一见钟情的人
睫毛弯弯 眼睛眨啊眨
话说到嘴边怎么会转弯
你的微笑 像月弯弯
气氛好浪漫 需要你陪伴
睫毛弯弯 眼睛眨啊眨
心动的世界变得好好玩
来玩的大风 吹什么
吹一见钟情的人
睫毛弯弯 眼睛眨啊眨
话说到嘴边怎么会转弯
你的微笑 像月弯弯
气氛好浪漫 需要你陪伴
睫毛弯弯 眼睛眨啊眨
心动的世界变得好好玩
来玩的大风 吹什么
吹一见钟情的人 这美女眼睛真大，还真是睫毛弯弯啊{:4_204:} 红影 发表于 2022-5-31 10:53
这美女眼睛真大，还真是睫毛弯弯啊
她就是王心凌。 嗬，王心凌的睫毛真显眼。 梦油 发表于 2022-5-31 15:38
嗬，王心凌的睫毛真显眼。
是啊。漂亮吧。 加林森 发表于 2022-5-31 16:17
是啊。漂亮吧。
是啊，漂亮。 梦油 发表于 2022-5-31 16:20
是啊，漂亮。
是的。唱得也好听。 加林森 发表于 2022-5-31 16:21
是的。唱得也好听。
不过，我还是更喜欢老歌、红歌、老乐曲和红乐曲。 梦油 发表于 2022-5-31 16:24
不过，我还是更喜欢老歌、红歌、老乐曲和红乐曲。
我是什么都可以接收的。 加林森 发表于 2022-5-31 16:37
我是什么都可以接收的。
是啊，博采众长，这样好！ 梦油 发表于 2022-5-31 16:55
是啊，博采众长，这样好！
我喜欢音乐，只要好听就行。 加林森 发表于 2022-5-31 16:59
我喜欢音乐，只要好听就行。
是啊，我也很喜欢音乐。 梦油 发表于 2022-5-31 17:48
是啊，我也很喜欢音乐。
所以我是不分什么音乐的。只要好听就行了。 哎呀，图图选的好 马黑黑 发表于 2022-5-31 18:19
哎呀，图图选的好
老黑上来啦。晚上好！{:4_191:} 加林森 发表于 2022-5-31 17:51
所以我是不分什么音乐的。只要好听就行了。
好啊，多多益善。 梦油 发表于 2022-5-31 18:22
好啊，多多益善。
音乐无国界的。 加林森 发表于 2022-5-31 18:24
音乐无国界的。
是啊，好的音乐作品，在哪里都是好作品，比如：蓝色多瑙河、梁祝交响乐…… 梦油 发表于 2022-5-31 20:12
是啊，好的音乐作品，在哪里都是好作品，比如：蓝色多瑙河、梁祝交响乐……
嗯嗯，如好酒一样。
页:
[1]
2