css3加載spinner

時間 2019-12-12

標籤 css3 css 加載 spinner 欄目 CSS 简体版

原文原文鏈接

使用代碼製做一個加載旋轉器spinnercss

實現的原理是：html

1.兩個圓圈，其中一個圓圈是使用pseudo元素（：before）產生css3

2.由pseudo元素生成的圓經過負數的z-index而做用在下面web

3.由pseudo元素生成的圓圈有內置的陰影inset box-shadowide

4.普通的圓圈有普通的陰影 regular box-shadow動畫

5.「loading」是有overflow：hidden的strong標籤url

5.strong標籤的長度由keyframe設置成動畫，無限的revealspa

6.文本經過line-height等於height的方法來垂直居中firefox

7.旋轉器是一個三角性，放在普通圓圈下面，以及放在由pseudo元素生成的圓圈的上面。code

8.三角形經過keyframe設置成從0到360度無限旋轉的動畫。

理想狀態下，三角形也應該設置成由pseudo元素生成，可是不幸的是到目前爲止pseudo元素不支持動畫。firefox能夠transition它們，可是不能經過keyframe來設置動畫（至少到目前爲止不能夠）。

效果圖地址：https://css-tricks.com/examples/Loading/

html：

<!DOCTYPE html>
<html>

<head>
    <meta charset='UTF-8'>
    
    <title>Loading Thingy (WebKit)</title>
    
    <link rel='stylesheet' href='css/style.css'>

    <style>
        #loading {
            margin: 80px auto;
            position: relative;
            width: 100px;
            height: 100px;
            -webkit-border-radius: 50px;
               -moz-border-radius: 50px;
                    border-radius: 50px;
            background: #ccc;
            font: 12px "Lucida Grande", Sans-Serif;
            text-align: center;
            line-height: 100px;
            color: white;
            -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5);
            -moz-box-shadow: 0 0 5px rgba(0,0,0,0.5);
            box-shadow: 0 0 5px rgba(0,0,0,0.5);
            
        }
        #loading:before {
            content: "";
            position: absolute;
              left: -20px;
               top: -20px;
            bottom: -20px;
             right: -20px;
            -webkit-border-radius: 70px;
               -moz-border-radius: 70px;
                    border-radius: 70px;
            background: #eee;
            z-index: -2;
            -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
            -moz-box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
            box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
        }
        #loading span {
            position: absolute;
            width: 0;
            height: 0;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-top: 80px solid rgba(255,255,255,0.7);
            z-index: -1;
            top: -28px;
            left: 0px;
            -webkit-animation: ticktock 5s linear infinite;
            -webkit-transform-origin: 50px 80px;
        }
        #loading strong {
            overflow: hidden;
            display: block;
            margin: 0 auto;
            -webkit-animation: expand 2.5s linear infinite;
        }
        
        @-webkit-keyframes expand {
            0% {
                    width: 0;
            }
            100% {
                    width: 60px;
            }
        }
        
        @-webkit-keyframes ticktock {
            0% {
                    -webkit-transform: rotate(0);
            }
            100% {
                    -webkit-transform: rotate(360deg);
            }
        }
        
    </style>

</head>

<body>
  
<div id="demo-top-bar">

  <div id="demo-bar-inside">

    <h2 id="demo-bar-badge">
      <a href="/">CSS-Tricks Example</a>
    </h2>

    <div id="demo-bar-buttons">
          </div>

  </div>

</div>
    <div id="page-wrap">
    
        <div id="loading"><strong>loading...</strong><span></span></div>
    
    </div>
    
 <style type="text/css" style="display: none !important;">
    * {
        margin: 0;
        padding: 0;
    }
    body {
        overflow-x: hidden;
    }
    #demo-top-bar {
        text-align: left;
        background: #222;
        position: relative;
        zoom: 1;
        width: 100% !important;
        z-index: 6000;
        padding: 20px 0 20px;
    }
    #demo-bar-inside {
        width: 960px;
        margin: 0 auto;
        position: relative;
        overflow: hidden;
    }
    #demo-bar-buttons {
        padding-top: 10px;
        float: right;
    }
    #demo-bar-buttons a {
        font-size: 12px;
        margin-left: 20px;
        color: white;
        margin: 2px 0;
        text-decoration: none;
        font: 14px "Lucida Grande", Sans-Serif !important;
    }
    #demo-bar-buttons a:hover,
    #demo-bar-buttons a:focus {
        text-decoration: underline;
    }
    #demo-bar-badge {
        display: inline-block;
        width: 302px;
        padding: 0 !important;
        margin: 0 !important;
        background-color: transparent !important;
    }
    #demo-bar-badge a {
        display: block;
        width: 100%;
        height: 38px;
        border-radius: 0;
        bottom: auto;
        margin: 0;
        background: url(/images/examples-logo.png) no-repeat;
        background-size: 100%;
        overflow: hidden;
        text-indent: -9999px;
    }
    #demo-bar-badge:before, #demo-bar-badge:after {
        display: none !important;
    }
</style>
</body>

</html>

css：

/*
     CSS-Tricks Example
     by Chris Coyier
     http://css-tricks.com
*/

* { margin: 0; padding: 0; }
body { font: 14px Georgia, serif; }

article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }

#page-wrap { width: 960px; margin: 150px auto; }

原文：https://css-tricks.com/css3-loading-spinner/

相關標籤/搜索

每日一句

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