css实现按钮悬浮底部发光效果代码
代码语言:html
所属分类:悬停
代码描述:css实现按钮悬浮底部发光效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @font-face { font-family: "Mona Sans"; src: url("//repo.bfw.wiki/bfwrepo/fonts/Mona-Sans.woff2") format("woff2 supports variations"), url("//repo.bfw.wiki/bfwrepo/fonts/Mona-Sans.woff2") format("woff2-variations"); font-weight: 100 1000; } @layer properties { @property --inner-glow-1 { syntax: "<number>"; inherits: true; initial-value: 0; } @property --inner-glow-2 { syntax: "<number>"; inherits: true; initial-value: 0; } @property --inner-glow-opacity { syntax: "<number>"; inherits: true; initial-value: 0; } @property --inner-glow-size { syntax: "<number>"; inherits: true; initial-value: 0; } @property --btn-shadow-offset { syntax: "<number>"; inherits: true; initial-value: 0; } @property --btn-scale { syntax: "<number>"; inherits: true; initial-value: 0; } @property --btn-ts-y { syntax: "<number>"; inherits: true; initial-value: 0; } @property --btn-after-opacity { syntax: "<number>"; inherits: true; initial-value: 0; } } * { box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } :root { --color-1: 13; /* later calc() in degrees */ --color-2: 19; /* later calc() in degrees */ --bg-color: hsl(0deg 0% 11%); --outer-btn-color: hsl(274deg 5% 9%); --inner-btn-bg-start: hsl(calc(var(--color-1)*1deg) 100% 51%); --inner-btn-bg-end: hsl(calc(var(--color-2)*1deg) 99% 58%); --inner-glow-1: 100; --inner-glow-2: 100; --inner-glow-opacity: 10; --inner-glow-size: 30; --btn-shadow-offset: 0; --btn-scale: 1; --btn-ts-y: 0; --btn-inner-white-shadow: 70; --btn-after-opacity: 0; --btn-border-radius: 14; --cubic-bezier: cubic-bezier(0.6, -1.2, 0.2, 2.2); } html, body { width: 100%; height: 100%; padding: 0; margin: 0; } body { font-family: "Mona Sans", sans-serif; display: grid; place-items: center; background: var(--bg-color); } .button-container { padding: 1.5em 2em; border-radius: 12px; background: radial-gradient(ellipse at center bottom, hsla(calc(var(--color-1)*1deg) 99% calc(var(--inner-glow-1) * 1%)/calc(var(--inner-glow-opacity) * 1%)), hsla(calc(var(--color-2)*1deg) 99% calc(var(--inner-glow-2) * 1%)/calc(var(--inner-glow-opacity) * 1%)) calc(var(--inner-glow-size)*1%), rgba(255, 255, 255, 0.1), rgb.........完整代码请登录后点击上方下载按钮下载查看
网友评论0