星空夜舞

马黑黑

马黑黑

<style> @import 'https://638183.freep.cn/638183/web/css/tz01.css'; #pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w5/iyuu01.webp') no-repeat center/cover; --bg1: url('https://638183.freep.cn/638183/t24/w5/iyuu02.webp') no-repeat center/cover; --ma-size: 15%; --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: 30px; top: 30px; background: conic-gradient(yellow 25%, darkred 0 50%) center/8% 8%; mask: url('https://638183.freep.cn/638183/small/780.webp') no-repeat center/cover; -webkit-mask: url('https://638183.freep.cn/638183/small/780.webp') no-repeat center/cover; } #btnFs { left: 20px; bottom: 20px; } </style> <div id="pa"> <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2684530616" autoplay loop></audio> <video class="qk-vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/05/14/10/14/video6365fe4600974.mp4" autoplay loop muted></video> <video class="qk-vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/04/20/59/07/video63650c9bd14ce.mp4" autoplay loop muted></video> <div id="ma" class="brightness"></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://638183.freep.cn/638183/t24/w5/iyuu01.webp', 'https://638183.freep.cn/638183/t24/w5/iyuu02.webp', 'https://638183.freep.cn/638183/t24/w5/iyuu03.webp', 'https://638183.freep.cn/638183/t24/w5/iyuu04.webp', 'https://638183.freep.cn/638183/t24/w5/iyuu05.webp', 'https://638183.freep.cn/638183/t24/w5/iyuu06.webp', 'https://638183.freep.cn/638183/t24/w5/iyuu07.webp', 'https://638183.freep.cn/638183/t24/w5/iyuu08.webp', 'https://638183.freep.cn/638183/t24/w5/iyuu09.webp', 'https://638183.freep.cn/638183/t24/w5/iyuu10.webp' ]; 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>

马黑黑

图片转场原理和实现方法：

        https://www.huachaowang.com/foru ... 5476&extra=page%3D1

帖子 update 函数设置主元素和伪元素背景的依据与上述文章的做法有所不同：这里主要依据JS变量 per 的值做判断，更简单一些。

梦江南

这帖比上帖要漂亮了，转场也漂亮了。谢谢黑黑老师辛苦！

花飞飞

一大早就看到这么炫酷的作品，太美了。。。
用了双层视频来渲染背景，更显得动态十足，唯美。。

红影

正在仔细看小播里的点点是怎么来的，好神奇啊，用锥形渐变改变背景尺寸，就能弄出小点点来。
去试了试那两个8%，把它变小点，那些点点也变小了。
还能用锥形渐变做小点点，渐变里的东西真是学也学不完啊

红影

这个是直接用默认的椭圆做的遮罩呢，这些图片轮播好漂亮。
双视频的运用也好漂亮，旋转环很惊艳，而待烟花和城市背景的视频让这些舞者的背景不至于太过单调

马黑黑

红影 发表于 2025-8-16 10:37
正在仔细看小播里的点点是怎么来的，好神奇啊，用锥形渐变改变背景尺寸，就能弄出小点点来。
去试了试那两 ...

做棋盘都可以，你应该还有印象

马黑黑

花飞飞 发表于 2025-8-16 10:33
一大早就看到这么炫酷的作品，太美了。。。
用了双层视频来渲染背景，更显得动态十足，唯美。。

这主要是因为图片背景基本为纯色，需要修饰一下，最简洁的就是视频叠加

马黑黑

梦江南 发表于 2025-8-16 09:08
这帖比上帖要漂亮了，转场也漂亮了。谢谢黑黑老师辛苦！

马黑黑

红影 发表于 2025-8-16 10:41
这个是直接用默认的椭圆做的遮罩呢，这些图片轮播好漂亮。
双视频的运用也好漂亮，旋转环很惊艳，而待烟花 ...

对，视频解决的问题之一就是背景图片过于单纯

花飞飞

十张舞姿优美的背景进行切换，这次看到椭圆遮罩效果了，
实例中运作流畅，跟教程有点点不一样的是开始(--per) + 0.5%) 0);加了个0.5，这个有啥作用啊

马黑黑

花飞飞 发表于 2025-8-16 10:47
十张舞姿优美的背景进行切换，这次看到椭圆遮罩效果了，
实例中运作流畅，跟教程有点点不一样的 ...

这里，由于背景图片较大，遮罩边界过度容易出现锯齿，为消除锯齿，色标过度边界用了一个算式：

    mask: radial-gradient(red var(--per), transparent calc(var(--per) + 0.5%) 0);

就是，过渡带多加 0.5% 的区间。

这个区间在往里收时需要消除，否则会残留一个小圆点或小椭圆点。所以，JS动画操纵的配套算式里头最小值以 -0.5 为依据，令往里收的最小值为 -0.5，这样就不会出现小（椭）圆点

花飞飞

马黑黑 发表于 2025-8-16 12:12
这里，由于背景图片较大，遮罩边界过度容易出现锯齿，为消除锯齿，色标过度边界用了一个算式：

    ma ...

原来流畅和美观都是通过精心计算得来的。。处处都是细节。。
这个消除锯齿太厉害了

马黑黑

花飞飞 发表于 2025-8-16 12:34
原来流畅和美观都是通过精心计算得来的。。处处都是细节。。
这个消除锯齿太厉害了

这是简单的处理锯齿方法，还有非常复杂的

花飞飞

马黑黑 发表于 2025-8-16 10:42
这主要是因为图片背景基本为纯色，需要修饰一下，最简洁的就是视频叠加

效果完美，直接用两个视频，属性全部都一样。
以后做贴也可以参照给整体加个渐变色。。

花飞飞

马黑黑 发表于 2025-8-16 12:35
这是简单的处理锯齿方法，还有非常复杂的

还是这种又简单又好用。
感觉有点像PS里选择并遮住，设置向内0.5，再羽化平滑

马黑黑

花飞飞 发表于 2025-8-16 12:52
还是这种又简单又好用。
感觉有点像PS里选择并遮住，设置向内0.5，再羽化平滑

你是专家你说了算

马黑黑

花飞飞 发表于 2025-8-16 12:36
效果完美，直接用两个视频，属性全部都一样。
以后做贴也可以参照给整体加个渐变色。。

可以的

杨帆

漂亮！谢谢马老师经典示范与讲授