CSS3 3D粒子

下载代码

html

css

js

分享到微信朋友圈

X

html

css

JavaScript

var $emitter = $('#emitter'),
    emitEvery = 50, //emit new particle every X ms
    removeAfter = 1000; //remove particles after X ms

function create() {
  
  //create particle and random values
  var $particle = $('<div class="particle" />'),
      x = Math.randMinMax(-200, 200),
      y = Math.randMinMax(-200, 50),
      z = Math.randMinMax(-200, 200),
      degree = Math.randMinMax(0, 360),
      color = 'hsla(' + Math.randMinMax(200, 320) + ', 80%, 60%, 1)';
  
  //append particle to dom
  $particle.css('background', color);            
  $emitter.append( $particle );
  
  //after a short timeout, set css to be transitioned to. Without the timeout, we would not see the transition
  window.setTimeout(function() {
    $particle.css({
      webkitTransform: 'translateX(' + x + 'px) translateY(' + y + 'px) translateZ(' + z + 'px) rotateX(' + degree + 'deg)',
      opacity: 0
    }); 
  }, 50);
  
  //remove current particle after time
  window.setTimeout(function() {
    $particle.remove();
  }, removeAfter);
  
  //create next particle
  window.setTimeout(create, emitEvery); 
  
}

Math.randMinMax=function(t,n,a){var r=t+Math.random()*(n-t)
return a&&(r=Math.round(r)),r}

//execute first particle creation
create();

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg

<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS3 3D粒子-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号