烟雾效果

下载代码

html

css

分享到微信朋友圈

html

css

@import url(https://fonts.googleapis.com/css?family=Finger+Paint);
* {
  margin: 0;
  padding: 0;
  outline: 0;
}
html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: black;
  font-family: "Finger Paint";
}
#myCanvas {
  z-index: -1;
}

span {
  font-size: 100px;
  display: inline-block;
  text-shadow: 0 0 0 whitesmoke;
  -webkit-animation: smoky 5s 3s both;
          animation: smoky 5s 3s both;
}

.text{
  position: absolute;
  top: 30%;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  text-align: center;
  color: transparent;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

span:nth-child(even) {
  -webkit-animation-name: smoky-mirror;
          animation-name: smoky-mirror;
}

@-webkit-keyframes smoky {
  60% {
    text-shadow: 0 0 40px whitesmoke;
  }
  to {
    -webkit-transform: translate3d(15rem, -8rem, 0) rotate(-40deg) skewX(70deg) scale(1.5);
            transform: translate3d(15rem, -8rem, 0) rotate(-40deg) skewX(70deg) scale(1.5);
    text-shadow: 0 0 20px whitesmoke;
    opacity: 0;
  }
}

@keyframes smoky {
  60% {
    text-shadow: 0 0 40px whitesmoke;
  }
  to {
    -webkit-transform: translate3d(15rem, -8rem, 0) rotate(-40deg) skewX(70deg) scale(1.5);
            transform: translate3d(15rem, -8rem, 0) rotate(-40deg) skewX(70deg) scale(1.5);
    text-shadow: 0 0 20px whitesmoke;
    opacity: 0;
  }
}
@-webkit-keyframes smoky-mirror {
  60% {
    text-shadow: 0 0 40px whitesmoke;
  }
  to {
    -webkit-transform: translate3d(18rem, -8rem, 0) rotate(-40deg) skewX(-70deg) scale(2);
            transform: translate3d(18rem, -8rem, 0) rotate(-40deg) skewX(-70deg) scale(2);
    text-shadow: 0 0 20px whitesmoke;
    opacity: 0;
  }
}
@keyframes smoky-mirror {
  60% {
    text-shadow: 0 0 40px whitesmoke;
  }
  to {
    -webkit-transform: translate3d(18rem, -8rem, 0) rotate(-40deg) skewX(-70deg) scale(2);
            transform: translate3d(18rem, -8rem, 0) rotate(-40deg) skewX(-70deg) scale(2);
    text-shadow: 0 0 20px whitesmoke;
    opacity: 0;
  }
}
span:nth-of-type(1) {
  -webkit-animation-delay: 3.1s;
          animation-delay: 3.1s;
}

span:nth-of-type(2) {
  -webkit-animation-delay: 3.2s;
          animation-delay: 3.2s;
}

span:nth-of-type(3) {
  -webkit-animation-delay: 3.3s;
          animation-delay: 3.3s;
}

span:nth-of-type(4) {
  -webkit-animation-delay: 3.4s;
          animation-delay: 3.4s;
}

span:nth-of-type(5) {
  -webkit-animation-delay: 3.5s;
          animation-delay: 3.5s;
}

span:nth-of-type(6) {
  -webkit-animation-delay: 3.6s;
          animation-delay: 3.6s;
}

span:nth-of-type(7) {
  -webkit-animation-delay: 3.7s;
          animation-delay: 3.7s;
}

span:nth-of-type(8) {
  -webkit-animation-delay: 3.8s;
          animation-delay: 3.8s;
}

span:nth-of-type(9) {
  -webkit-animation-delay: 3.9s;
          animation-delay: 3.9s;
}

span:nth-of-type(10) {
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
}

span:nth-of-type(11) {
  -webkit-animation-delay: 4.1s;
          animation-delay: 4.1s;
}

span:nth-of-type(12) {
  -webkit-animation-delay: 4.2s;
          animation-delay: 4.2s;
}

JavaScript

var camera, scene, renderer, geometry, material, mesh;

init();
animate();
g;
function init() {
  clock = new THREE.Clock();

renderer = new THREE.WebGLRenderer({
    canvas: document.querySelector("#myCanvas")
  });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);

scene = new THREE.Scene();

camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    1,
    10000
  );
  camera.position.z = 1000;
  scene.add(camera);

geometry = new THREE.CubeGeometry(200, 200, 200);
  material = new THREE.MeshLambertMaterial({
    color: 0xffffff,
    wireframe: false
  });
  mesh = new THREE.Mesh(geometry, material);
  cubeSineDriver = 0;

THREE.ImageUtils.crossOrigin = ""; //Need this to pull in crossdomain images from AWS

light = new THREE.DirectionalLight(0xffffff, 0.5);
  light.position.set(-1, 0, 1);
  scene.add(light);

smokeTexture = THREE.ImageUtils.loadTexture(
    "https://s3-us-west-2.amazonaws.com/s.cdpn.io/95637/Smoke-Element.png"
  );
  smokeMaterial = new THREE.MeshLambertMaterial({
    color: 0xffffff,
    map: smokeTexture,
    transparent: true
  });
  smokeGeo = new THREE.PlaneGeometry(300, 300);
  smokeParticles = [];

for (p = 0; p < 150; p++) {
    var particle = new THREE.Mesh(smokeGeo, smokeMaterial);
    particle.position.set(
      Math.random() * 500 - 250,
      Math.random() * 500 - 250,
      Math.random() * 1000 - 100
    );
    particle.rotation.z = Math.random() * 360;
    scene.add(particle);
    smokeParticles.push(particle);
  }
  document.body.appendChild(renderer.domElement);
}

function animate() {
  delta = clock.getDelta();
  requestAnimationFrame(animate);
  evolveSmoke();
  render();
}

function evolveSmoke() {
  var sp = smokeParticles.length;
  while (sp--) {
    smokeParticles[sp].rotation.z += delta * 0.2;
  }
}

function render() {
  mesh.rotation.x += 0.005;
  mesh.rotation.y += 0.01;
  cubeSineDriver += 0.01;
  mesh.position.z = 100 + Math.sin(cubeSineDriver) * 500;
  renderer.render(scene, camera);
}

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