css3动画-4点唤醒

来源：互联网发布：财务d6软件好不好编辑：程序博客网时间：2024/06/05 20:32
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        body{            background: #000;        }        .load{            font-size: 33px;            width: 1em;            height: 1em;            border-radius: 50%;            position: relative;            text-indent: -8888em;            /*box-shadow: 3em 2em 0 1.5em #FFF,6em 2em 0 0 #FFF,9em 2em 0 -0.01em #FFF;*/            animation: aa 0.99s infinite linear;        }        @keyframes aa {            0% {                box-shadow: 3em 2em 0 1em #FCC, 6em 2em 0 0.5em #9F9, 9em 2em 0 0 #CCF, 12em 2em 0 -0.5em #F7F;            }            25% {                box-shadow: 3em 2em 0 0.5em #FCC, 6em 2em 0 0 #9F9, 9em 2em 0 -0.5em #CCF, 12em 2em 0 1em #F7F;            }            50% {                box-shadow: 3em 2em 0 0 #FCC, 6em 2em 0 -0.5em #9F9, 9em 2em 0 1em #CCF, 12em 2em 0 0.5em #F7F;            }            75% {                box-shadow: 3em 2em 0 -0.5em #FCC, 6em 2em 0 1em #9F9, 9em 2em 0 0.5em #CCF, 12em 2em 0 0 #F7F;            }            100% {                box-shadow: 3em 2em 0 1em #FCC, 6em 2em 0 0.5em #9F9, 9em 2em 0 0 #CCF, 12em 2em 0 -0.5em #F7F;            }        }    </style></head><body>    <div class="load">        Loading    </div></body></html>
阅读全文
0 0