CSS3實現的幾個小loading效果

阿新 • • 發佈：2018-09-27

css linear 1.2 普通 dong 500px 交叉 yellow index

　　　　昨晚上閑的沒事突然想做幾個小loading效果，下面是昨晚上做的幾個小案例，分享給大家

　　　　1.水波loading：這個loading是我覺得非常簡單，但是看上去的效果卻非常不錯的一個小loading

　　　　技術分享圖片這個是效果圖片

　　　　下面我直接把代碼放上來，大家需要的可以直接拉走

核心思想：（旋轉，以及overflow:hidden屬性），可以把代碼中的overflow屬性註釋掉，保準你看一眼明白了，看不明白回來找我，我對你負責

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *  
{
            margin: 0;
            padding: 0
        }
        body {
            background-color: black
        }
        .box {
            margin: 200px auto;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background-color: rgb(0, 174, 255);
            position 
: relative;
            overflow: hidden;
            border: 1px solid rgb(0, 174, 255);
            border-top: none;
        }
        .a {
            width: 200px;
            height: 200px;
           background: black;
            position: absolute;
            left: -80px;
            top: -180px;
            border-radius 
: 80px;
            animation: xuanzhuan 5s linear infinite;
            z-index: 2
        }
        @keyframes xuanzhuan{
            0%{transform: rotate(0deg)}
            100%{transform: rotate(360deg)}
        }

    </style>
</head>

<body>
    <div class="box">
        <div class="a"></div>
        <div class="b"></div>
    </div>
</body>

</html>

　　2.普通的圓形loading 這個也很簡單沒啥好說的，直接上代碼了

　　技術分享圖片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    *{margin: 0;padding: 0}
    li{list-style: none}
    body,html{
        background-color: black;
    }
    ul{
        height: 40px;
        width: 200px;
        margin: 50px auto;
    }
    ul>li{
        float: left;
        height: 20px;
        width: 20px;
        border-radius: 50%;
        background: white;
        margin-left: 10px;
        animation: move 2s infinite alternate;
        transform: scale(0.5)
    }
    ul>li:nth-of-type(2){
        animation-delay: 0.5s;
    }
    ul>li:nth-of-type(3){
        animation-delay:1s;
    }

    @keyframes move{
        0%{transform: scale(0.5);opacity: 0.5}
        100%{transform: scale(1);opacity: 1;}
    }
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>

</body>
</html>

　　3.圓形轉圈loading

　　思想（把小圓用定位排成圓形，再給每個上添加動畫，用delay控制延遲事件即可）

　　技術分享圖片

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <style>
        *{
            margin: 0;
            padding: 0;
            
        }
        .d1{
            width: 50px;
            height: 50px;
            position: absolute;
            margin: 100px;
        }
        .d1 p{
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: red;
            position: absolute;
            animation: dong 1.5s linear infinite;
        }
        .d1 p:nth-child(1){
            top: 0;
            left: 0;
            
        }
        .d1 p:nth-child(2){
            top: 0;
            right: 0;
            
        }
        .d1 p:nth-child(3){
            right: 0;
            bottom: 0;
            
        }
        .d1 p:nth-child(4){
            bottom: 0;
            left: 0;
        }
        .d1:nth-of-type(2){
            transform: rotate(45deg);
        }
        @keyframes dong{
            0%{
                transform: scale(0);
            }
            50%{
                transform: scale(1);
            }
            100%{
                transform: scale(0);
            }
        }
        .d1:nth-of-type(1) p:nth-of-type(1){
            /*負值:動畫直接開始,但跳過前...秒動畫*/
            animation-delay: -0.1s;
        }
        .d1:nth-of-type(2) p:nth-of-type(1){
            animation-delay: -0.3s;
        }
        .d1:nth-of-type(1) p:nth-of-type(2){
            animation-delay: -0.5s;
        }
        .d1:nth-of-type(2) p:nth-of-type(2){
            animation-delay: -0.7s;
        }
        .d1:nth-of-type(1) p:nth-of-type(3){
            animation-delay: -0.9s;
        }
        .d1:nth-of-type(2) p:nth-of-type(3){
            animation-delay: -1.1s;
        }
        .d1:nth-of-type(1) p:nth-of-type(4){
            animation-delay: -1.3s;
        }
        .d1:nth-of-type(2) p:nth-of-type(4){
            animation-delay: -1.5s;
        }
    </style>
    <body>
        <div class="d1">
            <p></p>
            <p></p>
            <p></p>
            <p></p>
        </div>
        <div class="d1">
            <p></p>
            <p></p>
            <p></p>
            <p></p>
        </div>
    </body>
</html>

　　4.交叉效果

　　　　這個稍微復雜一點，其實只要捋明白思路，也挺簡單的（PS：大家可以把動畫挨個取消試試，你就會發現好像並不是很難）

　　　　技術分享圖片

<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
</head>

