克罗地亚狂想曲
本帖最后由 马黑黑 于 2022-12-13 10:42 编辑 <br /><br /><style>#papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 600px; display: grid; place-items: center; background: gray url('https://638183.freep.cn/638183/t22/webp/kldy.webp') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; opacity: .95; user-select: none; overflow: hidden; z-index: 1; --state: paused; }
#papa::before, #papa::after { --deg1: 5deg; --deg2: -5deg; --delay: 0s; position: absolute; content: ''; width: 110%; height: 110%; background: repeating-conic-gradient(at 0 0,hsla(240,100%,78%,.15) 0 4deg, transparent 0 35deg); animation: swing 6s infinite alternate linear, opt .3s var(--delay) infinite; transform-origin: 0 0; animation-play-state: var(--state); opacity: 1; }
#papa::after { --deg1: -5deg; --deg2: 5deg; --delay: .2s; background: repeating-conic-gradient(at 100% 0, hsla(240,100%,70%,.15) 0 4deg, transparent 0 35deg); }
@keyframes swing { from { transform: skew(var(--deg1)); } to { transform: skew(var(--deg2)); } }
@keyframes opt { to { opacity: .6;} }
</style>
<div id="papa">
<audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2022/12/13/fdc252bb23e2c80c1b898361807de414.mp3" autoplay></audio>
</div>
<script>
(function(mkPlayer) {let defaults = {lrcAr: [],ypData: new Array(500).fill(0).map((v, k) => Math.floor(Math.random() * 200) + 10),player_css: '',lrc_css: '',aniId: [],playerCode: `<style>#btnplay {--ww: 35px;position: absolute;left: calc(50% - 17.5px);bottom: 15px;background: conic-gradient(red,orange,yellow,green,teal,blue,purple);mask: radial-gradient(transparent 3px,red 0);-webkit-mask: radial-gradient(transparent 3px,red 0);border-radius: 50%;width: var(--ww);height: var(--ww);cursor: pointer;z-index: 999;}#lrc {--motion: cover2;--tt: 2s;--state: paused;--bg: linear-gradient(180deg, hsla(60, 50%, 50%, .45), hsla(0, 100%, 50%, .75));position: absolute;top: 20px;font: bold 2.4em sans-serif;color: hsl(0, 10%, 90%);white-space: pre;-webkit-background-clip: text;filter: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, .95));z-index: 1000;}#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: pre; background: var(--bg); filter: inherit; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }@keyframes rot { to { transform: rotate(360deg); } }@keyframes cover1 {from {width: 0;} to {width: 100%;}}@keyframes cover2 {from {width: 0;} to {width: 100%;}}</style><span id="lrc" data-lrc="HCPlayer">HCPlayer</span><span id="btnplay"></span>`,};let playCode = (user_config) => {let data = Object.assign({}, defaults, user_config);papa.innerHTML += data.playerCode;btnplay.style.cssText += data.player_css;lrc.style.cssText += data.lrc_css;data.aniId.push('lrc');btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();btnplay.onmouseover = () => btnplay.title = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);aud.loop = false;let mKey = 0, ppnum = 0, deg = 0, mFlag = true, qAF;aud.addEventListener('pause', () => mState());aud.addEventListener('playing', () => { mState(); qAF = requestAnimationFrame(update);});aud.addEventListener('ended', () => { mKey = 0; ppnum = 0; deg = 0; cancelAnimationFrame(update); aud.play(); });aud.addEventListener('timeupdate', () => {ppnum ++;if (ppnum >= data.ypData.length) ppnum = 0;for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime >= data.lrcAr) {cKey = j;if (mKey === j) showLrc(data.lrcAr);else continue;}}});let update = () => {deg += data.ypData / 100+ 1;btnplay.style.transform = 'rotate(' + deg + 'deg)';if(qAF > 0) cancelAnimationFrame(qAF);aud.paused ? cancelAnimationFrame(qAF) : qAF =requestAnimationFrame(update);};let mState = () => {data.aniId.forEach((e,k) => {e = document.getElementById(e);e.style.setProperty('--state', aud.paused ? 'paused' : 'running');});};let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = data.lrcAr;lrc.dataset.lrc = data.lrcAr.replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};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;};};mkPlayer.HCPlayer = playCode;})(this);
let ypData = ;
HCPlayer({
ypData: ypData,
lrcAr: [],
player_css: '--ww: 60px; left: 320px; bottom: 6px;',
lrc_css: 'left: 385px; top: calc(100% - 65px);',
aniId: ['papa'],
});
</script>
克罗地亚狂想
足球也一样 驻在平安夜前夕 发表于 2022-12-13 11:32
克罗地亚狂想
足球也一样
{:4_181:} 这些光柱的运用真漂亮，还能在音乐暂停的时候暂停呢，黑黑好帖，赞{:4_187:} 这些光柱除了转动，还有明暗变化，这些变化也是和音乐相关的吧{:4_187:} 红影 发表于 2022-12-13 14:53
这些光柱的运用真漂亮，还能在音乐暂停的时候暂停呢，黑黑好帖，赞
光盘的旋转速度是由音乐节奏带动的，因为这支曲子的律动区别不大，不太看得出来。光柱响应音乐的播放/暂停而决定是否运行两个CSS关键帧动画。 红影 发表于 2022-12-13 14:55
这些光柱除了转动，还有明暗变化，这些变化也是和音乐相关的吧
没有直接关系，或换句话说，没有跟音乐的律动而变化，仅跟音乐的播放与暂停有关。 黑黑，这个探照灯一样的效果新的特效吧 音乐停止，这个效果就停止了，是控制按钮啊 个个漂亮，可惜我最近来不及马上做出来 小辣椒 发表于 2022-12-13 21:15
个个漂亮，可惜我最近来不及马上做出来
不急的 马黑黑 发表于 2022-12-13 21:18
不急的
好的 小辣椒 发表于 2022-12-13 21:21
好的
这些帖子，其实都大同小异 马黑黑 发表于 2022-12-13 21:22
这些帖子，其实都大同小异
我都看了一下，有点差不多的类型。昨天开始一直在捣鼓上传空间，我的链接外面都在用，也是郁闷，真的奇怪，我今天发，别人明天再用了，而且都是玩你的播放器 小辣椒 发表于 2022-12-13 21:29
我都看了一下，有点差不多的类型。昨天开始一直在捣鼓上传空间，我的链接外面都在用，也是郁闷，真的奇怪 ...
防盗链是很麻烦的 马黑黑 发表于 2022-12-13 18:16
光盘的旋转速度是由音乐节奏带动的，因为这支曲子的律动区别不大，不太看得出来。光柱响应音乐的播放/暂 ...
连转速都是音乐带动的，这个也算是响应式的吧{:4_199:} 马黑黑 发表于 2022-12-13 18:16
没有直接关系，或换句话说，没有跟音乐的律动而变化，仅跟音乐的播放与暂停有关。
很漂亮，我正好弄反了，转盘才是跟音乐的{:4_173:} 看出来转盘的转速变化了，开始的时候特别明显{:4_187:} 红影 发表于 2022-12-13 21:48
看出来转盘的转速变化了，开始的时候特别明显
头尾有点感觉 红影 发表于 2022-12-13 21:47
很漂亮，我正好弄反了，转盘才是跟音乐的
从驱动角度上看，是的