css变量实现霓虹灯按钮效果生成器代码
代码语言:html
所属分类:布局界面
代码描述:css变量实现霓虹灯按钮效果生成器代码,通过拖拽按钮,来生成霓虹灯按钮的css代码及动画效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> :root { --raven: #2c343b; --lilia: #f1f3f4; --base-font-size: 18px; --base-font-weight: 300; /* Theme */ --hue: 180; --saturation: 50%; --light: 50%; --theme-hsl: var(--hue), var(--saturation), var(--light); /* uncomment if you want a gradient --gradient-light: 50%; */ } html { background: var(--raven); color: var(--lilia); padding: 1em; font-family: arial; } .neons { padding: 1em; min-height: 180px; } /* Panel */ .panel { display: flex; justify-content: space-between; } /* Controls */ .controls, .result { background: var(--lilia); color: var(--raven); padding: 1em; width: -webkit-max-content; width: -moz-max-content; width: max-content; border-radius: 4px; } .controls label { display: block; } /* Result ( code ) */ .result { padding: 1em; color: white; text-shadow: 0 2px 10px hsl(var(--theme-hsl)); overflow: hidden; margin-left: 16px } .result pre { padding: 0 1em; margin: 0; background: var(--raven); overflow: auto; } .result code { padding: 1em; margin: 0; } input { /* Canary: * Enable the "Experimental Web Platform Features" flag in about:flags */ accent-color: hsl(var(--theme-hsl)) } .neons { display: flex; align-items: center; justify-content: center; } .neons button { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; -webkit-font-smoothing: antialiased; border-radius: 4px; display: flex; padding: 8px 16px; justify-content: center; cursor: pointer; font-weight: 700; font-size: var(--base-font-size); letter-spacing: 1.5px; text-align: center; text-transform: uppercase; font-family: Helvetica; /* Color */ color: hsl(var(--hue), var(--saturation), 40%); text-shadow: 0 -1px 0 rgb(0 0 0 / 30%), 0 1px 0 rgb(255 255 255 / 15%); /* Background */ background: linear-gradient( hsl(var(--theme-hsl)), hsl(var(--hue), var(--saturation), var(--gradient-light, var(--light)))); box-shadow: /* Color */ 0 5px 10px hsla(var(--theme-hsl), 0.30), 0 10px 40px hsla(var(--theme-hsl), 0.25), 0 15px 80px hsla(var(--theme-hsl), 0.25), /* Shadow */ 0 2px 1px rgba(0, 0, 0, 0.05), 0 4px 2px rgba(0, 0, 0, 0.05), 0 8px 4px rgba(0, 0, 0, 0.05), 0 16px 8px rgba(0, 0, 0, 0.05), 0 32px 16px rgba(0, 0, 0, 0.05), /* Borders */ inset 0 -1px 0 rgb(0 0 0 / 60%), inset 0 1px 0 rgb(255 255 255 / 30%); transition: box-shadow 0.2s ease, background 0.2s ease; will-change: box-shadow, background; } </style> </head> <body> <div class="neons"> <button contenteditable>Neon Love</button> </div> <div class="panel"> <div class="controls"> <header> <h3>Controls</h3> </header> <div> <label for="hue">Hue</label> <input type="range" min="0" max="360" value="180" step="1" id="hue" oninput="this.nextElementSibling.value = this.value"> <output>0</output> </div> <div> <label for="saturation">Saturation</label> <input type="range" min="0" max="100" value="50" step="1" id="saturation" oninput="this.nextElementSibling.value = this.value + '%'"> <output>0%</output> </div> <div> <label for="light">Light</label> <input type="range" min="0" max="100" value="50" step="1" id="light" oninput="this.nextElementSibling.value = this.value + '%'"> <output>0%</output> </div> <div style="display:none" id="grad-section"> <label for="gradient-light">Gradient Light</label> <input type="range" min="0" max="100" value="50" step="1" id="gradient-light&qu.........完整代码请登录后点击上方下载按钮下载查看
网友评论0