3D 旋转加载动画

下载代码

html

css

分享到微信朋友圈

html

css

html {
  font-size: 10px;
  background: #222;
  background: linear-gradient(to bottom, #222 0%, #000 100%);
}

body {
  font-family: "Titillium Web", sans-serif;overflow: hidden
}

@-webkit-keyframes enterAnimation {
  0% {
    transform: scale(0) translate3d(0, 0, 500px) rotateX(45deg);
  }
  100% {
    transform: scale(1) translate3d(0, 0, 0px) rotateX(0deg);
  }
}

@keyframes enterAnimation {
  0% {
    transform: scale(0) translate3d(0, 0, 500px) rotateX(45deg);
  }
  100% {
    transform: scale(1) translate3d(0, 0, 0px) rotateX(0deg);
  }
}
@-webkit-keyframes turnAnimation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
@keyframes turnAnimation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
@-webkit-keyframes bounceAnimation {
  0% {
    transform: translate3d(-50%, -50%, 0px);
  }
  100% {
    transform: translate3d(-50%, -50%, 50px);
  }
}
@keyframes bounceAnimation {
  0% {
    transform: translate3d(-50%, -50%, 0px);
  }
  100% {
    transform: translate3d(-50%, -50%, 50px);
  }
}
@-webkit-keyframes flickerAnimation {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes flickerAnimation {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.container {
  width: 300px;
  margin: 0 auto;
}

.inner-circle {
  width: 20em;
  height: 20em;
  border: 1px solid #ff6a13;
  border-radius: 20em;
}

.percentage {
  font-size: 4em;
  text-align: center;
  color: #fff;
  display: block;
  border: 1px solid #ff6a13;
  width: 3em;
  height: 3em;
  margin: 0 auto;
  border-radius: 3em;
  line-height: 3em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 50px);
}

.moving-counter {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 300;
  transform: rotate(0deg);
}
.moving-counter:after {
  content: "";
  display: block;
  position: absolute;
  width: 20px;
  height: 15px;
  background: white;
  top: 0;
  width: 4px;
  z-index: 1000;
  transform: translate3d(0, -400px, 180px);
}

.main-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 250ms all ease-out;
  transform-style: preserve-3d;
  perspective: 1000px;
}

.svg-container {
  position: relative;
  transform-style: preserve-3d;
  -webkit-animation: enterAnimation 2500ms forwards cubic-bezier(0, 0, 0.25, 1.125);
          animation: enterAnimation 2500ms forwards cubic-bezier(0, 0, 0.25, 1.125);
}

svg {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
}

rect, circle, path, polygon, circle, g {
  display: block;
  transform-origin: 50% 50%;
}

.loader-bg {
  opacity: 0.33;
  transform: translate3d(-50%, -50%, 50px);
}
.loader-bg path {
  animation: turnAnimation 10s reverse infinite linear;
}

.loader-main {
  opacity: 1;
  opacity: 0.33;
  transform: translate3d(-50%, -50%, 10px);
}

.outer-circle-1 {
  opacity: 0.25;
  opacity: 0.33;
  transform: translate3d(-50%, -50%, 100px);
}

.outer-circle-2 {
  transform: translate3d(-50%, -50%, 50px);
}
.outer-circle-2 path {
  -webkit-animation: turnAnimation 500s infinite linear;
          animation: turnAnimation 500s infinite linear;
}

.middle-circle {
  opacity: 0.5;
  -webkit-animation: bounceAnimation 1s alternate infinite linear;
          animation: bounceAnimation 1s alternate infinite linear;
}

.inner-circle {
  transform: translate3d(-50%, -50%, 25px);
}

.outer-triangles {
  opacity: 0.33;
  transform: translate3d(-50%, -50%, 200px);
}

.outer-triangles polygon,
.middle-doodads polygon {
  fill: #ffffff;
}
.outer-triangles rect,
.middle-doodads rect {
  opacity: 0.5;
  fill: #ffffff;
  -webkit-animation: flickerAnimation 5s ease-out alternate infinite;
          animation: flickerAnimation 5s ease-out alternate infinite;
}

.middle-dooodads {
  transform: translate3d(-50%, -50%, -50px);
}

JavaScript

// forked this code from mephysto.github.io
(function () {
  "use strict";
  var MEPHYSTO = MEPHYSTO || {
    // turnStrengthX: 20,
    turnStrengthX: -25,
    turnStrengthY: -20,
    sw : 0,
    sh : 0,
    mx : 0,
    my : 0,
    ox : 0,
    oy : 0,
    x : 0,
    y : 0,
    vx : 0,
    vy : 0,
    ax : 0,
    ay : 0,
    delay : 50,
    targetElement : {},
    init : function(){
      MEPHYSTO.targetElement = document.getElementsByClassName('main-container')[0];
      $( ".main-container" ).mousemove(MEPHYSTO.throttle(MEPHYSTO.onMouseMove, MEPHYSTO.delay));
    },
    // calculate tilting of landing card based on cursor location
    onMouseMove : function(e){
      MEPHYSTO.sw = window.innerWidth * 0.5;
      MEPHYSTO.sh = window.innerHeight * 0.5;
      MEPHYSTO.mx = e.clientX;
      MEPHYSTO.my = e.clientY;

MEPHYSTO.ox = Math.floor((MEPHYSTO.sw - MEPHYSTO.mx) / MEPHYSTO.sw*100) * -0.01;
      MEPHYSTO.oy = Math.floor((MEPHYSTO.sh - MEPHYSTO.my) / MEPHYSTO.sh*100) * 0.01;

MEPHYSTO.tiltLandingCard(MEPHYSTO.oy * MEPHYSTO.turnStrengthY, MEPHYSTO.ox * MEPHYSTO.turnStrengthX);
    },
    // tilt the landing card
    tiltLandingCard : function(_x, _y){
      MEPHYSTO.targetElement.style.webkitTransform = `rotateX(${_x}deg) rotateY(${_y}deg) translate3d(0,0,0px)`;
      MEPHYSTO.targetElement.style.MozTransform = `rotateX(${_x}deg) rotateY(${_y}deg) translate3d(0,0,0px)`;
    },
    // wait till events are done triggering before updating with callback
    debouncer: function(func, wait, immediate) {
      var timeout;
      return function() {
        var context = this, args = arguments;
        clearTimeout(timeout);
        timeout = setTimeout(function() {
          timeout = null;
          if (!immediate) func.apply(context, args);
        }, wait);
        if (immediate && !timeout) func.apply(context, args);
      };
    },

// limit the amount of calls being triggered per second
    throttle : function(fn, threshhold, scope) {
      threshhold || (threshhold = 250);
      var last,
          deferTimer;
      return function () {
        var context = scope || this;

$(document).ready(MEPHYSTO.init);
  // window.onload = MEPHYSTO.init;
  var percentage = 0,
      percText = document.getElementsByClassName('percentage')[0],
      percRect = document.getElementsByClassName('moving-counter')[0],
      percRectRotate = 0,
      myVar = setInterval(ticker, 1000);

function ticker() {
    percentage++;
    percRectRotate++;
    percentage = percentage > 100 ? 0 : percentage;
    percText.innerHTML = percentage + "%";
    percRect.style.transform = `rotate(${percRectRotate}deg)`;
  }
}());

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