3D按钮

下载代码

html

css

分享到微信朋友圈

html

css

html {
  font-size: 62.5%;
}

.home {
  position: fixed;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  top: 0%;
  left: 0%;
  background-color: #e9f5ff;
}
.home canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 4;
  pointer-events: none;
}
.home span {
  position: relative;
  z-index: 6;
  font-family: Arial;
    font-weight: bold; 
  text-decoration: none;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) scale(1);
          transform: translate(-50%, -50%) scale(1);
  font-size: 3rem;
  color: #fff;
  pointer-events: none;
}
.home a {
  font-family: "bw";
  text-decoration: none;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) scale(1);
          transform: translate(-50%, -50%) scale(1);
  font-size: 3rem;
  color: #fff;
  background-color: #acc7ed;
  border-radius: 10rem;
  padding: 1.5rem 4rem 2rem;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transition: all 0.6s ease;
  transition: all 0.6s ease;
}
.home a span {
  position: relative;
  opacity: 0;
}
.home a:after {
  content: "";
  background: linear-gradient(56deg, #61dafb 0%, #d6cbf6 46%, #f2056f 100%);
  width: 80%;
  height: 20%;
  position: absolute;
  bottom: -4px;
  left: 10%;
  opacity: 0;
  -webkit-filter: blur(15px);
          filter: blur(15px);
  border-radius: 10rem;
  -webkit-transform: translateZ(-1px);
          transform: translateZ(-1px);
  -webkit-transition: opacity 0.6s ease;
  transition: opacity 0.6s ease;
}
.home a:before {
  content: "";
  background: linear-gradient(56deg, #61dafb 0%, #d6cbf6 46%, #f2056f 100%);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  border-radius: 10rem;
  -webkit-transition: opacity 0.4s ease;
  transition: opacity 0.4s ease;
}
.home a:hover {
  -webkit-transition: all 0.6s ease;
  transition: all 0.6s ease;
  -webkit-transform: translate(-50%, -50%) scale(1.35);
          transform: translate(-50%, -50%) scale(1.35);
  -webkit-transform-origin: center;
          transform-origin: center;
}
.home a:hover:after {
  opacity: 1;
  -webkit-transition: opacity 0.6s ease;
  transition: opacity 0.6s ease;
}
.home a:hover:before {
  opacity: 1;
  -webkit-transition: opacity 0.6s linear;
  transition: opacity 0.6s linear;
}

JavaScript

class Experience {
  constructor( container, width, height ) {
    console.clear()
    
    this.raycaster = new THREE.Raycaster();
    this.mouse = new THREE.Vector2(0, 0);
    this._pos = {
      x: 0
    };

this.camera = new THREE.PerspectiveCamera(70, width / height, 1, 3000);
    this.camera.position.z = 200;
    
    this.renderer = new THREE.WebGLRenderer({
      antialias: true,
      alpha: true
    });
    this.renderer.setSize(width, height);
    this.renderer.setClearColor(0xffffff, 0.0);
    this.renderer.setPixelRatio(1.6);
    container.appendChild( this.renderer.domElement )
    
    const fps = 120
    this.fpsInterval = 1000 / fps
    this.then = Date.now()
    
    this.scene = new THREE.Scene()
    
    this.resize()
    this.bind()
    this.loop()
    
    this._addLights()
    this._addMeshes()
  }
  
  _addLights() {
    var light = new THREE.AmbientLight(0x0);
    this.scene.add(light);

var spotLight = new THREE.SpotLight(0xf2056f, 0.68, 0);
    spotLight.position.set(150, 150, 0);
    this.scene.add(spotLight);

var hemlight = new THREE.HemisphereLight(0xd8c7f3, 0x61dafb, 1);
    this.scene.add(hemlight);
  }
  
  _addMeshes(){
    var _prefix = 'https://robindelaporte.fr/codepen/play/'
    var urls = [
      _prefix + "nx.jpg",
      _prefix + "ny.jpg",
      _prefix + "nz.jpg",
      _prefix + "px.jpg",
      _prefix + "py.jpg",
      _prefix + "pz.jpg"
    ];

var cubemap = THREE.ImageUtils.loadTextureCube(urls);
    cubemap.format = THREE.RGBFormat;

var geometry = new THREE.SphereGeometry(24, 32, 32);
    var material = new THREE.MeshPhysicalMaterial({
      color: 0xffffff,
      roughness: 0.3,
      metalness: 0.1,
      transparent: true,
      reflectivity: 0.56,
      envMap: cubemap
    });

this._sphere = new THREE.Mesh(geometry, material);
    this._sphere.position.y = -30;
    this._sphere.position.x = -25;
    this.scene.add(this._sphere);

var geometryTorus = new THREE.TorusBufferGeometry(16, 8, 16, 100);
    this._torus = new THREE.Mesh(geometryTorus, material);
    this._torus.position.y = 30;
    this._torus.position.x = 30;
    this._torus.rotation.x = 2.3;
    this._torus.rotation.y = 0.3;
    this.scene.add(this._torus);

var geometryCone = new THREE.ConeBufferGeometry(8, 16, 32);
    this._cone = new THREE.Mesh(geometryCone, material);
    this._cone.position.y = 12;
    this._cone.position.x = -50;
    this._cone.position.z = 3;
    this._cone.rotation.x = -0.3;
    this._cone.rotation.z = 0.7;
    this.scene.add(this._cone);

this._torus.material.opacity = 0;
  }
  
  animateIn() {
    TweenMax.to(this._torus.material, 0.6, { opacity: 1 });

TweenMax.fromTo(
      this._torus.scale,
      0.6,
      { x: 0.8, y: 0.8, z: 0.8 },
      { x: 1.35, y: 1.35, z: 1.35 }
    );
    TweenMax.fromTo(
      this._torus.position,
      0.6,
      { x: 10, y: 20 },
      { x: 30, y: 40 }
    );

TweenMax.fromTo(
      this._torus.rotation,
      0.6,
      { x: 2.0, y: -0.3 },
      { x: 2.3, y: 0.3 }
    );

TweenMax.fromTo(
      this._sphere.scale,
      0.6,
      { x: 0.8, y: 0.8, z: 0.8 },
      { x: 1.15, y: 1.15, z: 1.15 }
    );
    TweenMax.fromTo(
      this._sphere.position,
      0.6,
      { x: -10, y: -10 },
      { x: -30, y: -40 }
    );

TweenMax.fromTo(
      this._cone.scale,
      0.6,
      { x: 0.8, y: 0.8, z: 0.8 },
      { x: 1.35, y: 1.35, z: 1.35 }
    );
    TweenMax.fromTo(
      this._cone.position,
      0.6,
      { x: -30, y: 2, z: 3 },
      { x: -70, y: 12, z: 3 }
    );

TweenMax.fromTo(
      this._cone.rotation,
      0.6,
      { x: -0.2, z: 0.0 },
      { x: -0.3, z: 0.7 }
    );
  }

animateOut() {
    TweenMax.to(this._torus.material, 0.6, { opacity: 0 });

TweenMax.to(this._torus.scale, 0.6, { x: 0.8, y: 0.8, z: 0.8 });
    TweenMax.to(this._torus.position, 0.6, { x: 10, y: 20 });
    TweenMax.to(this._torus.rotation, 0.6, { x: 2.0, y: -0.3 });

TweenMax.to(this._sphere.scale, 0.6, { x: 0.8, y: 0.8, z: 0.8 });
    TweenMax.to(this._sphere.position, 0.6, { x: -10, y: -10 });

TweenMax.to(this._cone.scale, 0.6, { x: 0.8, y: 0.8, z: 0.8 });
    TweenMax.to(this._cone.position, 0.6, { x: -30, y: 2, z: 3 });
    TweenMax.to(this._cone.rotation, 0.6, { x: -0.2, z: 0.0 });
  }
  
  bind() {
    window.addEventListener( 'resize', this.resize.bind( this ), false )
    document.body.addEventListener("mousemove", this.onMouseMove.bind(this), false);
    
    document.querySelector("a").addEventListener("mouseenter", () => {
      TweenMax.to(".ok", 0.6, { scale: 1.35 });
      this.animateIn();
    });

const now = Date.now()
    const delta = now - this.then

if( delta > this.fpsInterval ) {
      // this.scene.update()
      this.camera.position.x += this.mouse.x *(window.innerWidth * 0.02) - this.camera.position.x * 0.03;
    this.camera.position.y +=
      -(this.mouse.y * (window.innerHeight * 0.02)) - this.camera.position.y * 0.03;
    this.camera.lookAt(this.scene.position);
      
      this.renderer.render( this.scene, this.camera )
      this.then = now
    }
  }
  
  resize() {
//     this.innerWidth = window.innerWidth
//     this.innerHeight = window.innerHeight

//     this.camera.aspect = this.innerWidth / this.innerHeight
//     this.camera.updateProjectionMatrix()

//     this.renderer.setSize( this.innerWidth, this.innerHeight )
  }
}

const container = document.querySelector( '.home' )
let experience = new Experience( container, 400, 300 )

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