马黑黑 发表于 2025-8-16 09:01

星空夜舞

本帖最后由 马黑黑 于 2025-8-16 09:59 编辑 <br /><br /><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}) no-repeat center/cover`);
                pa.style.setProperty('--bg1', `url(${pics}) 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>

马黑黑 发表于 2025-8-16 09:01

本帖最后由 马黑黑 于 2025-8-16 09:59 编辑 <br /><br /><div class="codebox">
&lt;style&gt;
        @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; }
&lt;/style&gt;

&lt;div id="pa"&gt;
        &lt;audio id="aud" src="https://music.163.com/song/media/outer/url?id=2684530616" autoplay loop&gt;&lt;/audio&gt;
        &lt;video class="qk-vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/05/14/10/14/video6365fe4600974.mp4" autoplay loop muted&gt;&lt;/video&gt;
        &lt;video class="qk-vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/04/20/59/07/video63650c9bd14ce.mp4" autoplay loop muted&gt;&lt;/video&gt;
        &lt;div id="ma" class="brightness"&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;script type="module"&gt;
    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 = () =&gt; update();

        function update() {
                if (document.visibilityState === 'hidden') return;
                let idx = (per &lt;= 0 ? picIdx : picIdx + 1) % pics.length,
                        idx1 = (per &lt;= 0 ? picIdx + 1 : picIdx) % pics.length;
                pa.style.setProperty('--bg', `url(${pics}) no-repeat center/cover`);
                pa.style.setProperty('--bg1', `url(${pics}) no-repeat center/cover`);
                picIdx ++;
                animate();
        }

        function animate() {
                per += step;
                if (per &lt; -0.5 || per &gt; 100) {
                        cancelAnimationFrame(raf);
                        step = -step;
                } else {
                        pa.style.setProperty('--per', per + '%');
                        raf = requestAnimationFrame(animate);
                }
        }
&lt;/script&gt;
</div>

<script type="module">
import linenumber from 'https://638183.freep.cn/638183/web/js/linenumber.js';
linenumber();
</script>

马黑黑 发表于 2025-8-16 09:05

本帖最后由 马黑黑 于 2025-8-16 10:01 编辑

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

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

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

梦江南 发表于 2025-8-16 09:08

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

花飞飞 发表于 2025-8-16 10:33

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

红影 发表于 2025-8-16 10:37

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

红影 发表于 2025-8-16 10:41

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

马黑黑 发表于 2025-8-16 10:41

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

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

马黑黑 发表于 2025-8-16 10:42

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

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

马黑黑 发表于 2025-8-16 10:42

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

{:4_190:}

马黑黑 发表于 2025-8-16 10:43

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

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

花飞飞 发表于 2025-8-16 10:47

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

马黑黑 发表于 2025-8-16 12:12

花飞飞 发表于 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:34

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

    ma ...

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

马黑黑 发表于 2025-8-16 12:35

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

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

花飞飞 发表于 2025-8-16 12:36

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

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

花飞飞 发表于 2025-8-16 12:52

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

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

马黑黑 发表于 2025-8-16 13:29

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

你是专家你说了算

马黑黑 发表于 2025-8-16 13:30

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

可以的

杨帆 发表于 2025-8-16 17:28

漂亮！谢谢马老师经典示范与讲授{:4_191:}
页: [1] 2 3 4 5 6 7
查看完整版本: 星空夜舞