js+svg实现可调节颜色的消息提示框效果代码
代码语言:html
所属分类:弹出层
代码描述:js+svg实现可调节颜色的消息提示框效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> *, *:after, *:before { box-sizing: border-box; } [data-theme=light] { --line: hsl(0 0% 10% / 0.15); color-scheme: light only; background: hsl(0 0% 98%); } [data-theme=dark] { --line: hsl(0 0% 90% / 0.15); color-scheme: dark only; background: hsl(0 0% 2%); } body { display: grid; place-items: center; align-content: center; gap: 1rem; min-height: 100vh; font-family: "SF Pro Text", "SF Pro Icons", "AOS Icons", "Helvetica Neue", Helvetica, Arial, sans-serif, system-ui; } body::before { --size: 60px; content: ''; height: 100vh; width: 100vw; position: fixed; background: linear-gradient( 90deg, var(--line) 1px, transparent 1px var(--size) ) 50% 50% / var(--size) var(--size), linear-gradient(var(--line) 1px, transparent 1px var(--size)) 50% 50% / var(--size) var(--size); -webkit-mask: linear-gradient(-15deg, transparent 30%, white); mask: linear-gradient(-15deg, transparent 30%, white); top: 0; transform-style: flat; pointer-events: none; z-index: -1; } aside { padding: 0.5rem 0.75rem; border-width: 1px; border-style: solid; border-radius: 6px; display: flex; gap: 0.5rem; align-items: center; font-weight: 300; line-height: 1.5; white-space: nowrap; transition: all 0.2s; } @supports(color: color-mix(in oklch, red 0%, white)) { [data-theme="dark"] aside { border-color: color-mix(in oklch, var(--color) 5%, oklch(100% 0 0 / 15%)); background: color-mix(in oklch, var(--color) 50%, oklch(0% 0 0 / 50%)); color: color-mix(in oklch, var(--color) 50%, oklch(100% 0 0)); } [data-theme="light"] aside { border-color: color-mix(in oklch, var(--color) 50%, oklch(100% 0 0 / 15%)); background: color-mix(in oklch, var(--color) 25%, oklch(100% 0 0 / 50%)); color: color-mix(in oklch, var(--color) 100%, oklch(100% 0 0)); } aside::-moz-selection { background: color-mix(in oklch, var(--color) 90%, oklch(100% 0 0)); color: color-mix(in oklch, var(--color) 10%, oklch(100% 0 0)); } aside::selection { background: color-mix(in oklch, var(--color) 90%, oklch(100% 0 0)); color: color-mix(in oklch, var(--color) 10%, oklch(100% 0 0)); } } @supports (color: rgb(from white r g b)) { [data-theme=dark] aside { border-color: oklch(from var(--color) l c h / 0.25); background: oklch(from var(--color) calc(l * 0.75) c h / 0.5); color: oklch(from var(--color) calc(l * 1.5) c h); } [data-theme=light] aside { border-color: oklch(from var(--color) l c h / 25%); background: oklch(from var(--color) calc(l * 1) c h / 20%); color: oklch(from var(--color) calc(l * 1) c h); } aside::-moz-selection { background: oklch(from var(--color) calc(l * 1.1) c h); color: oklch(from var(--color) 1 c h); } aside::selection { background: oklch(from var(--color) calc(l * 1.1) c h); color: oklch(from var(--color) 1 c h); } } aside svg { width: 24px; } [data-type=error] { --color: oklch(62.8% 0.25 29.23); --color: red; } [data-type=ai] { --color: oklch(58.11% 0.31 307.02); } [data-type=tip] { --color: oklch(53.24% 0.23 256.22); } [data-type=warning] { --color: oklch(61.47% 0.16 64.21); } [data-type=success] { --color: oklch(47.06% 0.17 148.76); --color: hsl(145 100% 25%); } [data-type=note] { --color: oklch(41.84% 0 0); } [aria-pressed] { position: fixed; top: 1rem; right: 1rem; width: 48px; aspect-ratio: 1; display: grid; place-items: center; padding: 0; border: 0; background: transparent; cursor: pointer; border-radius: 6px; } button::after { content: ""; position: absolute; inset: 0; border-radius: 6px; background: hsl(0 0% 50% / 0.25); opacity: var(--intent, 0); transition: opacity 0.2s; } button:is(:hover, :focus-visible) { --intent: 1; } [aria-pressed] svg { width: 50%; } [aria-pressed=true] path:first-of-type, [aria-pressed=false] path:last-of-type { display: none; } [aria-pressed=false] path:first-of-type, [aria-pressed=true] path:last-of-type { display: block; } /* Social */ .bear-link { color: canvasText; position: fixed; top: 1rem; left: 1rem; width: 48px; aspect-ratio: 1; display: grid; place-items: center; opacity: 0.8; } body > div { position: relative; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } .color-picker { position: absolute; left: calc(100% + 0.5rem); top: 50%; width: 40px; aspect-ratio: 1; translate: 0 -50%; display: grid; place-items: center; padding: 0; border-radius: 6px; background: transparent; border: 0; cursor: pointer; color: hsl(0 0% 50%); opacity: var(--active, 0); transition: opacity 0.2s; } body > div:is(:hover, :focus-within) { --active: 1; } .color-picker svg { width: 24px; } :where(.x-link, .bear-link):is(:hover, :focus-visible) { opacity: 1; } .bear-link svg { width: 75%; } ::view-transition-old(root) { z-index: -1; -webkit-animation: none; animation: none; } ::view-transition-new(root) { z-index: 2; -webkit-animation: unclip 1s both; animation: unclip 1s both; } @-webkit-keyframes unclip { 0% { -webkit-clip-path: inset(0 0 100% 100%); clip-path: inset(0 0 100% 100%); } 100% { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); } } @keyframes unclip { 0% { -webkit-clip-path: inset(0 0 100% 100%); clip-path: inset(0 0 100% 100%); } 100% { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); } } </style> </head> <body> <div> <aside data-type="warning"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"/> </svg> A note showing off CSS relative color syntax </aside> <button class="color-picker"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6"> <path fill-rule="evenodd" d="M11.828 2.25c-.916 0-1.699.663-1.85 1.567l-.091.549a.798.798 0 0 1-.517.608 7.45 7.45 0 0 0-.478.198.798.798 0 0 1-.796-.064l-.453-.324a1.875 1.875 0 0 0-2.416.2l-.243.243a1.875 1.875 0 0 0-.2 2.416l.324.453a.798.798 0 0 1 .064.796 7.448 7.448 0 0 0-.198.478.798.798 0 0 1-.608.517l-.55.092a1.875 1.875 0 0 0-1.566 1.849v.344c0 .916.663 1.699 1.567 1.85l.549.091c.281.047.508.25.608.517.06.162.127.321.198.478a.798.798 0 0 1-.064.796l-.324.453a1.875 1.875 0 0 0 .2 2.416l.243.243c.648.648 1.67.733 2.416.2l.453-.324a.798.798 0 0 1 .796-.064c.157.071.316.137.478.198.267.1.47.327.517.608l.092.55c.15.903.932 1.566 1.849 1.566h.344c.916 0 1.699-.663 1.85-1.567l.091-.549a.798.798 0 0 1 .517-.608 7.52 7.52 0 0 0 .478-.198.798.798 0 0 1 .796.064l.453.324a1.875 1.875 0 0 0 2.416-.2l.243-.243c.648-.648.733-1.67.2-2.416l-.324-.453a.798.798 0 0 1-.064-.796c.071-.157.137-.316.198-.478.1-.267.327-.47.608-.517l.55-.091a1.875 1.875 0 0 0 1.566-1.85v-.344c0-.916-.663-1.699-1.567-1.85l-.549-.091a.798.798 0 0 1-.608-.517 7.507 7.507 0 0 0-.198-.478.798.798 0 0 1 .064-.796l.324-.453a1.875 1.875 0 0 0-.2-2.416l-.243-.243a1.875 1.875 0 0 0-2.416-.2l-.453.324a.798.798 0 0 1-.796.064 7.462 7.462 0 0 0-.478-.198.798.798 0 0 1-.517-.608l-.091-.55a1.875 1.875 0 0 0-1.85-1.566h-.344ZM12 15.75a3.75 3.75 0 1 0 0-7.5 3.75 3.75 0 0 0 0 7.5Z" clip-rule="evenodd"/> </svg> <span class="sr-only">Change Color</span> </button> </div> <div> <aside data-type="error"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z"/> </svg> A note showing off CSS relative color syntax </aside> <button class="color-picker"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6"> <path fill-rule="evenodd" d="M11.828 2.25c-.916 0-1.699.663-1.85 1.567l-.091.549a.798.798 0 0 1-.517.608 7.45 7.45 0 0 0-.478.198.798.798 0 0 1-.796-.064l-.453-.324a1.875 1.875 0 0 0-2.416.2l-.243.243a1.875 1.875 0 0 0-.2 2.416l.324.453a.798.798 0 0 1 .064.796 7.448 7.448 0 0 0-.198.478.798.798 0 0 1-.608.517l-.55.092a1.875 1.875 0 0 0-1.566 1.849v.344c0 .916.663 1.699 1.567 1.85l.549.091c.281.047.508.25.608.517.06.162.127.321.198.478a.798.798 0 0 1-.064.796l-.324.453a1.875 1.875 0 0 0 .2 2.416l.243.243c.648.648 1.67.733 2.416.2l.453-.324a.798.798 0 0 1 .796-.064c.157.071.316.137.478.198.267.1.47.327.517.608l.092.55c.15.903.932 1.566 1.849 1.566h.344c.916 0 1.699-.663 1.85-1.567l.091-.549a.798.798 0 0 1 .517-.608 7.52 7.52 0 0 0 .478-.198.798.798 0 0 1 .796.064l.453.324a1.875 1.875 0 0 0 2.416-.2l.243-.243c.648-.648.733-1.67.2-2.416l-.324-.453a.798.798 0 0 1-.064-.796c.071-.157.137-.316.198-.478.1-.267.327-.47.608-.517l.55-.091a1.875 1.875 0 0 0 1.566-1.85v-.344c0-.916-.663-1.699-1.567-1.85l-.549-.091a.798.798 0 0 1-.608-.517 7.507 7.507 0 0 0-.198-.478.798.798 0 0 1 .064-.796l.324-.453a1.875 1.875 0 0 0-.2-2.416l-.243-.243a1.875 1.875 0 0 0-2.416-.2l-.453.324a.798.798 0 0 1-.796.064 7.462 7.462 0 0 0-.478-.198.798.798 0 0 1-.517-.608l-.091-.55a1.875 1.875 0 0 0-1.85-1.566h-.344ZM12 15.75a3.75 3.75 0 1 0 0-7.5 3.75 3.75 0 0 0 0 7.5Z" clip-rule="evenodd"/> </svg> <span class="sr-only">Change Color</span> </button> </div> <div> <aside data-type="success"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/> </svg> A note showing off CSS relative color syntax </aside> <button class="color-picker"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6"> <path fill-rule="evenodd" d="M11.828 2.25c-.916 0-1.699.663-1.85 1.567l-.091.549a.798.798 0 0 1-.517.608 7.45 7.45 0 0 0-.47.........完整代码请登录后点击上方下载按钮下载查看
网友评论0