css+div实现按钮悬浮星空动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：悬停

代码描述：css+div实现按钮悬浮星空动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
<style>
@layer properties {
  @property --shadow-scale {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }
  @property --halo-scale {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }
  @property --halo-offset {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }
}
:root {
  --debug: 0;
  --bg-color: hsl(0, 0%, 8%);
  --svg-animation: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 113 46'%3E%3Cpath id='b' stroke='%23fff' stroke-linecap='round' stroke-width='0' d='M13.17 43c-.478-1.188-3.117-4.02-2.866-7.13.25-3.11 5.087-7.212 4.37-11.526-.716-4.314-8.89-10.467-8.67-14.358C6.225 6.096 14.334 2.498 16 1'%3E%3C/path%3E%3Cpath id='d' stroke='%23fff' stroke-linecap='round' stroke-width='0' d='M83.378 43c.907-1.188 5.922-4.02 5.445-7.13-.476-3.11-9.666-7.212-8.304-11.526C81.88 20.03 90.919 13.391 90.5 9.5 90.08 5.61 81.165 2.498 78 1'%3E%3C/path%3E%3Cpath id='f' stroke='%23fff' stroke-linecap='round' stroke-width='0' d='M35.812 43c.812-1.188 4.303-4.5 5.188-7 3.316-9.37-8.965-7.342-7.746-11.656 1.218-4.314 9.622-9.953 9.246-13.844C42.124 6.61 33.832 2.498 31 1'%3E%3C/path%3E%3Cpath id='h' stroke='%23fff' stroke-linecap='round' stroke-width='0' d='M106.755 43c-.717-1.188-3.786-1.636-4.3-7.13C102 31 101.988 31.656 107 24c3.5-9.5-11.325-10.123-10.993-14.014C96.338 6.096 108.5 2.498 111 1'%3E%3C/path%3E%3Cg%3E%3Ccircle r='.5' fill='%23D9D9D9'%3E%3CanimateMotion dur='8s' repeatCount='indefinite'%3E%3Cmpath href='%23b'%3E%3C/mpath%3E%3C/animateMotion%3E%3C/circle%3E%3C/g%3E%3Cg%3E%3Ccircle r='.5' fill='%23fff' fill-opacity='.8' shape-rendering='crispEdges'%3E%3CanimateMotion dur='6s' repeatCount='indefinite'%3E%3Cmpath href='%23d'%3E%3C/mpath%3E%3C/animateMotion%3E%3C/circle%3E%3C/g%3E%3Cg%3E%3Ccircle r='.5' fill='%23fff' fill-opacity='.8' shape-rendering='crispEdges'%3E%3CanimateMotion dur='7s' repeatCount='indefinite'%3E%3Cmpath href='%23f'%3E%3C/mpath%3E%3C/animateMotion%3E%3C/circle%3E%3C/g%3E%3Cg%3E%3Ccircle r='.5' fill='%23fff' fill-opacity='.8' shape-rendering='crispEdges'%3E%3CanimateMotion dur='5s' repeatCount='indefinite'%3E%3Cmpath href='%23h'%3E%3C/mpath%3E%3C/animateMotion%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
  --btn-radius: 12;
  --animation-timing-function: ease-in-out;
  --transitions: --shadow-scale 0.3s var(--animation-timing-function),
    --halo-scale 0.3s var(--animation-timing-function),
    --halo-offset 0.3s var(--animation-timing-function),
    transform 0.2s var(--animation-timing-function);
  --color-a: hsl(249.8 100% 50%);
  --color-b: hsl(259.15 100% 40%);
  --color-c: hsl(281.28 100% 56.01%);
}

@supports (color: color(display-p3 0 0 0)) {
  body {
    --color-a: color(display-p3 0.16 0.1 0.99);
    --color-b: color(display-p3 0.23 0 0.77);
    --color-c: color(display-p3 0.68 0.08 1);
  }
}
*,
*:before,
*:after {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  outline: calc(var(--debug) * 1px) dotted hsl(calc(var(--debug) * 10 * 1deg), 60%, 60%);
}

html,
body,
main {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg-color);
  font-family: "Mona Sans", sans-serif;
}

main {
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(2);
  position: relative;
  /* I did not found a better way to achieve that with less dom. 
   *
   * Due to the button having a overflow: hidden;
   *
  */
}
main button {
  --halo-scale: 0;
  --halo-offset: 100;
  --shadow-scale: 0;
  all: unset;
  font-family: "Inter", sans-serif;
  cursor: pointer;
  color: white;
  max-height: 46px;
  font-size: 22px;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
  border-radius: calc(var(--btn-radius) * 1px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
  position: relative;
  transition: var(--transitions);
}
main button > div {
  overflow: hidden;
  position: relative;
  border-radius: calc(var(--btn-radius) * 1px);
}
main button .inner {
  dis.........完整代码请登录后点击上方下载按钮下载查看