使用CSS变量实现的月食动效

CSS variables rainbow moon

css3, var, moon

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

'use strict';

var vars = {
    xoff: -300,
    yoff: -300,
    hue: 150
};

var pointerX = -300,
    pointerY = -300,
    mult = .1,
    lerp = .2; // 1 = no easing

// little helpers
var centerX = function centerX(x) {
    return x - innerWidth / 2;
};
var centerY = function centerY(y) {
    return y - innerHeight / 2;
};
var toPolar = function toPolar(x, y) {
    var radius = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
    var angle = Math.atan2(y, x);
    return {
        radius: radius,
        angle: angle
    };
};
var toDegrees = function toDegrees(radians) {
    return radians / Math.PI * 180;
};

function updatePointer(e) {
    e = e.type === 'touchmove' ? e.touches[0] : e;
    pointerX = centerX(e.clientX);
    pointerY = centerY(e.clientY);
    // enable this to make it crazy when pointing far from center
    // lerp = toPolar(pointerX, pointerY).radius / 300
}

var docStyle = document.documentElement.style;

function updateVars() {
    vars.xoff += (pointerX - vars.xoff) * lerp;
    vars.yoff += (pointerY - vars.yoff) * lerp;
    vars.hue = toDegrees(toPolar(pointerX, pointerY).angle);
    docStyle.setProperty('--xoff', -vars.xoff * mult + 'px');
    docStyle.setProperty('--yoff', -vars.yoff * mult + 'px');
    docStyle.setProperty('--hue', vars.hue);
}

function loop() {
    updateVars();
    requestAnimationFrame(loop);
}
loop();

addEventListener('mousemove', updatePointer);
addEventListener('touchmove', updatePointer);

编译

CSS

HTML

CSS variables rainbow moon

css3, var, moon

编辑器支持Emmet

快捷键

CSS variables rainbow moon

css3, var, moon

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

使用CSS3 perspective变换实现的电影卡片悬停3D偏转动效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：