<!DOCTYPE html>

 <html>

 <head>

  <metacharset="UTF-8">

  <title>Document</title>

  <styletype="text/css">

  /*css document*/

body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,p,input,select,textarea,form{margin: 0; padding: 0;}

body{font:14px/1.5 "宋体";}

img{border:none;}

ul,ol{list-style:none;}

input,select,textarea{outline:none;border:none;background:none;}

textarea{resize:none;}

a{text-decoration:none;display:block;}

@keyframes rond {

 0% {transform : rotate(0deg);}

 100% {transform : rotate(360deg);}

}

.div_all{

width: 800px;

height: 800px;

position: absolute;

top: 220px;

left: 600px;

}

.div1{

width: 200px;

height:200px;

border-radius: 50%;

background-color: radial-gradient(circle, #00FFC4, #00F7FF,#00CEFF,#0F00FF);

}

.div2{

width: 150px;

height:150px;

border-radius: 50%;

background-color: radial-gradient(circle, #FFF200, #B4FF00,#FFFFFF);

position: absolute;

top: 25px;

left: 25px;

}

.div3{

width: 100px;

height:100px;

border-radius: 50%;

background:radial-gradient(circle, #f00, #ff0, #080);

position: absolute;

top: 25px;

left: 25px;

animation-iteration-count: infinite; /*无限播放*/

animation-timing-function: linear;

}

.div4{

width: 20px;

height: 200px;

background-color: #F6E50C;

position: absolute;

top: 150px;

left: 90px;

z-index: -1;

}

  </style>

 </head>

 <body>

 <div>

  <div></div>

  <div><div><div></div></div></div>

 </div>

 </body>

 </html>