css+div实现炫酷发光按钮悬浮跟随效果代码-html代码-BFW代码库

css+div实现炫酷发光按钮悬浮跟随效果代码

代码语言：html

所属分类：悬停

代码描述：css+div实现炫酷发光按钮悬浮跟随效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*,
*:after,
*:before {
    box-sizing: border-box;
}

:root {
    --x: 0;
    --y: 0;
    --xp: 0;
    --yp: 0;
    --hue: calc(0 + (var(--xp) * 500));
    --bg: hsl(0 0% 10%);
    --size: 100px;
    --glow: radial-gradient(50% 50% at center,
            hsl(var(--hue) 80% 85%),
            hsl(var(--hue) 80% 70%),
            transparent) calc((var(--x) * 1px) - (var(--size) * 0.5)) calc((var(--y) * 1px) - (var(--size) * 0.5)) / var(--size) var(--size) no-repeat fixed;
}

.controls {
    position: fixed;
    top: 2rem;
    right: 2rem;
}

.container {
    display: flex;
    place-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
    min-height: 50vh;
    font-family: "SF Pro Text", "SF Pro Icons", "AOS Icons", "Helvetica Neue", Helvetica, Arial, sans-serif, system-ui;
    background: var(--bg);
}

button {
    border-radius: 1rem;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 0.1ch;
    background: var(--bg);
    border: 4px solid transparent;
    box-shadow: 0 1px hsl(0 0% 100% / 0.15) inset;
    cursor: pointer;
    background:
        linear-gradient(var(--bg), var(--bg)) padding-box,
        var(--glow),
        linear-gradient(black, black) border-box;
    transition: background-size 0.24s;
    touch-action: none;
    position: relative;
    padding: 1r.........完整代码请登录后点击上方下载按钮下载查看