本帖最后由 花简静 于 2025-8-27 20:02 编辑
<style>
@import 'https://638183.freep.cn/638183/web/css/tz01.css';
#pa { --offsetX: 0px; margin:150px 0; left: calc(50% - 101px);width: clamp(600px, 90vw, 1700px); height: auto; aspect-ratio: 17/10;--bg: url('https://642303.freep.cn/642303/tu/20250822yjlby001.jpg') no-repeat center/cover; --bg1: url('https://642303.freep.cn/642303/tu/20250822yjlby002.jpg') no-repeat center/cover; --ma-size: 6%; --per: -0.5%; }
#pa::before { position: absolute; content: ''; inset: 0; background: var(--bg1); mask: radial-gradient(red var(--per), transparent calc(var(--per) + 0.5%) 0); --webkit-mask: radial-gradient(red var(--per), transparent calc(var(--per) + 0.5%) 0); }
#ma { left: 78%; top: 16%; background: url('https://642303.freep.cn/642303/za/0a772207b4a0b7d4.png') no-repeat center/cover; animation-duration: 12s; opacity: .8;}
.qk-vid {
mask: linear-gradient(to bottom,transparent,transparent,transparent,red);
-webkit-mask: linear-gradient(to bottom,transparent,transparent,transparent,red);
opacity: .5;
mix-blend-mode: overlay;
}
#btnFs { left: 20px; bottom: 20px; background: rgba(46,139,87, .25);
}
</style>
<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1384127698" autoplay loop></audio>
<video class="qk-vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/05/14/10/14/video6365fe4600974.m p4" autoplay loop muted></video>
<video class="qk-vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/05/07/13/38/video63659ca26f130.mp4" autoplay loop muted></video>
<div id="ma" class="opacity"></div>
</div>
<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
FS(pa, ma);
var per = 0, step = 0.5, picIdx = 0, raf;
var pics = [
'https://642303.freep.cn/642303/tu/20250822yjlby001.jpg',
'https://642303.freep.cn/642303/tu/20250822yjlby002.jpg',
'https://642303.freep.cn/642303/tu/20250822yjlby003.jpg',
'https://642303.freep.cn/642303/tu/20250822yjlby004.jpg',
];
ma.onanimationiteration = () => update();
function update() {
if (document.visibilityState === 'hidden') return;
let idx = (per <= 0 ? picIdx : picIdx + 1) % pics.length,
idx1 = (per <= 0 ? picIdx + 1 : picIdx) % pics.length;
pa.style.setProperty('--bg', `url(${pics[idx]}) no-repeat center/cover`);
pa.style.setProperty('--bg1', `url(${pics[idx1]}) no-repeat center/cover`);
picIdx ++;
animate();
}
function animate() {
per += step;
if (per < -0.5 || per > 100) {
cancelAnimationFrame(raf);
step = -step;
} else {
pa.style.setProperty('--per', per + '%');
raf = requestAnimationFrame(animate);
}
}
</script>
| 
