radial+mask实现图片转场效果
<style>
#ma {
position: relative;
margin: 30px auto;
width: 400px;
height: 530px;
background: var(--bg);
color: red;
--bg: url('https://638183.freep.cn/638183/t22/hl/bw1.jpg') no-repeat center/cover;
--bg1: url('https://638183.freep.cn/638183/t22/hl/bw2.jpg') no-repeat center/cover;
--per: 0%;
}
#ma::before {
position: absolute;
content: '';
inset: 0;
background: var(--bg1);
/* 遮罩设定 */
mask: radial-gradient(circle, red var(--per), transparent var(--per) 0);
--webkit-mask: radial-gradient(circle, red var(--per), transparent var(--per) 0);
}
</style>
<div id="ma" title="点击转场"></div>
<script>
let per = 0, // 遮罩渐变色标边界
step = 1, // 色标边界变化歩幅
picIdx = 0, // 图片序号
isPlaying = false, // 遮罩动画是否运行中
raf; // 请求关键帧动画计数器
const pics = [
'https://638183.freep.cn/638183/t22/hl/bw1.jpg',
'https://638183.freep.cn/638183/t22/hl/bw2.jpg',
'https://638183.freep.cn/638183/t22/hl/bw3.jpg',
'https://638183.freep.cn/638183/t22/hl/bw4.jpg',
'https://638183.freep.cn/638183/t22/hl/bw5.jpg',
'https://638183.freep.cn/638183/t22/hl/bw6.jpg'
];
const update = () => {
if (isPlaying) return;
let idx = (picIdx % 2 === 0 ? picIdx : picIdx + 1) % pics.length,
idx1 = (picIdx % 2 === 0 ? picIdx + 1 : picIdx) % pics.length;
ma.style.setProperty('--bg', `url(${pics[idx]}) no-repeat center/cover`);
ma.style.setProperty('--bg1', `url(${pics[idx1]}) no-repeat center/cover`);
picIdx ++;
animate();
};
const animate = () => {
per += step;
if (per < 0 || per > 100) {
cancelAnimationFrame(raf);
step = -step;
isPlaying = false;
} else {
ma.style.setProperty('--per', per + '%');
raf = requestAnimationFrame(animate);
isPlaying = true;
}
};
ma.onclick = () => update();
</script>
前一篇: 就地取材：mask遮罩趣味玩法
下一篇: svg文本在路径上均匀分布
发表评论:
评论列表 [1条]
#1 | 飞飞 于 2025-8-15 22:37 发布: 这个是圆形的，好看，径向渐变完成的吧。。刚做好一个贴子，现在去发出来。。
