烟花火花动画效果-html代码-BFW代码库

烟花火花动画效果

代码语言：html

所属分类：粒子

代码描述：烟花火花动画效果

代码标签：效果

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
@-webkit-keyframes glow {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  to {
    -webkit-transform: scale(1.125);
            transform: scale(1.125);
  }
}
@keyframes glow {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  to {
    -webkit-transform: scale(1.125);
            transform: scale(1.125);
  }
}
html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  padding: 0;
  margin: 0;
}

body {
  background: #110c1e;
  text-align: center;
  -webkit-filter: contrast(3);
          filter: contrast(3);
}

.orb {
  display: inline-block;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  background: #fff;
  box-shadow: 0 0 80px #ebd4ff,0 0 20px #f6ffe1,0 0 10px #f6ffe1;
  border-radius: 50%;
  -webkit-filter: blur(1px);
          filter: blur(1px);
}
.orb::after, .orb::before {
  position: absolute;
  -webkit-animation-name: glow;
          animation-name: glow;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
  top: 50%;
  left: 50%;
  content: '';
  background: radial-gradient(ellipse at center, rgba(240, 255, 255, 0.05) 0%, rgba(240, 255, 255, 0) 50%);
}
.orb::after {
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  width: 40rem;
  height: .5rem;
  margin-left: -20rem;
  margin-top: -.25rem;
}
.orb::before {
  -webkit-animation-duration: .25s;
          animation-duration: .25s;
  width: 20rem;
  height: 2rem;
  margin-left: -10rem;
  margin-top: -1rem;
}

.flake {
  position: absolute;
  left: 50%;
  top: 50%;
  background: #fff;
  width: .25rem;
  height: .25rem;
  margin-top: -.125rem;
  margin-left: -.125rem;
  border-radius: 50%;
  box-shadow: 0 0 20px #f6ffe1,0 0 10px #f6ffe1;
}
</style>

</head>
<body translate="no">
<div class="orb"></div>

<script >
var g.........完整代码请登录后点击上方下载按钮下载查看