一辈子牵着你的手 - 梅朵
本帖最后由 醉美水芙蓉 于 2023-7-23 22:01 编辑 <br /><br /> <style>#mydiv { margin: 80px 0 0 calc(50% - 593px); width: 1024px; height: 575px; background: url('https://pic.imgdb.cn/item/64b6ad4a1ddac507cc0822f5.jpg') center/cover no-repeat; border: 1px solid tan; display: grid; place-items: center; position: relative; --state: paused; overflow: hidden; }
#ppwrap { position: absolute; bottom: 300px; width: 120px; height: 120px;display: grid; place-items: center;cursor: pointer; animation: rot 6s infinite linear var(--state); --deg: 360deg;}
#ppwrap::before { position: absolute; content: attr(data-tt); background: url('https://pic.imgdb.cn/item/64b6a8a41ddac507ccf4f197.gif');width: 120px; height: 120px;border-radius: 50%; display: grid; place-items: center; mix-blend-mode: lighten; opacity: .65; white-space: pre; font: normal 14px sans-serif; color: snow; animation: rot 6s infinite linear var(--state); --deg: -360deg; }
#lrc { position: absolute; top: 20px; left: 50%; transform: translate(-50%); font: bold 2.4em sans-serif; color: rgba(140,220,125,.85); -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px rgba(0,0,0,.95)); --motion: cover2; --tt: 5s; }
#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: nowrap; background: linear-gradient(180deg,rgba(10,145,18,.35),rgba(20,175,50,.75)); filter: inherit; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards var(--state); }
.pinpu { display: grid; place-items: center end; position: absolute; right: calc(50% + 2px); top: calc(50% - 2px); width: 10px; height: 4px; transform-origin: 100% 100%; animation: ppgo var(--du) var(--dl) infinite alternate var(--state); }
.pinpu::after { content:''; position: absolute; width: 4px; height: 4px; background: lightblue; border-radius: 50%; }
#pic { position: absolute; left: 100px; bottom: 100px; width: 310px; height: 291px; }
#pic1 { position: absolute; right: 100px; bottom: 60px; width: 362px; height: 340px; }
.vid { position: absolute;left: 0px;top:-5px; width: 1024px; height: 630px; object-fit: cover; opacity: 0.7; clip-path: circle(99% at bottom) ;mix-blend-mode: lighten; }
.mybox { position: absolute; top: -100px; left: 50%; font-size: 50px; animation: down 8s var(--delay) infinite linear var(--state); --delay: 0s; --deg: 20deg; }
.mybox:nth-of-type(2) { --delay: -2s; --deg: -10deg; }
.mybox:nth-of-type(3) { --delay: -4s; --deg: -20deg; }
.mybox:nth-of-type(4) { --delay: -6s; --deg: 20deg; }
@keyframes ppgo { from { width: 0px; } to { width: 50px; } }
@keyframes rot { to { transform: rotate(var(--deg)); } }
@keyframes down { to { transform: rotate(var(--deg)) translateY(900px) rotate(360deg); } }
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
</style>
<div id="mydiv"> <div id="ppwrap" data-tt="00:00 00:00"></div>
<div id="lrc" data-lrc="花潮lrc在线">花潮lrc在线</div>
<video class="vid" src="https://imgs-qn.51miz.com/preview/video/00/00/14/91/V-149128-29F31EB0.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
<img id="pic" src="https://pic.imgdb.cn/item/64b93ca21ddac507cc989c94.gif" alt="" />
<img id="pic1" src="https://pic.imgdb.cn/item/64b93ca21ddac507cc989c94.gif" alt="" />
</div>
<audio id="aud" src="http://chuangshicdn.data.mvbox.cn/music/yc/23/07/23/23072321383050700401.mp3" autoplay loop></audio>
<script>
(function(){
let ppnum = 50, mKey = 0, mFlag = true, slip = 0;
let lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
!function(){ Array.from({length: ppnum}).forEach((item,key) => { item = document.createElement('span'); item.className = 'pinpu'; item.style.cssText += `background: lightgreen; transform: rotate(${360 / ppnum * key}deg) translate(-60px); --du: ${.2 + Math.random() * .2}s; --dl: -${Math.random()}s; `; ppwrap.appendChild(item); }); }();
let mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
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;}
let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrc.dataset.lrc = lrcAr;lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};
let calcKey = () => {for(j = 0; j < lrcAr.length; j ++) {if(aud.currentTime <= lrcAr) {mKey = j - 1;break;}}if(mKey <0) mKey = 0;if(mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr - (aud.currentTime - lrcAr);showLrc(time);};
aud.addEventListener('pause', mState, false);
aud.addEventListener('play', mState, false);
aud.addEventListener('seeked', calcKey, false);
aud.addEventListener('timeupdate', () => { ppwrap.dataset.tt = toMin(aud.currentTime) + '\n' + toMin(aud.duration); for (j = 0; j < lrcAr.length; j++) { if(aud.currentTime >= lrcAr + slip) { cKey = j; if (mKey === j) showLrc(lrcAr); else continue; } } });
ppwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script> 原来这个是加了歌词的，还以为跟前面那帖是一样的呢{:4_173:}
欣赏水芙蓉美女好帖{:4_187:} 而且这个是垂直方向的频谱，也是和前面那帖不一样的地方{:4_204:} 红影 发表于 2023-7-23 22:12
而且这个是垂直方向的频谱，也是和前面那帖不一样的地方
可能有的人听不到歌曲，歌曲太长，没有学过压缩。没有地方上传了呢？ 醉美水芙蓉 发表于 2023-7-23 22:42
可能有的人听不到歌曲，歌曲太长，没有学过压缩。没有地方上传了呢？
我很少上传歌曲，还真的不知道哪里可以上传呢{:4_204:} 加了歌词，播放器也比烟火更好看。厉害！ 樵歌 发表于 2023-7-24 07:12
加了歌词，播放器也比烟火更好看。厉害！
樵歌能够听到音乐吗？ 醉美水芙蓉 发表于 2023-7-24 11:58
樵歌能够听到音乐吗？
能听到呀。{:4_173:} 这不是红影那个舞台吗，来了这么多人。。。{:5_106:} 东篱闲人 发表于 2023-7-30 20:59
这不是红影那个舞台吗，来了这么多人。。。
是的，跟着学习！
页:
[1]