html5 loading

最新推荐文章于 2023-09-29 12:26:44 发布

weixin_33778778

最新推荐文章于 2023-09-29 12:26:44 发布

阅读量99

点赞数

文章标签： python

原文链接：https://my.oschina.net/u/2558710/blog/727416

版权

2019独角兽企业重金招聘Python工程师标准>>>

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style type="text/css">

        .loading {
            width: 3px; height:3px;
            border-radius: 100%;                      /* 圆角 */
            box-shadow: 0 -10px 0 1px #333,           /* 上, 1px 扩展 */
            10px 0px #333,                /* 右 */
            0 10px #333,                  /* 下 */
            -10px 0 #333,                 /* 左 */

            -7px -7px 0 .5px #333,        /* 左上, 0.5px扩展 */
            7px -7px 0 1.5px #333,        /* 右上, 1.5px扩展 */
            7px 7px #333,                 /* 右下 */
            -7px 7px #333;                /* 左下 */
        }
        .spin {
            -webkit-transform: rotate(360deg);
            -webkit-animation: spin 1s linear infinite;
        }
        @-webkit-keyframes spin {
            from {-webkit-transform: rotate(0deg);}
            to {-webkit-transform: rotate(360deg);}
        }
        .spin {
            transform: rotate(360deg);
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            from {transform: rotate(0deg);}
            to {transform: rotate(360deg);}
        }

    </style>
</head>

<body>
<div style="padding:30px;">
    <div class="loading spin"></div>
</div>
</body>
</html>

转载于:https://my.oschina.net/u/2558710/blog/727416