conic+mask实现转场效果
实现思路：
使用元素和伪元素交换背景图像达成切换图像的设计：开始时头一个图像在元素背景上呈现，伪元素什么都不加载，从第一次切换开始，伪元素事先加载一个新图像，同时使用
为让上述思路变为现实，需要设计几个CSS变量：其一，
<style>
#ma {
position: relative;
margin: 30px auto;
width: 400px;
height: 400px;
background: var(--bg1); /* 背景变量由JS控制 */
border-radius: 50%;
}
#ma::after {
position: absolute;
content: '';
inset: 0;
background: var(--bg2); /* 背景变量由JS控制 */
border-radius: 50%;
/* 锥形渐变转场 ：开始角度、色标变量通过JS控制 */
mask: conic-gradient(from var(--start), transparent var(--deg) , var(--deg), red);
}
</style>
<div id="ma">点击转场</div>
<script>
// deg : 遮罩色标开始值，step : 色标值改变系数，
// currentBg : 当前背景，raf : requestAnimationFrame计数器
let deg = 360, step = 5, currentBg, raf;
// 设置随机背景色+随机遮罩角度
const setRadBg = (elm, val, bg = null) => {
// 如果调用者不提供 bg 参数则使用随机背景色
if (!bg) bg = `#${Math.random().toString(16).substring(2, 8)}`;
elm.style.setProperty(val, bg); // 设置 elm 元素的 val 背景色
elm.style.setProperty('--start', Math.random() * 360 + 'deg'); // 设置随机遮罩起始角度
return bg; // 返回 bg 值
};
/* 遮罩动画 */
const animate = () => {
if (deg < 0) { // 如果色标角度小于 0
cancelAnimationFrame(raf); // 取消 raf 计数器
deg = 360; // 色标值回到初始值
setRadBg(ma, '--bg1', currentBg); // 调用 setRadBg 函数 : 当前颜色值做主元素背景色
} else { // 否则
deg -= step; // 色标值递减
ma.style.setProperty('--deg', deg + 'deg'); // 更新元素的色标值
raf = requestAnimationFrame(animate); // 更新并存储 raf 计数器
}
};
currentBg = setRadBg(ma, '--bg1'); // 首次运行 setRadBg 函数 : 初始化界面并存储当前背景
// 元素点击事件
ma.onclick = () => {
currentBg = setRadBg(ma, '--bg2'); // 运行 setRadBg 函数并存储当前背景
animate(); // 运行转场动画
};
</script>
【附】conic-gradient 锥形渐变简洁：
锥形渐变默认以元素的圆心作为中心点，参与渐变的颜色围绕圆心从 0 度（指向正上方）开始、按顺时针做渐变，开始颜色和结束颜色在元素的上半部分的中央存在明显的硬线衔接痕迹。下面例子是元素背景图像由天蓝色和红色参与渐变，查看预览效果可以更好理解默认设置下的锥形渐变效果：
<style>
.ma {
margin: 30px;
width: 200px;
height: 200px;
background: conic-gradient(skyblue, red); /* 锥形渐变背景 */
}
</style>
<div class="ma"></div>
再提供几个其它例子，这些例子展示简单的个性化锥形渐变设置：
<style>
.ma {
margin: 30px 0 30px 20px;
width: 200px;
height: 200px;
display: inline-block;
}
.ma:nth-of-type(1) {
/* 渐变从90度开始 */
background: conic-gradient(from 90deg, red, green, blue);
}
.ma:nth-of-type(2) {
/* 渐变从90的开始，中心点不在圆心 */
background: conic-gradient(from 90deg at 20% 60% , red, green, blue);
}
.ma:nth-of-type(3) {
/* 色标边界硬线衔接 ：除百分比外还可以用 deg 做角度单位 */
background: conic-gradient(from 90deg, red 33.3%, green 33.3%, green 66.6%, blue 66.6%, blue);
}
.ma:nth-of-type(4) {
/* 饼状图 */
background: conic-gradient(red 120deg, orange 120deg, orange 240deg, yellow 240deg, yellow);
border-radius: 50%;
}
.ma:nth-of-type(5) {
/* 非标准的七彩虹色盘效果 */
background: conic-gradient(red,yellow,green,cyan,blue,magenta,red);
border-radius: 50%;
}
.ma:nth-of-type(6) {
/* 重复性锥形渐变 */
background: repeating-conic-gradient(hsla(0, 0%, 100%, 0.2) 0deg 15deg, hsla(0, 0%, 100%, 0) 0deg 30deg) tan;
border-radius: 50%;
}
</style>
<div class="ma"></div>
<div class="ma"></div>
<div class="ma"></div>
<div class="ma"></div>
<div class="ma"></div>
<div class="ma"></div>
前一篇: 使用mask属性实现图片转场
下一篇: I Can（lrc_only模块演示）
发表评论:
评论列表 [1条]
#1 | 小希 于 2025-8-11 20:04 发布: 转啊转，越转越好看
