div+css实现立体多层圈圈转动动画效果代码-html代码-BFW代码库

div+css实现立体多层圈圈转动动画效果代码

代码语言：html

所属分类：动画

代码描述：div+css实现立体多层圈圈转动动画效果代码

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />

     <style>
     body{
         background: black;
         padding: 100px;
     }
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
button {
  font-family: inherit;
}

/* The loader container */
.loader {
  width: 200px;
  height: 200px;
  perspective: 200px;
}


/* The dot */
.dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  margin-top: -60px;
  margin-left: -60px;
  border-radius: 100px;
  border: 40px outset #1e3f57;
  transform-origin: 50% 50%;
  transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px);
  background-color: transparent;
  animation: dot1 1000ms cubic-bezier(.49,.06,.43,.85) infinite;
}

.dot:nth-child(2) {
  width: 140px;
  height: 140px;
  margin-top: -70px;
  margin-left: -70px;
  border-width: 30px;
  border-color: #447891;
  animation-name: dot2;
  animation-delay: 75ms;
  box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.1);
  transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px);
}

.dot:nth-child(3) {
  width: 160px;
  height: 160px;
  margin-top: -80px;
  margin-left: -80px;
  border-width: 20px;
  border-color: #6bb2cd;
  animation-name: dot3;
  animation-delay: 150ms;
  box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.1);
  transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px);
}

@keyframes dot1 {
  0% {
    border-color: #1e3f57;
    transform: rotateX(24de.........完整代码请登录后点击上方下载按钮下载查看