<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit" />
<meta name="force-rendering" content="webkit" />
<title></title>
</head>
<style>
body {display: flex;justify-content: center;align-items: center; height: 100vh; overflow: hidden;background-color: #000;}
#timer{display:grid;grid-template-columns:repeat(3,25px);grid-template-rows:repeat(5,25px);gap:10px;position:absolute;grid-template-areas:"div1 div2 div3" "div4 div5 div6" "div7 div8 div9" "div10 div11 div12" "div13 div14 div15";}#div1,#div2,#div3,#div4,#div5,#div6,#div7,#div8,#div9,#div10,#div11,#div12,#div13,#div14,#div15{background-color:rgb(243,243,243);border-radius:5px;}#div1{grid-area:div1;animation:div1 10s both infinite;}@keyframes div1{0%{transform:translateX(0);}10%{transform:translateX(70px);}20%{transform:translateX(0);}30%{transform:translateX(0);}40%{transform:translateX(0);}50%{transform:translateX(0);}60%{transform:translateX(0);}70%{transform:translateX(0);}80%{transform:translateX(0);}90%{transform:translateX(0);}100%{transform:translateX(0);}}#div2{grid-area:div2;animation:div2 10s both infinite;}@keyframes div2{0%{transform:translateX(0);}10%{transform:translateX(35px);}20%{transform:translateX(0);}30%{transform:translateX(0);}40%{transform:translateX(35px);}50%{transform:translateX(0);}60%{transform:translateX(0);}70%{transform:translateX(0);}80%{transform:translateX(0);}90%{transform:translateX(0);}100%{transform:translateX(0);}}#div3{grid-area:div3;}#div4{grid-area:div4;animation:div4 10s both infinite;}@keyframes div4{0%{transform:translateX(0);}10%{transform:translateX(70px);}20%{transform:translateX(70px);}30%{transform:translateX(70px);}40%{transform:translateX(0);}50%{transform:translateX(0);}60%{transform:translateX(0);}70%{transform:translateX(70px);}80%{transform:translateX(0);}90%{transform:translateX(0);}100%{transform:translateX(0);}}#div5{grid-area:div5;display:none;}#div6{grid-area:div6;animation:div6 10s both infinite;}@keyframes div6{0%{transform:translateX(0);}10%{transform:translateX(0);}20%{transform:translateX(0);}30%{transform:translateX(0);}40%{transform:translateX(0);}50%{transform:translateX(-70px);}60%{transform:translateX(-70px);}70%{transform:translateX(0);}80%{transform:translateX(0);}90%{transform:translateX(0);}100%{transform:translateX(0);}}#div7{grid-area:div7;animation:div7 10s both infinite;}@keyframes div7{0%{transform:translateX(0);}10%{transform:translateX(70px);}20%{transform:translateX(0);}30%{transform:translateX(0);}40%{transform:translateX(0);}50%{transform:translateX(0);}60%{transform:translateX(0);}70%{transform:translateX(70px);}80%{transform:translateX(0);}90%{transform:translateX(0);}100%{transform:translateX(0);}}#div8{grid-area:div8;animation:div8 10s both infinite;}@keyframes div8{0%{transform:translateX(35px);}10%{transform:translateX(35px);}20%{transform:translateX(0);}30%{transform:translateX(0);}40%{transform:translateX(0);}50%{transform:translateX(0);}60%{transform:translateX(0);}70%{transform:translateX(35px);}80%{transform:translateX(0);}90%{transform:translateX(0);}100%{transform:translateX(35px);}}#div9{grid-area:div9;}#div10{grid-area:div10;animation:div10 10s both infinite;}@keyframes div10{0%{transform:translateX(0);}10%{transform:translateX(70px);}20%{transform:translateX(0);}30%{transform:translateX(70px);}40%{transform:translateX(70px);}50%{transform:translateX(70px);}60%{transform:translateX(0);}70%{transform:translateX(70px);}80%{transform:translateX(0);}90%{transform:translateX(70px);}100%{transform:translateX(0);}}#div11{grid-area:div11;display:none;}#div12{grid-area:div12;animation:div12 10s both infinite;}@keyframes div12{0%{transform:translateX(0);}10%{transform:translateX(0);}20%{transform:translateX(-70px);}30%{transform:translateX(0);}40%{transform:translateX(0);}50%{transform:translateX(0);}60%{transform:translateX(0);}70%{transform:translateX(0);}80%{transform:translateX(0);}90%{transform:translateX(0);}100%{transform:translateX(0);}}#div13{grid-area:div13;animation:div13 10s both infinite;}@keyframes div13{0%{transform:translateX(0);}10%{transform:translateX(70px);}20%{transform:translateX(0);}30%{transform:translateX(0);}40%{transform:translateX(70px);}50%{transform:translateX(0);}60%{transform:translateX(0);}70%{transform:translateX(70px);}80%{transform:translateX(0);}90%{transform:translateX(0);}100%{transform:translateX(0);}}#div14{grid-area:div14;animation:div14 10s both infinite;}@keyframes div14{0%{transform:translateX(0);}10%{transform:translateX(35px);}20%{transform:translateX(0);}30%{transform:translateX(0);}40%{transform:translateX(35px);}50%{transform:translateX(0);}60%{transform:translateX(0);}70%{transform:translateX(35px);}80%{transform:translateX(0);}90%{transform:translateX(0);}100%{transform:translateX(0);}}#div15{grid-area:div15;}
</style>
<body>
<div id="timer">
<div id="div1"></div><div id="div2"></div><div id="div3"></div><div id="div4"></div><div id="div5"></div><div id="div6"></div><div id="div7"></div><div id="div8"></div><div id="div9"></div><div id="div10"></div><div id="div11"></div><div id="div12"></div><div id="div13"></div><div id="div14"></div><div id="div15"></div>
</div>
</body>
<script></script>
</html>
