css 3d蜂鸟

下载代码

html

css

分享到微信朋友圈

html

css

@import url("https://fonts.googleapis.com/css?family=Lora:700");
*, *:after, *:before {
  box-sizing: border-box;
  -webkit-backface-visibility: visible;
          backface-visibility: visible;
}

.wrapper {
  min-width: 100vw;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(-45deg, #111, #355);
  font-family: Lora, serif;
  overflow: hidden;
}

.hummingbird {
  margin-top: 50px;
  width: 200px;
  height: 200px;
  -webkit-perspective: 60rem;
          perspective: 60rem;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  transition: -webkit-transform 0.2s ease-out;
  transition: transform 0.2s ease-out;
  transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out;
  -webkit-transform-origin: center;
          transform-origin: center;
  pointer-events: none;
}
@media (max-width: 768px) {
  .hummingbird {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
}
.hummingbird .body {
  height: 100%;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
  -webkit-animation: rotate 15s linear infinite;
          animation: rotate 15s linear infinite;
}
@-webkit-keyframes rotate {
  100% {
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }
}
@keyframes rotate {
  100% {
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }
}
.hummingbird .body:before, .hummingbird .body:after {
  content: '';
  display: block;
  width: 70px;
  height: 100%;
  position: absolute;
  left: 50%;
  -webkit-transform-origin: top right;
          transform-origin: top right;
  background: linear-gradient(to bottom, rgba(119, 238, 180, 0.8), rgba(83, 169, 197, 0.8), transparent);
}
.hummingbird .body:before {
  -webkit-transform: rotateZ(30deg) rotateY(30deg);
          transform: rotateZ(30deg) rotateY(30deg);
  -webkit-clip-path: polygon(0 0, 100% 10%, 100% 100%);
          clip-path: polygon(0 0, 100% 10%, 100% 100%);
}
.hummingbird .body:after {
  -webkit-transform: rotateZ(30deg) rotateY(-30deg);
          transform: rotateZ(30deg) rotateY(-30deg);
  -webkit-clip-path: polygon(0 0, 100% 10%, 100% 100%);
          clip-path: polygon(0 0, 100% 10%, 100% 100%);
}
.hummingbird .body .back {
  width: 60px;
  height: 100%;
  position: absolute;
  background: linear-gradient(to bottom, rgba(119, 238, 180, 0.8), rgba(83, 169, 197, 0.8), transparent);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
          clip-path: polygon(0 0, 100% 0, 50% 100%);
  -webkit-transform: rotateY(90deg) rotateX(-13deg) translateZ(55px) translateY(-45px);
          transform: rotateY(90deg) rotateX(-13deg) translateZ(55px) translateY(-45px);
}
.hummingbird .body .wings {
  position: absolute;
  left: 35%;
  top: 40px;
  height: 100%;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.hummingbird .body .wings:before, .hummingbird .body .wings:after {
  content: '';
  display: block;
  width: 70px;
  height: 100%;
  position: absolute;
  left: 50%;
  top: -25px;
  -webkit-transform-origin: top center;
          transform-origin: top center;
  background: linear-gradient(to top, #d46f30, transparent);
}
.hummingbird .body .wings:before {
  -webkit-clip-path: polygon(100% 0, 100% 100%, 0 0);
          clip-path: polygon(100% 0, 100% 100%, 0 0);
  -webkit-animation: beating-left 2s ease-in-out infinite;
          animation: beating-left 2s ease-in-out infinite;
}
@-webkit-keyframes beating-left {
  0% {
    -webkit-transform: rotateZ(-75deg) rotateY(-10deg) translateZ(30px) rotateX(0deg);
            transform: rotateZ(-75deg) rotateY(-10deg) translateZ(30px) rotateX(0deg);
  }
  50% {
    -webkit-transform: rotateZ(-75deg) rotateY(-10deg) translateZ(30px) rotateX(180deg);
            transform: rotateZ(-75deg) rotateY(-10deg) translateZ(30px) rotateX(180deg);
  }
  100% {
    -webkit-transform: rotateZ(-75deg) rotateY(-10deg) translateZ(30px) rotateX(0deg);
            transform: rotateZ(-75deg) rotateY(-10deg) translateZ(30px) rotateX(0deg);
  }
}
@keyframes beating-left {
  0% {
    -webkit-transform: rotateZ(-75deg) rotateY(-10deg) translateZ(30px) rotateX(0deg);
            transform: rotateZ(-75deg) rotateY(-10deg) translateZ(30px) rotateX(0deg);
  }
  50% {
    -webkit-transform: rotateZ(-75deg) rotateY(-10deg) translateZ(30px) rotateX(180deg);
            transform: rotateZ(-75deg) rotateY(-10deg) translateZ(30px) rotateX(180deg);
  }
  100% {
    -webkit-transform: rotateZ(-75deg) rotateY(-10deg) translateZ(30px) rotateX(0deg);
            transform: rotateZ(-75deg) rotateY(-10deg) translateZ(30px) rotateX(0deg);
  }
}
.hummingbird .body .wings:after {
  -webkit-clip-path: polygon(100% 0, 100% 100%, 0 0);
          clip-path: polygon(100% 0, 100% 100%, 0 0);
  -webkit-animation: beating-right 2s ease-in-out infinite;
          animation: beating-right 2s ease-in-out infinite;
}
@-webkit-keyframes beating-right {
  0% {
    -webkit-transform: rotateZ(-75deg) rotateY(10deg) translateZ(-30px) rotateX(0deg);
            transform: rotateZ(-75deg) rotateY(10deg) translateZ(-30px) rotateX(0deg);
  }
  50% {
    -webkit-transform: rotateZ(-75deg) rotateY(10deg) translateZ(-30px) rotateX(-180deg);
            transform: rotateZ(-75deg) rotateY(10deg) translateZ(-30px) rotateX(-180deg);
  }
  100% {
    -webkit-transform: rotateZ(-75deg) rotateY(10deg) translateZ(-30px) rotateX(0deg);
            transform: rotateZ(-75deg) rotateY(10deg) translateZ(-30px) rotateX(0deg);
  }
}
@keyframes beating-right {
  0% {
    -webkit-transform: rotateZ(-75deg) rotateY(10deg) translateZ(-30px) rotateX(0deg);
            transform: rotateZ(-75deg) rotateY(10deg) translateZ(-30px) rotateX(0deg);
  }
  50% {
    -webkit-transform: rotateZ(-75deg) rotateY(10deg) translateZ(-30px) rotateX(-180deg);
            transform: rotateZ(-75deg) rotateY(10deg) translateZ(-30px) rotateX(-180deg);
  }
  100% {
    -webkit-transform: rotateZ(-75deg) rotateY(10deg) translateZ(-30px) rotateX(0deg);
            transform: rotateZ(-75deg) rotateY(10deg) translateZ(-30px) rotateX(0deg);
  }
}
.hummingbird .body .head:before, .hummingbird .body .head:after {
  content: '';
  display: block;
  width: 50px;
  height: 30%;
  position: absolute;
  left: 55%;
  top: -45px;
  -webkit-transform-origin: top right;
          transform-origin: top right;
  background: linear-gradient(to bottom, #77eeb4, transparent);
}
.hummingbird .body .head:before {
  -webkit-transform: rotateZ(0deg) rotateY(40deg);
          transform: rotateZ(0deg) rotateY(40deg);
  -webkit-clip-path: polygon(0 20%, 100% 0, 100% 100%);
          clip-path: polygon(0 20%, 100% 0, 100% 100%);
}
.hummingbird .body .head:after {
  -webkit-transform: rotateZ(0deg) rotateY(-40deg);
          transform: rotateZ(0deg) rotateY(-40deg);
  -webkit-clip-path: polygon(0 20%, 100% 0, 100% 100%);
          clip-path: polygon(0 20%, 100% 0, 100% 100%);
}
.hummingbird .body .head .nape:after {
  content: '';
  display: block;
  width: 50px;
  height: 35px;
  position: absolute;
  top: 0%;
  background: linear-gradient(to bottom, rgba(119, 238, 180, 0.8), rgba(83, 169, 197, 0.8), transparent);
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
          clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  -webkit-transform: rotateY(90deg) rotateX(-73deg) translateZ(-37px) translateY(-110px);
          transform: rotateY(90deg) rotateX(-73deg) translateZ(-37px) translateY(-110px);
}
.hummingbird .body .head .beak:before, .hummingbird .body .head .beak:after {
  content: '';
  display: block;
  width: 10px;
  height: 60%;
  position: absolute;
  left: 75%;
  top: -45px;
  -webkit-transform-origin: top right;
          transform-origin: top right;
  background: linear-gradient(to top, #d1c6da, transparent);
}
.hummingbird .body .head .beak:before {
  -webkit-transform: rotateZ(-105deg) rotateY(25deg);
          transform: rotateZ(-105deg) rotateY(25deg);
  -webkit-clip-path: polygon(0 0, 100% 1%, 100% 100%);
          clip-path: polygon(0 0, 100% 1%, 100% 100%);
}
.hummingbird .body .head .beak:after {
  -webkit-transform: rotateZ(-105deg) rotateY(-25deg);
          transform: rotateZ(-105deg) rotateY(-25deg);
  -webkit-clip-path: polygon(0 0, 100% 1%, 100% 100%);
          clip-path: polygon(0 0, 100% 1%, 100% 100%);
}
.hummingbird .platform {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  position: absolute;
  bottom: 0px;
  -webkit-transform: rotateX(90deg) translateZ(-100px);
          transform: rotateX(90deg) translateZ(-100px);
  color: #FFF;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 8px dashed #53a9c5;
  box-shadow: 0 0 50px 0px #53a9c5;
  font-weight: bold;
}

.title {
  color: #FFF;
  position: absolute;
  font-family: serif;
  font-size: 2.8rem;
  bottom: 10%;
  pointer-events: none;
}

JavaScript

// Fun factor. lower is funnier.
let customFactor = 4;

document.addEventListener("DOMContentLoaded", function() {
  // the magic box
  const wrapper = document.querySelector('.wrapper');
  const box = document.querySelector('.js-3dbox');

// vars
  const perspective = "60rem";
  let factor = customFactor ? customFactor : 10; // less is more
  
  init3dEffect(wrapper, box);

function init3dEffect(elController, elAffected) {
    elController.addEventListener('mousemove', e => {
      x = ((elController.offsetWidth / 2) - e.offsetX) / factor;
      y = ((elController.offsetHeight / 2) - e.offsetY) / -factor;

elAffected.style.transform =
        `perspective(${perspective}) rotateY(${x}deg) rotateX(${y}deg) translateZ(0)`;
    });

elController.addEventListener('mouseout', () => {
      elAffected.style.transform = "perspective("+perspective+")";
    });
    
    // Mobile shit
    var lastX = 0;
    var lastY = 0;
    
    var diffX = 0;
    var diffY = 0;
    
    elController.addEventListener('touchmove', e => {
      // var rect = e.target.getBoundingClientRect();
      // var x = e.targetTouches[0].pageX / factor;
      // var y = e.targetTouches[0].pageY / -factor;
      
      // x = ((elController.offsetWidth / 2) - e.targetTouches[0].pageX) / factor;
      // y = ((elController.offsetHeight / 2) - e.targetTouches[0].pageY) / -factor;
      
      var x = (e.targetTouches[0].pageX - lastX) / -factor;
      var y = (e.targetTouches[0].pageY - lastY) / -factor;
      
      diffX += x;
      diffY += y;
      
      lastX = e.targetTouches[0].pageX;
      lastY = e.targetTouches[0].pageY;

elAffected.style.transform =
        `perspective(${perspective}) rotateY(${-diffX}deg) rotateX(${-diffY}deg) translateZ(0)`;
    });

// elController.addEventListener('touchend', () => {
    //   elAffected.style.transform = "perspective("+perspective+")";
    // });
  }
});

customFactor = 8;

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