如何实现一个带3D光照交互效果的按钮

button with 3d light

css, button, light

《three.js使用多个渐变torus模拟光环光晕》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var btn = document.querySelector(".btn");

function addSpans(btn) {
    var span1 = document.createElement("span");
    span1.className = "span1";

var span2 = document.createElement("span");
    span2.className = "span2";

btn.appendChild(span1);
    btn.appendChild(span2);
}

function mouseEnter(span) {
    span.style.opacity = "1";
}

function mouseLeave(span) {
    span.style.opacity = "0";
}

function mouseDown(span) {
    span.style.transition = "box-shadow .6s";
    span.style.boxShadow = "0 0 10rem 4rem hsl(0, 0%, 94%), inset 0 0 1rem hsl(0, 0%, 94%)";
    span.style.width = "2rem";
    span.style.height = "2rem";
}

function mouseUp(span) {
    span.style.transition = "box-shadow 0s";
    span.style.boxShadow = "0 0 0 0 hsl(0, 0%, 94%), inset 0 0 1rem hsl(0, 0%, 94%)";
    span.style.width = "0";
    span.style.height = "0";
}

function mouseMove(span, e) {
    span.style.top = e.offsetY + "px";
    span.style.left = e.offsetX + "px";
}

function keyDown(span) {
    mouseDown(span);
    span.style.top = "100%";
    span.style.left = "50%";
}

window.addEventListener("load", addSpans(btn));
var span1 = btn.querySelector(".span1");
var span2 = btn.querySelector(".span2");

// mouse events
// ============
// edge issue
// not applying filter: blur() properly
if (window.navigator.userAgent.indexOf("Edge") > -1) {
    span1.style.display = "none";
} else {
    btn.addEventListener("mouseenter", function() {
        mouseEnter(span1)
    });
    btn.addEventListener("mouseleave", function() {
        mouseLeave(span1)
    });
    btn.addEventListener("mousemove", function(e) {
        mouseMove(span1, e)
    });
}

btn.addEventListener("mouseleave", function() {
    mouseUp(span2)
});
btn.addEventListener("mousemove", function(e) {
    mouseMove(span2, e)
});
btn.addEventListener("mousedown", function() {
    mouseDown(span2)
});
btn.addEventListener("mouseup", function() {
    mouseUp(span2)
});

// keyboard events
// ===============
btn.addEventListener("keydown", function(e) {
    if (e.key === " " && (e.code === "Space" || e.keyCode === 32) || e.key === "Spacebar" && e.keyCode === 32) {
        keyDown(span2)
    }
})
btn.addEventListener("keyup", function(e) {
    if (e.key === " " && (e.code === "Space" || e.keyCode === 32) || e.key === "Spacebar" && e.keyCode === 32) {
        mouseUp(span2)
    }
})

// touch events
// ============
btn.addEventListener("touchstart", function() {
    keyDown(span2)
});
btn.addEventListener("touchend", function() {
    mouseUp(span2)
});

编译

CSS

/*
  Please Do Try:
  #mouse-users: click&hold and move mouse
  #keyboard-users: press and hold "SpaceBar" while focus
*/

*,
*::after,
*::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    font-size: 62.5%;
}
body {
    width: 100vw;
    height: 100vh;
    background: #262626;
    font-family: 'Segoe UI', Tahoma, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
}
.btn {
    display: inline-block;
    position: relative;
    color: #f0f0f0;
    background: transparent;
    font-family: inherit;
    padding: 2rem 7rem;
    border: 0 solid transparent;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: .4rem;
    outline: .2rem solid transparent;
    outline-offset: .6rem;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
@media screen and (-ms-high-contrast: active) {
    .btn {
        color: buttonText;
        border: 0;
        outline-color: currentColor;
        outline-offset: .2rem;
    }
    .btn:hover,
    .btn:focus {
        background: highlight;
    }
    .btn::before,
    .btn > .span1,
    .btn > .span2 {
        display: none;
    }
}
.btn::before {
    content: " ";
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(240, 240, 240, 0.6) 0px, transparent 2px, transparent 2px), linear-gradient(to left, rgba(240, 240, 240, 0.6) 0px, transparent 2px, transparent 2px), linear-gradient(to bottom, rgba(240, 240, 240, 0.6) 0px, transparent 2px, transparent 2px), linear-gradient(to top, rgba(240, 240, 240, 0.6) 0px, transparent 2px, transparent 2px);
    opacity: .1;
}
.btn > * {
    display: inline-block;
    position: absolute;
    z-index: -1;
}
.btn > .span1 {
    width: 110%;
    height: 110%;
    border-radius: 100%;
    background: radial-gradient(circle at center, rgba(240, 240, 240, 0.6), transparent);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-filter: blur(4rem);
    filter: blur(4rem);
    opacity: 0;
}
@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
    .btn > .span1 {
        display: none;
    }
}
.btn > .span2 {
    width: 0;
    height: 0;
    border-radius: 100%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 0 #f0f0f0, inset 0 0 1rem #f0f0f0;
    opacity: .4;
}
.btn::-moz-focus-inner {
    border: 0;
    padding: 0;
}
.btn:active {
    -webkit-transform: scale(0.98);
    transform: scale(0.98);
}
.btn:focus {
    border-width: .2rem;
    outline-color: rgba(240, 240, 240, 0.2);
}
.btn:focus > .span1 {
    top: 90% !important;
    left: 50% !important;
    opacity: 1 !important;
}
/*
.btn {

& {
    border: .4rem solid hsla(0, 0%, 94%, .1);
  }

}
*/
/*
.btn {

&::after {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, hsl(220, 50%, 34%), hsl(320, 50%, 34%));
    z-index: -2;
  }

}
*/
/*
.btn {

&::after {
    content: "here";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
  }

&::before {
    background: hsl(0, 0%, 15%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    opacity: 1;
  }

}
*/

HTML

button with 3d light

css, button, light

编辑器支持Emmet

快捷键

button with 3d light

css, button, light

如何实现一个简单的分层平行视差交互动效

使用Mo.js实现的社交按钮点击星光四射交互动效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：