本帖最后由 花简静 于 2025-8-15 10:35 编辑
大家挑一张图做就好啦，如果要四张的就用我这个转场代码
<style>
@import 'https://638183.freep.cn/638183/web/css/tz01.css';
#pa { --offsetX: 0px; width: clamp(600px, 90vw, 1800px); height: auto; aspect-ratio: 18/9;margin: 150px 0;left: calc(50% - 81px);--bg: url('https://642303.freep.cn/642303/tu/02w.jpg') no-repeat center/cover; --bg1: lightblue; --state: runnig; transition: 0.5s; --ma-size: 3%; --per: -2%; --a: 45deg; }
#pa::before { content: ''; position: absolute; inset: 0; background: var(--bg1); mask: linear-gradient(var(--a), red var(--per), transparent calc(var(--per) + 2%), transparent); }
#ma {left: 22%; top: 30%; background: url('https://642303.freep.cn/642303/za/fl1033.png') no-repeat center/cover;}
#btnFs { right: 20px; bottom: 20px; }
.qk-vid { mix-blend-mode:screen; opacity: .75;-webkit-mask: linear-gradient(to bottom,transparent,transparent,red);}
</style>
<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1836109098" autoplay loop></audio>
<video class="qk-vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/05/16/14/20/video63661b5c8b098.mp4" autoplay loop muted></video>
<div id="ma" class="hue-rotate"></div>
</div>
<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
FS(pa, ma);
var per = -2, step = 0.5, aniCounter = 0, raf;
var pics = [
'https://642303.freep.cn/642303/tu/01w.jpg',
'https://642303.freep.cn/642303/tu/02w.jpg',
'https://642303.freep.cn/642303/tu/03w.jpg',
'https://642303.freep.cn/642303/tu/04w.jpg',
];
ma.onanimationiteration = () => {
var angle = aniCounter % 4, picIdx = aniCounter % pics.length;
pa.style.setProperty('--a', `${180 + (angle * 90)}deg`);
pa.style.setProperty('--bg1', `url(${pics[picIdx]}) no-repeat center/cover`);
picIdx = (picIdx + 1) % pics.length;
aniCounter ++;
changePic();
};
function changePic() {
if (per > 100) {
cancelAnimationFrame(raf);
per = -2;
var picIdx = aniCounter % pics.length;
picIdx = picIdx > 0 ? picIdx - 1: pics.length - 1;
pa.style.setProperty('--bg', `url(${pics[picIdx]}) no-repeat center/cover`);
} else {
per += step;
pa.style.setProperty('--per', per + '%');
raf = requestAnimationFrame(changePic);
}
}
</script>
修改粉色的部分：
.JS和.css的不要动
.JPG的是图片可以更改
.mp3是音乐，可以更改
.mp4是视频，可以更改
.png是小播图片，可以更改 | 
发表于 2025-8-13 10:18
川公网安备51180202512072 )
这代码我喜欢，先收藏好以后备用，多谢静宝的分享
发表于 2025-8-13 10:37