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

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

代码语言：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-funct.........完整代码请登录后点击上方下载按钮下载查看