html5 loading

時間 2019-11-13

標籤 html5 html loading 欄目 HTML5 简体版

原文原文鏈接

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。