原生js实现横竖平面及三维loading加载动画效果代码-html代码-BFW代码库

原生js实现横竖平面及三维loading加载动画效果代码

代码语言：html

代码描述：原生js实现横竖平面及三维loading加载动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
html {
  height: 100%;
}
body {
  height: 100%;
  margin: 0;
  padding: 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-image: -moz-radial-gradient(center, ellipse cover, #106590 0%, #123368 100%);
  background-image: -webkit-radial-gradient(center, ellipse cover, #106590 0%, #123368 100%);
  background-image: -o-radial-gradient(center, ellipse cover, #106590 0%, #123368 100%);
  background-image: -ms-radial-gradient(center, ellipse cover, #106590 0%, #123368 100%);
  background-image: radial-gradient(center, ellipse cover, #106590 0%, #123368 100%);
}
#container {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transition: transform 1s ease-in-out;
  -moz-transition: transform 1s ease-in-out;
  -o-transition: transform 1s ease-in-out;
  transition: transform 1s ease-in-out;
  -webkit-transform-style: preserve-3d;
}
#container #box {
  -webkit-transition: transform 1.5s ease-in-out;
  -moz-transition: transform 1.5s ease-in-out;
  -o-transition: transform 1.5s ease-in-out;
  transition: transform 1.5s ease-in-out;
  -webkit-transform-style: preserve-3d;
}
#container #box.three-d {
  transform: rotateX(45deg) rotateZ(45deg);
}
#container #box #bg {
  margin-left: -50px;
  position: absolute;
  -webkit-transition: all 0.15s ease-in-out;
  -moz-transition: all 0.15s ease-in-out;
  -o-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}
#container #box #bg .bg {
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.5);
  -webkit-transition: all 0.15s ease-in-out;
  -moz-transition: all 0.15s ease-in-out;
  -o-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
  transform-origin: 0 0;
}
#container #box #bg #bg_bottom {
  height: 10px;
  width: 100px;
}
#container #box #bg #bg_left,
#container #box #bg #bg_right {
  width: 250px;
  height: 100px;
}
#container #box #bg #bg_left {
  background: rgba(0,0,0,0.8);
  transform: rotateX(90deg) rotateY(90deg);
}
#container #box #bg #bg_right {
  background: rgba(0,0,0,0.6);
  transform: rotateX(90deg);
}
#container #box #bg #bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 6px;
  width: 0px;
}
#container #box #bg #bar .bar {
  position: absolute;
  -webkit-transition: all 0.15s ease-out;
  -moz-transition: all 0.15s ease-out;
  -o-transition: all 0.15s ease-out;
  transition: all 0.15s ease-out;
  transform-origin: 0 0;
}
#container #box #bg #bar #bar_top {
  background: rgba(255,255,255,0.6);
  transform: translateX(1px) translateY(1px);
  height: 6px;
}
#container #box #bg #bar #bar_left {
  background: rgba(255,255,255,0.3);
  transform: translateY(246px) rotateX(90deg);
  width: 246px;
}
#container #box #bg #bar #bar_right {
  background: rgba(255,255,255,0.4);
  transform: translateX(246px) rotateX(90deg) rotateY(90deg);
  width: 246px;
}
</style>



</head>

<body translate="no" >
  

  
  
      <script>
// this code is not battle hardened production ready anything, ignore that sour taste in the back of your throat.

var d = 'x',c = 0,s = 100,m = 250,grid = 4,boxes = grid * grid,loaders = [],activeIndex = 0;

var container, box, bg, bg_left, bg_right, bg_bottom, bar, bar_left, bar_right, bar_top;

function createBox(visible) {
  function el(id, className) {
    var d = document.createElement("div");
    d.id = id;
    if (className) d.className = className;
    ret.........完整代码请登录后点击上方下载按钮下载查看