Back To Yesterday

马黑黑 发表于 2025-8-10 12:08

马黑黑 发表于 2025-8-10 12:11

<div class="codebox" data-title="帖子代码">
<style>
@import 'https://638183.freep.cn/638183/web/css/tz01.css';
#pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w5/g5.webp') no-repeat center/cover; --bg1: lightblue; --state: runnig; transition: 0.5s; --ma-size: 15%; --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: 30px; top: 30px; background: url('https://638183.freep.cn/638183/small/2025/moon.webp') no-repeat center/cover; animation-duration: 12s; }
#btnFs { right: 20px; bottom: 20px; }
</style>

<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=29386019" autoplay loop></audio>
<video class="qk-vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/05/06/16/11/video63658f2b9a7f2.mp4" autoplay loop muted></video>
<div id="ma" class="sepia"></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://638183.freep.cn/638183/t24/w5/g1.webp',
'https://638183.freep.cn/638183/t24/w5/g2.webp',
'https://638183.freep.cn/638183/t24/w5/g3.webp',
'https://638183.freep.cn/638183/t24/w5/g4.webp',
'https://638183.freep.cn/638183/t24/w5/g5.webp'
];

ma.onanimationiteration = () => {
var angle = aniCounter % 4, picIdx = aniCounter % pics.length;
pa.style.setProperty('--a', `${45 + (angle * 90)}deg`);
pa.style.setProperty('--bg1', `url(${pics}) no-repeat center/cover`);
picIdx = (picIdx + 1) % pics.length;
aniCounter ++;
changePic();
};
ma.onmouseenter = () => pa.classList.add('grayscale');
ma.onmouseout = () => pa.classList.remove('grayscale');

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}) no-repeat center/cover`);
} else {
per += step;
pa.style.setProperty('--per', per + '%');
raf = requestAnimationFrame(changePic);
}
}
</script>
</div>

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

马黑黑 发表于 2025-8-10 12:13

图片转场实现思路与解释：

【新提醒】使用mask属性实现图片转场 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz!

红影发表于 2025-8-10 13:24

充分利用遮罩的特点，这些图片转场效果真美{:4_199:}

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

小播图片比较有个性，触碰去色，也是封起来的一种效果吧。
音乐好听，粒子视频为背景图片增添了梦幻效果，漂亮。。

花飞飞 发表于 2025-8-10 17:19

遮罩形状是不是还可以变成别的样子，毕竟之前剪切变化的时候有圆的方的各种形状{:4_173:}

马黑黑 发表于 2025-8-10 17:57

花飞飞发表于 2025-8-10 17:19
遮罩形状是不是还可以变成别的样子，毕竟之前剪切变化的时候有圆的方的各种形状

遮罩演示帖子里说过了，这里是一线性渐变做遮罩，可以设计和使用其它任何遮罩方式，

梦江南 发表于 2025-8-10 18:05

总算看到美女转场的精彩了！漂亮！小播很有个性。{:4_187:}

马黑黑 发表于 2025-8-10 18:06

梦江南发表于 2025-8-10 18:05
总算看到美女转场的精彩了！漂亮！小播很有个性。

小播只是一张图片，你也可以设计，或让AI帮你设计

梦江南 发表于 2025-8-10 18:10

马黑黑发表于 2025-8-10 18:06
小播只是一张图片，你也可以设计，或让AI帮你设计

嗯，谢谢！

花飞飞 发表于 2025-8-10 18:23

马黑黑发表于 2025-8-10 17:57
遮罩演示帖子里说过了，这里是一线性渐变做遮罩，可以设计和使用其它任何遮罩方式，

嗯哪。。。用在这里的这个遮罩很多数据是动态的。。

杨帆发表于 2025-8-10 20:25

漂亮的图片转场效果，谢谢马老师精彩示范{:4_190:}

朵拉发表于 2025-8-10 20:58

制作漂亮，欣赏学习{:4_178:}

马黑黑 发表于 2025-8-10 22:14

花飞飞发表于 2025-8-10 18:23
嗯哪。。。用在这里的这个遮罩很多数据是动态的。。

那边也是动态的：原理完全一样

花飞飞 发表于 2025-8-11 19:22

马黑黑发表于 2025-8-10 22:14
那边也是动态的：原理完全一样

原理一样，用的工具分明不一样

马黑黑 发表于 2025-8-11 19:25

花飞飞发表于 2025-8-11 19:22
原理一样，用的工具分明不一样

差不多的

花飞飞 发表于 2025-8-11 19:53

马黑黑发表于 2025-8-11 19:25
差不多的

{:4_181:}

马黑黑 发表于 2025-8-11 20:42

花飞飞发表于 2025-8-11 19:53

谢嗯

花飞飞 发表于 2025-8-12 08:08

马黑黑发表于 2025-8-11 20:42
谢嗯

嗯哪，看到谢小哥了{:4_173:}

小辣椒 发表于 2025-8-12 22:32

很奇怪，我里面的图片看不见，取出连接可以看见的

页: [1] 2

花潮论坛's Archiver

Back To Yesterday