css实现发光按钮悬浮走光动画效果代码
代码语言:html
所属分类:悬停
代码描述:css实现发光按钮悬浮走光动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <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; } body { display: flex; place-items: center; gap: 1rem; flex-wrap: wrap; justify-content: center; min-height: 100vh; 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: 1rem 2rem; } button::before { content: ""; position: absolute; inset: 0; box-shadow: 0 1px hsl(0 .........完整代码请登录后点击上方下载按钮下载查看
网友评论0