网站加载中样式loading..代码介绍

css代码：

body{
  background: #1b1d1f; 
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  padding:0; margin:0
}
.loader {
  --size:32px;
  --duration:800ms;
  width:32px;
  transform-style:preserve-3d;
  transform-origin:50% 50%;
  transform:rotateX(60deg) rotateZ(45deg) rotateY(0deg) translateZ(0px);
  position:relative
}
.loader .box {
  width:32px;
  height:32px;
  transform-style:preserve-3d;
  position:absolute;
  top:0;
  left:0
}
.loader .box:nth-child(1) {
  transform:translate(100%,0);
  animation:box1 800ms linear infinite
}
.loader .box:nth-child(2) {
  transform:translate(0,100%);
  animation:box2 800ms linear infinite
}
.loader .box:nth-child(3) {
  transform:translate(100%,100%);
  animation:box3 800ms linear infinite
}
.loader .box:nth-child(4) {
  transform:translate(200%,0);
  animation:box4 800ms linear infinite
}
.loader .box > div {
  --translateZ:calc(var(--size) / 2);
  --rotateY:0deg;
  --rotateX:0deg;
  background:#f65c5c;
  width:100%;
  height:100%;
  transform:rotateY(var(--rotateY)) rotateX(var(--rotateX)) translateZ(var(--translateZ));
  position:absolute;
  top:auto;
  right:auto;
  bottom:auto;
  left:auto
}
.loader .box > div:nth-child(1) {
  top:0;
  left:0
}
.loader .box > div:nth-child(2) {
  background:#f21414;
  right:0;
  --rotateY:90deg
}
.loader .box > div:nth-child(3) {
  background:#f54444;
  --rotateX:-90deg
}
.loader .box > div:nth-child(4) {
  background:rgba(165,100,100,.15);
  top:0;
  left:0;
  --translateZ:calc(var(--size) * 3 * -1)
}
@keyframes box1 {
  0%,50% {
    transform:translate(100%,0)
  }
  100% {
    transform:translate(200%,0)
  }
}
@keyframes box2 {
  0% {
    transform:translate(0,100%)
  }
  50% {
    transform:translate(0,0)
  }
  100% {
    transform:translate(100%,0)
  }
}
@keyframes box3 {
  0%,50% {
    transform:translate(100%,100%)
  }
  100% {
    transform:translate(0,100%)
  }
}
@keyframes box4 {
  0% {
    transform:translate(200%,0)
  }
  50% {
    transform:translate(200%,100%)
  }
  100% {
    transform:translate(100%,100%)
  }
}

html代码：

<div id="loading">
  <div class="loader">
  <div class="box">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="box">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="box">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="box">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  </div>
</div> 

点击查看效果

网站加载中loading..样式五代码介绍

网站加载中loading..样式四代码介绍

网站加载中loading..样式三代码介绍

网站加载中loading..样式二代码介绍

如何利用svg做一个有趣的loading动画加载

标签： css网站加载, loading

上面是“网站加载中样式loading..代码介绍”的全面内容，想了解更多关于 前端知识 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_13313.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！