【黑师代码】遨游（来个好玩的贴子）

花简静 · 发表于 2024-3-24 20:15

本帖最后由花简静于 2024-3-24 20:24 编辑

遨游

花简静 · 发表于 2024-3-24 20:16

本帖最后由花简静于 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>

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:16

本帖最后由花简静于 2024-3-24 20:24 编辑

<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); z-index: 10;}
#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>

红的代码是一套，管三个气球飞的。
蓝的代码是一套，原来是歌词，这里是下面的标题。
黑色的就背景移动的。。