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(--acti.........完整代码请登录后点击上方下载按钮下载查看
网友评论0