css实现宇宙星空按钮悬浮动画效果代码
代码语言:html
所属分类:悬停
代码描述:css实现宇宙星空按钮悬浮动画效果代码,刚开始是边框流动动画,鼠标放上去后,按钮背景显示宇宙星空运动。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> *, *:after, *:before { box-sizing: border-box; } :root { --transition: 0.25s; --spark: 1.8s; --hue: 245; } body { --active: 0; background: hsl( var(--hue) calc(var(--active) * 97%) 6% ); display: grid; place-items: center; min-height: 100vh; font-family: system-ui, sans-serif; transition: background var(--transition); overflow: hidden; } button { --cut: 0.1em; --active: 0; --bg: radial-gradient( 120% 120% at 126% 126%, hsl(var(--hue) calc(var(--active) * 97%) 98% / calc(var(--active) * 0.9)) 40%, transparent 50% ) calc(100px - (var(--active) * 100px)) 0 / 100% 100% no-repeat, radial-gradient( 120% 120% at 120% 120%, hsl(var(--hue) calc(var(--active) * 97%) 70% / calc(var(--active) * 1)) 30%, transparent 70% ) calc(100px - (var(--active) * 100px)) 0 / 100% 100% no-repeat, hsl(var(--hue) calc(var(--active) * 100%) calc(12% - (var(--active) * 8%))); background: var(--bg); font-size: 2rem; font-weight: 500; border: 0; cursor: pointer; padding: 0.9em 1.3em; display: flex; align-items: center; gap: 0.25em; white-space: nowrap; border-radius: 2rem; position: relative; box-shadow: 0 0 calc(var(--active) * 6em) calc(var(--active) * 3em) hsl(var(--hue) 97% 61% / 0.5), 0 0.05em 0 0 hsl(var(--hue) calc(var(--active) * 97%) calc((var(--active) * 50%) + 30%)) inset, 0 -0.05em 0 0 hsl(var(--hue) calc(var(--active) * 97%) calc(var(--active) * 10%)) inset; transition: box-shadow var(--transition), scale var(--transition), background var(--transition); scale: calc(1 + (var(--active) * 0.1)); transform-style: preserve-3d; perspective: 100vmin; overflow: hidden; } button:active { scale: 1; } .star { height: calc(var(--size) * 1px); aspect-ratio: 1; background: white; border-radius: 50%; /* filter: blur(4px);*/ position: absolute; opacity: var(--alpha); top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(10deg) rotate(0deg) translateY(calc(var(--distance) * 1px)) ; -webkit-animation: orbit calc(var(--duration) * 1s) calc(var(--delay) * -1s) infinite linear; animation: orbit calc(var(--duration) * 1s) calc(var(--delay) * -1s) infinite linear; } @-webkit-keyframes orbit { to { transform: translate(-50%, -50%) rotate(10deg) rotate(360deg) translateY(calc(var(--distance) * 1px)); } } @keyframes orbit { to { transform: translate(-50%, -50%) rotate(10deg) rotate(360deg) translateY(calc(var(--distance) * 1px)); } } .galaxy { position: absolute; width: 100%; aspect-ratio: 1; top: 50%; left: 50%; translate: -50% -50%; overflow: hidden; opacity: var(--active); transition: opacity var(--transition); /*transform-style: preserve-3d; perspective: 100vmin;*/ /* opacity: 0.25;*/ } .galaxy__ring { height: 200%; width: 200%; position: absolute; top: 50%; left: 50%; border-radius: 50%; transform: translate(-28%, -40%) rotateX(-24deg) rotateY(-30deg) rotateX(90deg); transform-style: preserve-3d; /* background: red;*/ } .galaxy__container { position: absolute; inset: 0; opacity: var(--active); transition: opacity var(--transition); -webkit-mask: radial-gradient(white, transparent); mask: radial-gradient(white, transparent); } .star--static { -webkit-animation: none; animation: none; top: 50%; left: 50%; transform: translate(0, 0); max-height: 4px; filter: brightness(4); opacity: 0.9; -webkit-animation: move-x calc(var(--duration) * 0.1s) calc(var(--delay) * -0.1s) infinite linear, move-y calc(var(--duration) * 0.2s) calc(var(--delay) * -0.2s) infinite linear; animation: move-x calc(var(--duration) * 0.1s) calc(var(--delay) * -0.1s) infinite linear, move-y calc(var(--duration) * 0.2s) calc(var(--delay) * -0.2s) infinite linear; } button:hover .star--static { -webkit-animation-play-state: paused; animation-play-state: paused; } @-webkit-keyframes move-x { 0% { translate: -100px 0; } 100% { translate: 100px 0; } } @keyframes move-x { 0% { translate: -100px 0; } 100% { translate: 100px 0; } } @-webkit-keyframes move-y { 0% { transform: translate(0, -50px); } 100% { transform: translate(0, 50px); } } @keyframes move-y { 0% { transform: translate(0, -50px); } 100% { transform: translate(0, 50px); } } .spark { position: absolute; inset: 0; border-radius: 2rem; rotate: 0deg; overflow: hidden; -webkit-mask: linear-gradient(white, transparent 50%); mask: lin.........完整代码请登录后点击上方下载按钮下载查看
网友评论0