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