The Lovers
本帖最后由 马黑黑 于 2022-12-8 07:54 编辑 <br /><br /><style>#papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 683px; background: pink url('https://638183.freep.cn/638183/qd/lovers.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; z-index: 1; }
#mplayer { position: absolute; bottom: 40px; left: 160px; width: 120px; height: 120px; border-radius: 50%; border: 6px solid darkgreen; display: grid; place-items: center center; user-select: none; cursor: pointer; }
#tmsg { font: normal 14px sans-serif; color: lightgreen; z-index: 450; }
.mline { --hh: 0px; position: absolute; width: 2px; height: 6px; background: green; }
.mline::before, .mline::after {position: absolute;content: '';width: 100%;height: var(--hh); }
.mline::before { bottom: 0;left: 0;background: linear-gradient(to top, green, lightgreen); }
.mline::after { top: 0;left: 0;background: linear-gradient(to bottom, green, lightgreen); }
#tit { --state: running; position: absolute; top: 10px; left: 20px; font: bold 2em sans-serif; color: lightgreen; text-shadow: 1px 2px 2px #000; }
#tit::before { position: absolute; content: attr(data-tit); width: 0; height: 100%; left: 0; top: 0; white-space: pre; color: #a90d30; text-shadow: 1px 2px 2px snow; overflow: hidden; animation: cover 10s infinite alternate linear; animation-play-state: var(--state); }
@keyframes cover { from { width: 0; } to { width: 100%; } }
</style>
<div id="papa">
<div id="tit" data-tit="THE LOVERS">THE LOVERS</div>
<div id="mplayer"><span id="tmsg">play</span></div>
<img src="https://638183.freep.cn/638183/t22/animal/bird3.gif" alt="" style="position: absolute; right: 20px; top: 20px;" />
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=28221434.mp3" autoplay loop></audio>
</div>
<script>
(function() {
let ppsize = 4, gap = 0, cNum = 0;
let total = Math.floor(mplayer.clientWidth * Math.PI / (ppsize + gap));
let ypData = ;
for(j=0; j< total; j++) {
let ele = document.createElement('span');
ele.className = 'mline';
ele.style.width = ppsize + 'px';
ele.style.transform = `rotate(${j*360/total}deg) translateY(63px)`;
mplayer.appendChild(ele);
}
let lines = document.querySelectorAll('.mline');
let update = () => {
lines.forEach((item,key) => item.style.setProperty('--hh',Math.random() * ypData / 5 + 'px'));
if(!aud.paused) window.requestAnimationFrame(update);
};
let toMin = (val) => {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60),sec = parseFloat(val % 60);if (min < 10) min = '0' + min;if (sec < 10) sec = '0' + sec;return min + ':' + sec;}
mplayer.onclick = () => aud.paused ? (aud.play(),tit.style.setProperty('--state','running')) : (aud.pause(),tit.style.setProperty('--state','paused'));
aud.addEventListener('timeupdate', () => {
cNum ++;
if(cNum >= ypData.length) cNum = 0;
update();
tmsg.innerText = '-' + toMin(aud.duration - aud.currentTime);
});
})();
</script>
频谱模拟同步响应音频变化，实时感不是很好，聊胜于无吧。
频谱变化的速度很快，它由 requestAnimationFrame 驱动，未设置频谱元素的延时属性 transition（若设置且恰当，则可以控制频谱速度，可参考昨天在水吧发的帖子的做法）。
频谱的外观，是在昨天发的圆内频谱基础上略作改动，频谱突破了圆内圈。方法很简单：加另外一个伪元素，::after 。频谱条长度的变化通过两给伪元素实现，其主元素自始至终都是和圆的边框一样的高度。
看了介绍，觉得这个效果肯定很棒。虽然现在还无法欣赏到效果{:4_187:} 红影 发表于 2022-12-8 11:00
看了介绍，觉得这个效果肯定很棒。虽然现在还无法欣赏到效果
{:4_173:} 这个圆频谱作出来了{:4_199:}
黑黑这么忙还是完成这个圆频谱的示范，太感谢了{:4_187:} 黑黑威武{:4_178:} 小辣椒 发表于 2022-12-8 11:05
这个圆频谱作出来了
黑黑这么忙还是完成这个圆频谱的示范，太感谢了
今天补休 红影 发表于 2022-12-8 11:00
看了介绍，觉得这个效果肯定很棒。虽然现在还无法欣赏到效果
亲爱的，用手机可以 小辣椒 发表于 2022-12-8 11:06
黑黑威武
说的俺都不好意思了{:4_170:} 马黑黑 发表于 2022-12-8 11:11
说的俺都不好意思了
有啥不好意思，我有你这个水平我会开心s的 小辣椒 发表于 2022-12-8 11:14
有啥不好意思，我有你这个水平我会开心s的
那我开心一下{:4_170:} 频谱漂亮，感谢分享！{:4_185:} 马黑黑 发表于 2022-12-8 11:03
黑黑辛苦了{:4_187:} 小辣椒 发表于 2022-12-8 11:09
亲爱的，用手机可以
我习惯电脑来论坛，基本不用手机来的{:4_173:} 红影 发表于 2022-12-8 16:37
黑黑辛苦了
也不算啥辛苦，玩玩 梦缘 发表于 2022-12-8 15:25
频谱漂亮，感谢分享！
下午好！感谢支持 马黑黑 发表于 2022-12-8 17:06
也不算啥辛苦，玩玩
看到了，好奇特的效果{:4_187:} 红影 发表于 2022-12-8 18:49
看到了，好奇特的效果
就是太快了 马黑黑 发表于 2022-12-8 18:57
就是太快了
像只小刺猬{:4_173:} 红影 发表于 2022-12-8 19:22
像只小刺猬
可以像之前那样，不用请求关键帧动画
页:
[1]
2