<body>

    <style>
        body {
            background-color: #F5F5F5;
            padding: 100px 120px;
        }

        .box {
            margin-left: 500px;
            display: block;
            width: 64px;
            height: 64px;
            transform-origin: 16px 16px;
            /* 旋轉 */
            animation: xuanzhuan 5s infinite;
        }
        /* 平移 */
        .ping {
            animation: pingyi 2.5s infinite;
            position: absolute;
        }
       .hang {
            width: 64px;
            height: 24px;
            position: absolute;
        }
        .hang:nth-child(0) {
            transform: rotate(0deg);
        }
        .hang:nth-child(1) {
            transform: rotate(90deg);
        }
        .hang:nth-child(2) {
            transform: rotate(180deg);
        }
        .hang:nth-child(3) {
            transform: rotate(270deg);
        }
        /* 第一個小珠子 */
       .ping:nth-child(1) {
            width: 8px;
            height: 8px;
            top: 50%;
            left: 50%;
            margin-top: -4px;
            margin-left: -4px;
            border-radius: 4px;
            animation-delay: -0.3s;
        }
        /* 第二個小珠子 */
        .ping:nth-child(2) {
            width: 16px;
            height: 16px;
            top: 50%;
            left: 50%;
            margin-top: -8px;
            margin-left: -8px;
            border-radius: 8px;
            -webkit-animation-delay: -0.6s;
            animation-delay: -0.6s;
        }
         /* 第三個小珠子 */    
        .ping:nth-child(3) {
            width: 24px;
            height: 24px;
            top: 50%;
            left: 50%;
            margin-top: -12px;
            margin-left: -12px;
            border-radius: 12px;
            animation-delay: -0.9s;
        }

        .blue {
            background-color: #1f4e5a;
        }
        .red {
            background-color: #ff5955;
        }
        .yellow {
            background-color: #ffb265;
        }
        .green {
            background-color: #00a691;
        }
        @keyframes xuanzhuan {
            0% { transform: rotate(0deg);}
            100% { transform: rotate(360deg);}
     }
        @keyframes pingyi {
            0% {transform: translateX(0);}
             25% { transform: translateX(-64px); }
            75% { transform: translateX(32px);} 
            100% {transform: translateX(0);}
        }
    </style>

        <div class="box">
            <div class="hang">
                <div class="ping blue"></div>
                <div class="ping blue"></div>
                <div class="ping blue"></div>
            </div>

            <div class="hang">
                <div class="ping yellow"></div>
                <div class="ping yellow"></div>
                <div class="ping yellow"></div>
            </div>
            <div class="hang">
                <div class="ping red"></div>
                <div class="ping red"></div>
                <div class="ping red"></div>
            </div>
            <div class="hang">
                <div class="ping green"></div>
                <div class="ping green"></div>
                <div class="ping green"></div>
            </div>
        </div>

</body>

</html>

5.圓形正方形切換小loading

　　這個是真的簡單！！！！！

　　技術分享圖片

<!doctype html>

<html lang="zh-cn">

<head>

<meta charset="UTF-8">

<meta name="renderer" content="webkit">

<link rel="shortcut icon" type="images/x-icon" href="/template/images/ufw.ico">

<title>loading-04</title>

</head>

<body>

<style>

    body{ 
        padding: 80px 100px;
    }
    .csshub-loading-icon{
        padding:10px;
        width:10px;
        height:10px;
        border-top:20px solid #ED5548; 
        border-right:20px solid #599CD3;
        border-bottom: 20px solid #5CBD5E;
        border-left:20px solid #FDD901;
        background:transparent;
        animation: csshub-rotate-right-round 1.2s ease-in-out infinite  alternate ;
    }

    @keyframes csshub-rotate-right-round

        {

        0% { transform: rotate(0deg);}

        50% {transform: rotate(180deg); }

        100% {transform: rotate(360deg);border-radius:50%;}

    }

</style>

    <div class="csshub-loading-icon"></div>

</body>

</html>

好啦，今天先分享這些，以後再有loading我會再補充上來的，嗷，對了，我懶得沒做兼容，要是再某些瀏覽器不能運行，加一下瀏覽器前綴就好啦

CSS3實現的幾個小loading效果

css linear 1.2 普通 dong 500px 交叉 yellow index 　　　　昨晚上閑的沒事突然想做幾個小loading效果，下面是昨晚上做的幾個小案例，分享給大家　　　　1.水波loading：這個loading是我覺得非常簡單，但是看上去的效果卻非

css3實現8個小圓在一個大圓上平均分佈

一道面試題：只有一個ul,和8個li,實現佈局，8個小圓平均分佈在一個大圓邊緣，只用css實現。解題關鍵：css3 中 transform,rotate,demo如下 <div c

使用 CSS3 實現超炫的 Loading（載入）動畫效果

.spinner { margin: 100px auto; width: 20px; height: 20px; position: relative; } .container1 > div, .container2 > div, .container3 &

33個jQuery與CSS3實現的絢麗滑鼠懸停效果

只要你有創意，完全可以使用CSS3來實現漂亮的動效，當然如果配合jQuery，這樣會更加強大，實現更多高階絢麗的動畫效果。滑鼠hover效果是很常用的，雖然很細微的東西，但網站的細節註定的網站的體驗，所以也不要忽視這些小細節。今天設計達人網整理了33個使用jQuery

