本帖最后由 花简静 于 2024-3-24 20:18 编辑
<style>
#papa { margin: 120px 0 0 calc(50% - 931px); width: 1700px; height: 600px; box-shadow: 3px 3px 20px #000; position: relative; overflow: hidden; z-index: 1; }
#canv { position: absolute;}
.pic { position: absolute; width: 240px; mix-blend-mode: screen; offset-path: path('M1924,280 Q750,180 -500,70'); transform: rotateX(180deg);offset-distance: 100%; animation: fly 60s var(--delay) infinite var(--state); --delay: 0s;z-index: 2;}
.pic:nth-of-type(2) { width: 60px;--delay: -20s; }
.pic:nth-of-type(3) { width: 90px;--delay: -40s; }
@keyframes fly { to { offset-distance: 0; } }
#mypic { position: absolute; left: 26%; top: 60px; width: 80px; cursor: pointer; mix-blend-mode: multiply; transform: scale(0.8) rotate(-10deg); animation: scale 10s infinite alternate var(--state); }
#lrc { --motion: cover2; --tt: 1s; --bg: repeating-linear-gradient(135deg, orange 1px, yellow 6px); position: absolute;left: 50%; transform: translate(-50%); bottom: 20px; font: bold 2.4em sans-serif; color: hsl(100, 100%, 90%); white-space: pre; -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(0, 100%, 0%, .85)); pointer-events: none; z-index: 900; }
#lrc::before { position: absolute; content: attr(data-lrc); width: 0%; height: 100%; color: transparent; border-bottom: 6px dotted orange; overflow: hidden; white-space: pre; background: var(--bg); filter: inherit; background-clip: text; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards var(--state); }
@keyframes scale { to { transform: scale(1.2) rotate(360deg); } }
@keyframes cover1 { from { width: 0%; } to { width: 100%; } }
@keyframes cover2 { from { width: 0%; } to { width: 100%; } }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2051361761" loop autoplay></audio>
<img class="pic" src="https://pic.imgdb.cn/item/65ffbe039f345e8d036fc70e.png" alt="" />
<img class="pic" src="https://pic.imgdb.cn/item/65ffbed69f345e8d0375e3ec.png" alt="" />
<img class="pic" src="https://pic.imgdb.cn/item/65ffbee79f345e8d037664e0.png" alt="" />
<canvas id="canv"></canvas>
<img id="mypic" src="https://pic.imgdb.cn/item/65ffc0b29f345e8d0384c33c.png" alt="" title="播放/暂停" />
<div id="lrc" data-lrc="遨游">遨游</div>
</div>
<script>
var geci = [ [2,"",6] ];
var sf = document.createElement('script');
(function() {
let w = canv.width = papa.offsetWidth;
let h = canv.height = papa.offsetHeight;
let x = 0, step = 0.5, raf = null;
let ctx = canv.getContext('2d');
let img = document.createElement('img');
img.src = 'https://pic.imgdb.cn/item/65ffbcb79f345e8d036628f7.webp';
let mState = () => {
aud.paused ?
(papa.style.setProperty('--state', 'paused'),mypic.title = '点击播放') :
(papa.style.setProperty('--state', 'running'), mypic.title = '点击暂停');
move();
}
let move = () => {
ctx.clearRect(0,0,w,h);
x -= step;
if(x <= -w) x = 0;
ctx.drawImage(img, x, 0, w, h);
ctx.drawImage(img, w + x - 1, 0, w, h);
raf = aud.paused ? cancelAnimationFrame(raf) : requestAnimationFrame(move);
};
img.onload = () => move();
aud.onpause = aud.onplaying = () => mState();
aud.onseeking = () => raf = cancelAnimationFrame(raf);
mypic.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>
| 
发表于 2024-3-24 20:15
发表于 2024-3-24 20:17
