css实现三种发光下拉选择框美化效果代码
代码语言:html
所属分类:表单美化
代码描述:css实现三种发光下拉选择框美化效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @font-face { font-family: "Mona Sans"; src: url("https://assets.codepen.io/64/Mona-Sans.woff2") format("woff2 supports variations"), url("https://assets.codepen.io/64/Mona-Sans.woff2") format("woff2-variations"); font-weight: 100 1000; } @layer properties { @property --max-height { syntax: "<number>"; inherits: true; initial-value: 0; } @property --bg-x { syntax: "<number>"; inherits: true; initial-value: 50; } @property --bg-y { syntax: "<number>"; inherits: true; initial-value: -200; } @property --scale { syntax: "<number>"; inherits: true; initial-value: 1; } @property --accent-color-hue { syntax: "<number>"; inherits: true; initial-value: 0; } @property --accent-color-hue { syntax: "<number>"; inherits: true; initial-value: 0; } @property --item-y { syntax: "<number>"; inherits: true; initial-value: 0; } @property --item-opacity { syntax: "<number>"; inherits: true; initial-value: 0; } @property --accent-color { syntax: "<color>"; inherits: true; initial-value: hsl(calc(var(--accent-color-hue)*1deg), 100%, 58%); } @property --radial-bg-color { syntax: "<color>"; inherits: true; initial-value: black; } } :root { --background-color: hsl(222deg 17% 14%); --dark-color: hsl(227deg 37% 3%); --light-color: hsl(211deg 23% 51%); --accent-color-hue: 219; --accent-color: hsl(calc(var(--accent-color-hue)*1deg) 100% 58%); --radial-bg-color: var(--dark-color); --max-height: 0; --bg-y: -50; --bg-x: 200; --item-y: 20; --item-opacity: 0; /* Misc */ --_inner-radius: 10; --_inner-padding: 6; --inner-radius: calc(var(--_inner-radius) * 1px); --inner-padding: calc(var(--_inner-padding) * 1px); --outer-radius: calc(calc(var(--_inner-radius) + var(--_inner-padding)) * 1px); --debug: 0; --a11y: 0; --outline-color: hsla(calc(var(--accent-color-hue)*1deg) 100% 58% / calc(var(--a11y)*100%)); } *, *:before, *:after { box-sizing: border-box; outline: calc(var(--debug)*1px) dotted red; outline-offset: -1px; } html, body { width: 100%; height: 100%; padding: 0; margin: 0; } body { background: var(--background-color); font-family: "Mona sans", sans-serif; } main { max-width: 800px; margin: 16em auto; padding: 0; display: grid; grid-template-columns: repeat(1, 1fr); grid-gap: 32px; place-items: center; align-items: start; } @media (min-width: 760px) { main { grid-template-columns: repeat(3, 1fr); } } header { color: white; } header h3 { letter-spacing: 0.15em; } div.select { color: white; background: var(--dark-color) radial-gradient(ellipse 70% 70% at calc(var(--bg-x)*1%) calc(var(--bg-y)*1%), var(--radial-bg-color) 0%, var(--dark-color) 100%); padding: var(--inner-padding); border-radius: var(--outer-radius); position: relative; width: 200px; z-index: 1; transition: background 0.3s ease, --bg-y 0.4 ease, --bg-x 0.4s ease; /* * :focus-within or :has(button:focus) */ } div.select:hover { animation: glow 1.2s ease-in-out; } div.select:hover > button:after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='98' fill='none'%3E%3Cpath fill='hsl(219deg 100% 58%)' d='M25.536 6c1.54-2.667 5.388-2.667 6.928 0l18.187 31.5c1.54 2.667-.385 6-3.465 6H10.814c-3.079 0-5.003-3.333-3.464-6L25.536 6ZM25.536 92c1.54 2.667 5.388 2.667 6.928 0l18.187-31.5c1.54-2.667-.385-6-3.465-6H10.814c-3.079 0-5.003 3.333-3.464 6L25.536 92Z'/%3E%3C/svg%3E") no-repeat center center/0.6em; } div.select:before { content: ""; display: block; position: absolute; width: calc(100% - 2px); height: calc(100% - 2px); top: 1px; left: 1px; background: var(--dark-color); border-radius: var(--outer-radius); z-index: -1; } div.select > button { padding: calc(var(--inner-padding)*2) calc(var(--inner-padding)*2); background: var(--background-color); border-radius: var(--inner-radius); border: 0; color: white; text-align: left; font-size: 1em; width: 100%; cursor: pointer; position: relative; box-shadow: inset 0 2px 1px -1px rgba(255, 255, 255, 0.1); transform: scale(var(--scale)); animation-duration: 0.2s; animation-timing-function: cubic-bezier(0.66, -0.82, 0.33, 1.73); } div.select > button:focus { outline: 1px solid var(--accent-color); outline-offset: -1px; } div.select > button:after { content: ""; position: absolute; right: 8px; height: 100%; width: 1em; top: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='98' fill='none'%3E%3Cpath fill='hsl(211deg 23% 51%)' d='M25.536 6c1.54-2.667 5.388-2.667 6.928 0l18.187 31.5c1.54 2.667-.385 6-3.465 6H10.814c-3.079 0-5.003-3.333-3.464-6L25.536 6ZM25.536 92c1.54 2.667 5.388 2.667 6.928 0l18.187-31.5c1.54-2.667-.385-6-3.465-6H10.814c-3.079 0-5.003 3.333-3.464 6L25.536 92Z'/%3E%3C/svg%3E") no-repeat center center/0.6em; } div.select > div { display: flex; flex-direction: column; overflow: hidden; height: 0; /* transition: --max-height .2s ease; ?? not working ?? */ transition: height 0.3s ease-in-out; } div.select >.........完整代码请登录后点击上方下载按钮下载查看
网友评论0