无感 - 动画音画 - 花潮论坛 - Powered by Discuz! Archiver

马黑黑 发表于 2025-8-14 13:42

无感

马黑黑 发表于 2025-8-14 13:42

<div class="codebox">
<style>
@import 'https://638183.freep.cn/638183/web/css/tz01.css';
#pa { --offsetX: 81px; --bg: none; --bg1: url('https://638183.freep.cn/638183/t24/w5/yj1.webp') no-repeat center/cover; --ma-size: 15%; --per: -2%; --a: 45deg; }
#pa::before { position: absolute; content: ''; inset: 0; background: var(--bg1); mask: conic-gradient(from var(--start), transparent var(--deg), red var(--deg) 0); }
#ma { left: 30px; top: 30px; background: repeating-conic-gradient(cyan,darkcyan, cyan 0.5deg); mask: url('https://638183.freep.cn/638183/small/2025/moon.webp') no-repeat center/cover; -webkit-mask: url('https://638183.freep.cn/638183/small/2025/moon.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=1357839856" autoplay loop></audio>
<video class="qk-vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/05/17/17/59/video63662a47cce4f.mp4" autoplay loop muted></video>
<div id="ma"></div>
</div>

<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
FS(pa, ma);

var deg = 360, step = 5, picIdx = 0, raf;
var pics = [
'https://638183.freep.cn/638183/t24/w5/yj1.webp',
'https://638183.freep.cn/638183/t24/w5/yj2.webp',
'https://638183.freep.cn/638183/t24/w5/yj3.webp',
'https://638183.freep.cn/638183/t24/w5/yj4.webp',
'https://638183.freep.cn/638183/t24/w5/yj5.webp',
'https://638183.freep.cn/638183/t24/w5/yj6.webp'
];

ma.onanimationiteration = () => update();
ma.onmouseenter = () => pa.classList.add('sepia');
ma.onmouseout = () => pa.classList.remove('sepia');

function update() {
if (document.visibilityState === 'hidden') return;
picIdx ++;
const idx = (picIdx - 1) % pics.length;
const idx1 = picIdx % pics.length;
pa.style.setProperty('--start', Math.random() * 360 + 'deg');
pa.style.setProperty('--bg', `url(${pics}) no-repeat center/cover`);
pa.style.setProperty('--bg1', `url(${pics}) no-repeat center/cover`);
animate();
}

function animate() {
if (deg < 0) {
cancelAnimationFrame(raf);
deg = 360;
} else {
deg -= step;
pa.style.setProperty('--deg', deg + 'deg');
raf = requestAnimationFrame(animate);
}
};
</script>
</div>

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

梦江南 发表于 2025-8-14 13:59

图片转换流畅，小播精致。黑黑老师辛苦了！{:4_190:}

梦江南 发表于 2025-8-14 14:00

黑黑老师，这六张图片还能加吗？

马黑黑 发表于 2025-8-14 14:05

小播构造：

   圆锥渐变背景+图片遮罩（代码在第 5 行）

JS图片切换与转场：

   图片切换：帖子容器+伪元素背景交替。开始，帖子容器无背景、伪元素用图片数组中的第一张图片做背景，小播 animation 动画迭代时伪元素更换背景图并将此前的背景图传递给帖子容器做背景，如此反复循环。

   图片转场：伪元素开始时100%呈现背景图，小播关键帧动画迭代后新更换的图片开始处于全遮罩状态，然后逐渐揭开遮罩。

JS函数解释：

   animate : 通过判断变量 deg 是否小于 0 决定做什么，小于若成立，则取消请求关键帧动画的计数器，并恢复 deg 到初始角度值；若不成立，则令 deg 变量不断减去歩幅变量 step，同时将 deg 变量值传递给帖子容器的CSS变量 --deg，并递归调用请求关键帧动画（直至 deg < 0）。

update : 如果帖子页面处于隐藏状态则不执行此函数。此函数计算通过图片序号的递增计算出CSS变量 --bg 和 --bg1 所需的数据，然后分别设置帖子容器背景和伪元素背景，并运行 animate 函数。

