<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0; } .wrap{ position: relative; 100px; height: 100px; margin:100px auto; /*transform: rotateZ(45deg);*/ /*-webkit-transform: rotateZ(45deg);*/ } .box{ position: absolute; 100px; height: 100px; background:#ccc; left: 0; bottom: 0; border-top-right-radius: 100px; transform: rotateZ(45deg); -webkit-transform: rotateZ(45deg); animation:obox linear 1s 5000; } @keyframes obox{ 0%{background:#ccc;} 33%{background:#ccc;} 66%{background:#fff;} 100%{background:#ccc;} } @-webkit-keyframes obox{ 0%{background:#ccc;} 33%{background:#ccc;} 66%{background:#fff;} 100%{background:#ccc;} } .box1{ 80px; height: 80px; background-color: white; position: absolute; left: 0; bottom:0px; border-top-right-radius: 100px; } .box2{ 60px; height: 60px; background:#ccc; position: absolute; left: 0; bottom:0px; border-top-right-radius: 100px; animation:obox2 linear 1s 5000; } @keyframes obox2{ 0%{background:#ccc;} 33%{background:#fff;} 66%{background:#ccc;} 100%{background:#ccc;} } @-webkit-keyframes obox2{ 0%{background:#ccc;} 33%{background:#ccc;} 66%{background:#fff;} 100%{background:#ccc;} } .box3{ 40px; height: 40px; background-color: white; position: absolute; left: 0; bottom:0px; border-top-right-radius: 100px; } .box4{ 20px; height: 20px; background:#ccc; position: absolute; left: 0; bottom: 0px; border-top-right-radius: 100px; } </style> </head> <body> <div class="wrap"> <div class="box"> <div class="box1"> <div class="box2"> <div class="box3"> <div class="box4"> </div> </div> </div> </div> </div> </div> </body> </html>