本帖最后由 你在意在便在 于 2019-11-7 22:27 编辑
坚持!~
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>圆阵</title>
- <style type="text/css">
- body{
- background: #000;
- margin: 200px;
- }
- .load{
- font-size: 33px;
- width: 1em;
- height: 1em;
- border-radius: 50%;
- /* background: red; */
- text-indent: -8888em;
- animation: flash .9s infinite linear;
- }
- @keyframes flash{
- 0% ,
- 100% {
- box-shadow:
- 0em -3em 0 .2em rgba(231,76,60,1),
- 2em -2em 0 0em rgba(230,126,34,1),
- 3em 0em 0 -.5em rgba(254,202,87,1),
- 2em 2em 0 -.5em rgba(76,209,55,1),
- 0em 3em 0 -.5em rgba(0,168,255,1),
- -2em 2em 0 -.5em rgba(140,122,230,1),
- -3em 0em 0 -.5em rgba(255,159,243,1),
- -2em -2em 0 0em rgba(72,84,96,1)
- }
- 12.5% {
- box-shadow:
- 0em -3em 0 0em rgba(231,76,60,1),
- 2em -2em 0 .2em rgba(230,126,34,1),
- 3em 0em 0 0em rgba(254,202,87,1),
- 2em 2em 0 -.5em rgba(76,209,55,1),
- 0em 3em 0 -.5em rgba(0,168,255,1),
- -2em 2em 0 -.5em rgba(140,122,230,1),
- -3em 0em 0 -.5em rgba(255,159,243,1),
- -2em -2em 0 -.5em rgba(72,84,96,1)
- }
- 25% {
- box-shadow:
- 0em -3em 0 -.5em rgba(231,76,60,1),
- 2em -2em 0 0em rgba(230,126,34,1),
- 3em 0em 0 .2em rgba(254,202,87,1),
- 2em 2em 0 0em rgba(76,209,55,1),
- 0em 3em 0 -.5em rgba(0,168,255,1),
- -2em 2em 0 -.5em rgba(140,122,230,1),
- -3em 0em 0 -.5em rgba(255,159,243,1),
- -2em -2em 0 -.5em rgba(72,84,96,1)
- }
- 37.5% {
- box-shadow:
- 0em -3em 0 -.5em rgba(231,76,60,1),
- 2em -2em 0 -.5em rgba(230,126,34,1),
- 3em 0em 0 0em rgba(254,202,87,1),
- 2em 2em 0 .2em rgba(76,209,55,1),
- 0em 3em 0 0em rgba(0,168,255,1),
- -2em 2em 0 -.5em rgba(140,122,230,1),
- -3em 0em 0 -.5em rgba(255,159,243,1),
- -2em -2em 0 -.5em rgba(72,84,96,1)
- }
- 50% {
- box-shadow:
- 0em -3em 0 -.5em rgba(231,76,60,1),
- 2em -2em 0 -.5em rgba(230,126,34,1),
- 3em 0em 0 -.5em rgba(254,202,87,1),
- 2em 2em 0 0em rgba(76,209,55,1),
- 0em 3em 0 .2em rgba(0,168,255,1),
- -2em 2em 0 0em rgba(140,122,230,1),
- -3em 0em 0 -.5em rgba(255,159,243,1),
- -2em -2em 0 -.5em rgba(72,84,96,1)
- }
- 62.5% {
- box-shadow:
- 0em -3em 0 -.5em rgba(231,76,60,1),
- 2em -2em 0 -.5em rgba(230,126,34,1),
- 3em 0em 0 -.5em rgba(254,202,87,1),
- 2em 2em 0 -.5em rgba(76,209,55,1),
- 0em 3em 0 0em rgba(0,168,255,1),
- -2em 2em 0 .2em rgba(140,122,230,1),
- -3em 0em 0 0em rgba(255,159,243,1),
- -2em -2em 0 -.5em rgba(72,84,96,1)
- }
- 75% {
- box-shadow:
- 0em -3em 0 -.5em rgba(231,76,60,1),
- 2em -2em 0 -.5em rgba(230,126,34,1),
- 3em 0em 0 -.5em rgba(254,202,87,1),
- 2em 2em 0 -.5em rgba(76,209,55,1),
- 0em 3em 0 -.5em rgba(0,168,255,1),
- -2em 2em 0 0em rgba(140,122,230,1),
- -3em 0em 0 .2em rgba(255,159,243,1),
- -2em -2em 0 0em rgba(72,84,96,1)
- }
- 87.5% {
- box-shadow:
- 0em -3em 0 0em rgba(231,76,60,1),
- 2em -2em 0 -.5em rgba(230,126,34,1),
- 3em 0em 0 -.5em rgba(254,202,87,1),
- 2em 2em 0 -.5em rgba(76,209,55,1),
- 0em 3em 0 -.5em rgba(0,168,255,1),
- -2em 2em 0 -.5em rgba(140,122,230,1),
- -3em 0em 0 0em rgba(255,159,243,1),
- -2em -2em 0 .2em rgba(72,84,96,1)
- }
- }
- </style>
- </head>
- <body>
- <div class="load">鱼C工作室</div>
- </body>
- </html>
复制代码 |