使用 CSS3 實現超炫的 Loading（載入）動畫效果以及cs3的線上製作工具

loading： http://www.cnblogs.com/lhb25/p/loading-spinners-animated-with-css3.html http://www.cnblogs.com/lhb25/archive/2011/11/22/best-aw

幾個小步驟教你線上使用浪潮webblos做raid---簡單明了！

幾個小步驟教你線上使用浪潮webblos做raid 幾個小步驟教你線上使用浪潮webblos做raid 簡單明了教你線上使用浪潮webblos做raid，在這裏就不啰嗦了！直接進入正題---圖片表達！選擇configureation v….選擇新建（new）選擇手動（M

CSS3實現五子棋Web小遊戲，Canvas畫布和DOM兩種實現，並且具有悔棋和撤銷悔棋功能。

posit oct padding 角色 sar pac osi fse ech 用Canvas實現五子棋的思路： 1、點擊棋盤，獲取坐標x，y，計算出棋子的二維數組坐標i和j， 2、棋子的實現，先arc一個圓，再填充漸變色。 3、下完一步棋後切換畫筆和角色。 4、贏法算法

C++ string中的幾個小陷阱，你掉進過嗎？

stl 試題賦值 clu ror ati world mod iostream C++開發的項目難免會用到STL的string。使用管理都比char數組（指針）方便的多。但在得心應手的使用過程中也要警惕幾個小陷阱。避免我們項目出bug卻遲遲找不到原因。1. 結構體中的

Ch1的幾個小問題

最大值需要是什麽題目優先級思考問題優先網上接下來的題目需要更多的思考：如何用實驗方法確定以下問題的答案？註意，不要查書，也不要在網上搜索答案，必須親手嘗試——實踐精神是極其重要的。問題1：int型整數的最小值和最大值是多少（需要精確值）？問題2：d

NuGet的幾個小技巧

com packages 影響頁面兼容 images eight 記錄 cef 因為可視化庫程序包管理器的局限性，有很多需要的功能在界面中無法完成。以下技巧均需要在“程序包管理器控制臺”中使用命令來完成。一、改變項目目標框架後，更新程序包當改變項目的目標框架後，無

高效的幾個小技巧

編碼格式輸出 indent 默認 asc encode mps family 寫入 json json 序列化dumps之後，數據會變成很長的一行，如果，數據量非常大就會相當不易查看,使用indent參數來輸出便於查看的JSON。如： { "終點站": "貴陽站", "

關於信息化的幾個小故事，摘自麥楓網

了解信心放大凝聚力是什麽小故事工作組織外部企業的信息化的實行是增強企業反響才幹、進步企業效率、改進企業管理方式的一項工作，選擇實施一項性能良好的信息化軟件是作為信息化的主管的一項重要工作，下面我們就幾個小故事來看一看：　　一、指導看電腦　　這是發作在幾年前

使用css3制作簡單的loading效果

-o frame mov height document load charset key bottom <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">

關於docker使用的幾個小問題

atm who edi tbb dram ++z bug dockerd 生成由於剛接觸docker踩了幾個坑，希望本文對網癮少年有所幫助。 Docker分CE版（社區版）和EE版（商用版），具體安裝流程參考文檔介紹，在此不再贅述。下面分Windows和Linux分別踩

OSPF中幾個小概念

虛鏈路 net ospf -1 路由器 rtu 網絡概念 link OSPF的有以下幾種LSA: Type-1 lsa (router isa) Type-2 lsa (network lsa) Type-3 lsa (network summary lsa) Type

CSS3實現紙張邊角卷起效果

另有早已 http bbb 先生 rgba span fff pan html代碼 1 <body> 2 <div class="page"> 3 <div class="page-box"&g

CSS3實現絢麗的圖片切換效果

css3 代碼 grid class 好看的圖片 ans jpg overflow hid 　　逛博客看到的一個很好看的圖片切換效果，用CSS3做的，自己也嘗試了一下。想法很巧妙，實現起來並不困難。將一個圖片分為了四個部分，通過絕對定位的方式使每個li中顯示圖片的一個部分，

PHP時間戳的問題幾個小示例

北京時間 content date def 當前時間戳 day 問題獲得 <?php header("Content-type:text/html;charset=utf-8"); //設置北京時間為默認時區 date_default

基於《構建之法》的幾個小見解

關系希望階段周期這一都在 urn blog foo 第一章計算機科學和軟件工程的關系中國大陸的高校中大致有下面三種將計算機軟件的機構：計算機科學與技術系或學院軟件學院軟件工程系、軟件工程學院問題1：這一章有講到

Python的幾個小程序，其實我覺得可以稱作初學時的基礎算法

基本什麽否則 col 重新保留 put span pri 昨天學習的，今天做一下整理，以前學過幾天c，感覺什麽都沒有搞出來，有點泄氣，看到Python後試試，從最基本的東西學起，希望不要辜負我的這一點熱情。 if語句的應用 1 n=1 2 while

CSS3實現的幾個小loading效果

相關推薦