<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .box{ width: 20px; height: 20px; position: absolute; top: 100px; left: 100px; } .box span{ position: absolute; width: 6px; height:10px; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.6)), color-stop(60%,rgba(0,0,0,0.1)),color-stop(100%,rgba(0,0,0,0.01))); animation: move 0.8s infinite linear; } .box span:nth-of-type(1){ left:0%; top: 0; margin-left: -3px; margin-top: -5px; transform: rotate(-45deg); animation-delay:-0.7s ; } .box span:nth-of-type(2){ left:50%; top: 0px; margin-left: -3px; margin-top: -10px; animation-delay:-0.6s ; } .box span:nth-of-type(3){ left:100%; top: 0px; margin-left: -3px; margin-top: -5px; transform: rotate(45deg); animation-delay:-0.5s ; } .box span:nth-of-type(4){ left:0%; top: 50%; margin-left: -9px; margin-top: -5px; transform: rotate(-90deg); animation-delay:-0.0s ; } .box span:nth-of-type(5){ left:100%; top: 50%; margin-left: 3px; margin-top: -5px; transform: rotate(90deg); animation-delay:-0.4s ; } .box span:nth-of-type(6){ left:0%; top: 100%; margin-left: -3px; margin-top: -5px; transform: rotate(-135deg); animation-delay:-0.1s ; } .box span:nth-of-type(7){ left:50%; top: 100%; margin-left: -5px; margin-top: 0px; transform: rotate(180deg); animation-delay:-0.2s ; } .box span:nth-of-type(8){ left:100%; top: 100%; margin-left: -3px; margin-top: -5px; transform: rotate(135deg); animation-delay:-0.3s ; } @-webkit-keyframes move{ 0%{ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.6)), color-stop(60%,rgba(0,0,0,0.1)),color-stop(100%,rgba(0,0,0,0.01))); } 87.5%{ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.6)), color-stop(60%,rgba(0,0,0,0.1)),color-stop(100%,rgba(0,0,0,0.01))); } 100%{ background: #fff; } } </style> </head> <body> <div class="box"> <span class="left-top"></span> <span class="middle-top"></span> <span class="right-top"></span> <span class="left-middle"></span> <span class="right-middle"></span> <span class="left-bottom"></span> <span class="middle-bottom"></span> <span class="right-bottom"></span> </div> <script> </script> </body> </html>
配色略丑