那又如何（单图左移无缝连接）
本帖最后由 山里人 于 2024-4-8 22:45 编辑 <br /><br /><style>#lrc { position: absolute; top: 560px; left: 50%; transform: translate(-50%); font: bold 2.4em sans-serif; color: rgba(120,220,200,.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(30,0,120,.65),rgba(180,0,200,.95)); 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%; }
.mybox { position: absolute; top: -220px; 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%; } }
#mydiv {
margin: 0 0 0 calc(39% - 633.5px);
width: 1280px;
height: 640px;
background: url('https://ln2018.oss-cn-hangzhou.aliyuncs.com/2024/pp/tp/yf.jpg') no-repeat center/cover;
box-shadow: 4px 4px 8px gray;
overflow: hidden;
z-index: 1;
position: relative;
--begin1: 0px;
--begin2: 1280px;
}
#mydiv::before , #mydiv::after {
position: absolute;
content: '';
inset: 0;
background: url('https://ln2018.oss-cn-hangzhou.aliyuncs.com/tp/0.png') no-repeat;
z-index: -2;
}
#mydiv::before {
background-position: var(--begin1) 0;
}
#mydiv::after {
transform: scale(-1, 1);
background-position: var(--begin2) 0;
}
#play {
position: absolute;
left: calc(50% - 50px);
bottom: 10px;
width: 00px;
cursor: pointer;
animation: rotating 5s linear infinite var(--state);
}
@keyframes rotating { to { transform: rotate(360deg); } }
</style>
<div id="mydiv">
<div id="ppwrap" data-tt="00:00 00:00"></div>
<audio id="aud" src="https://shanlr.s3-us-east-1.ossfiles.com/2024/%E9%9F%A9%E5%AE%9D%E4%BB%AA-%E9%82%A3%E5%8F%88%E5%A6%82%E4%BD%95.mp3" autoplay loop></audio>
<img id="play" src="https://ln2018.oss-cn-hangzhou.aliyuncs.com/2024/pp/clover4.sv" alt="" />
<div id="lrc" data-lrc="那又如何">那又如何</div>
</div>
<script>
var ww = mydiv.offsetWidth;
var step = 1, begin1 = 0, begin2 = ww, raf = null;
play.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.onpause = aud.onplaying = () => mState();
aud.onended = () => { aud.play(); cancelAnimationFrame(raf); }
aud.onseeked = () => cancelAnimationFrame(raf);
var moving = () => {
begin1 -= step;
if(begin1 <= -ww) begin1 = ww;
begin2 = begin1 >= 0 ? -1 * (begin1 - ww + 1) : begin2 = -1 * (begin1 + ww - 1) ;
mydiv.style.setProperty('--begin1', begin1 + 'px');
mydiv.style.setProperty('--begin2', begin2 + 'px');
aud.paused ? cancelAnimationFrame(raf) : raf = requestAnimationFrame(moving);
};
var mState = () => {
aud.paused
? (mydiv.style.setProperty('--state', 'paused'), cancelAnimationFrame(raf))
: (mydiv.style.setProperty('--state', 'running'), raf = requestAnimationFrame(moving));
};
</script>
<script>
(function(){
let ppnum = 70, 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(-50px); --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_203:} 哦，能暂停，看到到小手的标注，点到点不到弄不清楚。歌曲莫名就从头开始了，好像还没结束的样子就从头了。
页:
[1]