其它重要JS代码解释：

   29行：小播关键帧动画迭代事件，即一个运行周期结束，此时运行 update 函数；
   30行：鼠标指针移入小播事件，给帖子容器 pa 添加 class，名为 sepia；
   31行：鼠标指针移出小播事件，解除帖子容器 pa 名为 sepia 的 class。

马黑黑 发表于 2025-8-14 14:05

梦江南发表于 2025-8-14 14:00
黑黑老师，这六张图片还能加吗？

想加多少加多少

梦江南 发表于 2025-8-14 14:06

马黑黑发表于 2025-8-14 14:05
想加多少加多少

这太好了。

马黑黑 发表于 2025-8-14 14:09

梦江南发表于 2025-8-14 14:00
黑黑老师，这六张图片还能加吗？

加的时候注意格式要正确：每一张图片都放在小叫单引号 '' 内，每一行结束都需要有个小角逗号 ,（最后一行可以不要逗号）

花飞飞 发表于 2025-8-14 15:55

本帖最后由花飞飞于 2025-8-14 15:57 编辑

大背景里这个锥形渐变数据设计巧妙
mask: conic-gradient(from var(--start), transparent var(--deg), red var(--deg) 0); }
决定从随意角度开始，
transparent var(--deg),说明透明部分是动态变化的

花飞飞 发表于 2025-8-14 16:00

小播背景也用了锥形渐变渲染成青色，被裁成小播图片的形状，
触碰小播后，画面会变成轻褐色，鼠标移除解除效果{:4_173:}印象深刻。。

花飞飞 发表于 2025-8-14 16:04

var deg = 360, step = 5,
从360度开始，每次减少5，直到减完，小于0的时候恢复360

pa.style.setProperty('--start', Math.random() * 360 + 'deg');
从随机角度开始锥形渐变，难怪看每一个图片开始的地方都不相同。。

梦江南 发表于 2025-8-14 16:05

马黑黑发表于 2025-8-14 14:09
加的时候注意格式要正确：每一张图片都放在小叫单引号 '' 内，每一行结束都需要有个小角逗号 ,（最后一 ...

谢谢黑黑老师，我会注意的。

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

马黑黑发表于 2025-8-14 14:05
小播构造：

圆锥渐变背景+图片遮罩（代码在第 5 行）

关于切换背景图片需要再理解一下，伪元素更换新背景，把之前显示的那张图片的当容器背景，循环往复。。

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

画面清爽，瑜伽的美感令人欣喜。。。
关键题目叫无感。。{:4_173:}
看这么美的图片岂能无感。。

小文发表于 2025-8-14 18:51

精美！

杨帆发表于 2025-8-14 19:42

本帖最后由杨帆于 2025-8-14 20:05 编辑

又一种图片轮播转场效果 -锥形渐变遮罩效果，谢谢马老师经典示范与讲授{:4_191:}

红影发表于 2025-8-14 20:16

锥形任一角度切入的图片轮转，黑黑把上次的讲解内容变成了实例{:4_199:}

红影发表于 2025-8-14 20:18

鼠标触碰，背景变化很大。
“鼠标指针移入小播事件，给帖子容器 pa 添加 class，名为 sepia；”这个没看懂，到底是怎么运作的？{:4_203:}

马黑黑 发表于 2025-8-14 20:28

红影发表于 2025-8-14 20:18
鼠标触碰，背景变化很大。
“鼠标指针移入小播事件，给帖子容器 pa 添加 class，名为 sepia；”这个没看懂 ...

之前讨论过 class列表问题。 class="sepia" 的元素，拥有一个 class列表，列表里可以拥有0至N个class类名。sepia 是 tz01.css 给出的一个类选择器，.sepia {}，通过滤镜让元素变深褐色。当JS给元素添加此类名，则该元素具备鼠标指针移入时具备变为深褐色的功能，移除后就不再有此功能。

马黑黑 发表于 2025-8-14 20:28

红影发表于 2025-8-14 20:16
锥形任一角度切入的图片轮转，黑黑把上次的讲解内容变成了实例

这个应该是简单的吧

页: [1] 2 3 4

花潮论坛's Archiver

无感