3D粒子碎纸片特效

代码语言:html

所属分类:粒子

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3 3D粒子</title>
 <script  type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/jquery.17.js"></script>

<style>
    @charset "utf-8";
html,
body,
#scene {
  width: 100%;
  height: 100%;
}

body {
  background: black;overflow: hidden;
}

#scene {
  perspective: 150px; /* the lower this is, the fancier it gets */
}

#emitter {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-style: preserve-3d;
  animation: rotate 4s infinite linear;
}

.particle {
  position: absolute;
  width: 10px;
  height: 10px;
  background: white;
  border-radius: 20%;
  transition: 1s ease-in;
}

@keyframes rotate {
  0% {
    transform: rotateY(0) rotateZ(-180deg);
  }
  100% {
    transform: rotateY(360deg) rotateZ(180deg);
  }
}
</style>
</head>
<body>

<div id="scene">
  <div id="emitter"></div>
</div>

<script type="text/javascript">
var $emitter = $('#emitter'),
    emitEvery = 50, //每发射一次新粒子
    removeAfter = 1000; //去除颗粒

function create.........完整代码请登录后点击上方下载按钮下载查看

网友评论0