svg+Css实现光晕动画效果代码-html代码-BFW代码库

svg+Css实现光晕动画效果代码

代码语言：html

所属分类：动画

代码描述：svg+Css实现光晕动画效果代码

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

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

<head>
  <meta charset="UTF-8">
  
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css">

  
  
<style>
:root {
  --c-noir-neutral: #2d3145;
  --c-red-orange: #f56c16;
  --c-electric-purple: #b653f5;
  --c-yellow-20: #fdf7d0;
  --c-yellow-30: #f9e673;
  --c-yellow: #f5d616;
}

html, body {
  height: 100%;
  background: var(--c-noir-neutral);
}

body {
  filter: saturate(0.3);
}

@-webkit-keyframes clockwise {
  from {
    transform: rotate(0turn);
  }
  to {
    transform: rotate(1turn);
  }
}

@keyframes clockwise {
  from {
    transform: rotate(0turn);
  }
  to {
    transform: rotate(1turn);
  }
}
@-webkit-keyframes fade-to-o {
  from {
    opacity: 1;
  }
  to {
    opacity: var(--o);
  }
}
@keyframes fade-to-o {
  from {
    opacity: 1;
  }
  to {
    opacity: var(--o);
  }
}
@-webkit-keyframes bounce-diagonal {
  from {
    transform: translate(-100%, -100%);
  }
  to {
    transform: translate(calc(100vmax), calc(100vmax));
  }
}
@keyframes bounce-diagonal {
  from {
    transform: translate(-100%, -100%);
  }
  to {
    transform: translate(calc(100vmax), calc(100vmax));
  }
}
svg,
main,
article {
  --diag: 1.4143;
  --size: calc(100vmax * var(--diag));
  position: fixed;
  top: calc(50vh - var(--size) / 2);
  left: calc(50vw - var(--size) / 2);
  width: var(--size);
  height: var(--size);
  transform-origin: 50% 50%;
}

:is(main, article)::before,
:is(main, article)::after {
  content: "".........完整代码请登录后点击上方下载按钮下载查看