使用CSS变量实现的17种混合模式聚光灯特效

mix-blend-mode示例：spotlight

css3, blend-mode, spotlight

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 3413
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var spotlight = document.querySelector('.spotlight');
var isUserMotion = false;

function move(e) {
    if (e.clientX || e.touches) {
        isUserMotion = true;
        spotlight.style.setProperty('--x', (e.clientX || e.touches[0].clientX) + 'px');
        spotlight.style.setProperty('--y', (e.clientY || e.touches[0].clientY) + 'px');
    }
}

if (window.PointerEvent) {
    spotlight.addEventListener('pointermove', move);
} else {
    spotlight.addEventListener('touchmove', move);
    spotlight.addEventListener('mousemove', move);
}

//Play when first loaded, then let user control
(() => {
    var startTime = Date.now();
    autorun();

function autorun() {
        var now = Date.now();
        if (!isUserMotion && now <= startTime + 3000) {
            console.log(now - startTime);
            spotlight.style.setProperty('--x', ((now - startTime) / 6000 * 100) + '%');
            requestAnimationFrame(autorun);
        }
    }
})();

document.getElementById('blend').addEventListener('input', e => {
    spotlight.style.setProperty('--blend', e.currentTarget.value);
});

编译

CSS

HTML

mix-blend-mode示例：spotlight

css3, blend-mode, spotlight

编辑器支持Emmet

快捷键

mix-blend-mode示例：spotlight

css3, blend-mode, spotlight

使用CSS3线性渐变和合成模式（blend-mode）实现的5种图像特效

使用CSS3旋转变换和混合模式实现的动画图标

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：