div+css四边形线框嵌套旋转动画背景效果代码-html代码-BFW代码库

div+css四边形线框嵌套旋转动画背景效果代码

代码语言：html

所属分类：背景

代码描述：div+css四边形线框嵌套旋转动画背景效果代码

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

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

<head>
  <meta charset="UTF-8">
  
  
  
  
  
<style>
* {
  box-sizing: border-box;
}
body {
  background-color: #50008a;
  box-shadow:0 0 20vmin rgba(0,0,0,0.35) inset
}
.sq { 
    width: 100%;
  height: 100%;   
    top: 50%;
  left: 50%;
  position:absolute;
transform:translate(-50%,-50%) rotate(45deg);
animation:6s R45 ease-in-out infinite;
}
@keyframes R45 {
  0%,100% {transform:translate(-50%,-50%) rotate(50deg);}
  50% {transform:translate(-50%,-50%) rotate(40deg);}

}
.sq:before, .sq:after {
  display:block;
  content:'';
  width: 100%;
  height: 100%;
  background-color: #50008a;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
  clip-path: polygon(2% 2%, 98% 2%, 98% 98%, 2% 98%);  
  z-index: 2;
  animation:6s R25 ease-in-out infinite; 
}
.sq:nth-of-type(3n):before, .sq:nth-of-type(3n):after  {animation:6s R25R ease-in-out infinite; }
@keyframes R25 {
  0%,100% {transform:translate(-50%,-50%) rotate(-2.5deg);}
  33%,66% {transform:translate(-50%,-50%) rotate(2.5deg);}
}
@keyframes R25R {
  0%,100% {transform:translate(-50%,-50%) rotate(2.5deg);}
  33%,66% {transform:translate(-50%,-50%) rotate(-2.5deg);}
}
.sq:after {width:calc(100% + 3%); height:calc(100% + 3%); background-color: #fd00fd;z-index: 1;
animation-delay:.25s
}

.squares {
  position: fixed;
  width: 100vmin;
  height: 100vmin;
  top: 50%;
  left: 50%;
  margin: -50vmin 0 0 -50vmin;
}
.sq01 {height:5vmin ;width:5vmin  ;animation-delay:-.2s; z-index:30  }
.sq02 {height:20vmin ;width:20vmin  ;animation-delay:-.4s; z-index:28  }
.sq03 {height:30vmin ;width:30vmin  ;animation-delay:-.6s; z-index:26  }
.sq04 {height:40vmin ;.........完整代码请登录后点击上方下载按钮下载查看