css3中，手寫loading載入動畫

阿新 • • 發佈：2018-12-04

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>loading圖</title>
    <style>
        * {
            padding:0;
            margin:0;
        }
        @keyframes loadingFadeDelay {
        0%, 39%, 100% {
            opacity: 0
        }
        40% {
            opacity: 1
        }
        }
        .loading-container {
        position: fixed;
        left:calc(50% - 25px);
        top:calc(50% - 25px);
        width: 25px;
        height: 25px;
        }

        .loading {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        }

        .loading:before {
        display: block;
        content: ' ';
        margin: 0 auto;
        width: 10%;
        height: 30%;
        background: #aaa;
        animation: loadingFadeDelay 1.2s infinite ease-in-out both; 
        }

        .loading-animation1 {
        transform: rotate(0deg);
        }

        .loading-animation2 {
        transform: rotate(30deg);
        }

        .loading-animation3 {
        transform: rotate(60deg);
        }

        .loading-animation4 {
        transform: rotate(90deg);
        }

        .loading-animation5 {
        transform: rotate(120deg);
        }

        .loading-animation6 {
        transform: rotate(150deg);
        }

        .loading-animation7 {
        transform: rotate(180deg);
        }

        .loading-animation8 {
        transform: rotate(210deg);
        }

        .loading-animation9 {
        transform: rotate(240deg);
        }

        .loading-animation10 {
        transform: rotate(270deg);
        }

        .loading-animation11 {
        transform: rotate(300deg);
        }

        .loading-animation12 {
        transform: rotate(330deg);
        }

        .loading-animation2 { transform: rotate(30deg);}
        .loading-animation3 { transform: rotate(60deg); }
        .loading-animation4 { transform: rotate(90deg);}
        .loading-animation5 { transform: rotate(120deg);}
        .loading-animation6 { transform: rotate(150deg);}
        .loading-animation7 { transform: rotate(180deg);}
        .loading-animation8 { transform: rotate(210deg);}
        .loading-animation9 { transform: rotate(240deg);}
        .loading-animation10 { transform: rotate(270deg); }
        .loading-animation11 { transform: rotate(300deg); }
        .loading-animation12 { transform: rotate(330deg); }
        .loading-animation2:before {animation-delay: -1.1s;}
        .loading-animation3:before {animation-delay: -1s;}
        .loading-animation4:before {animation-delay: -0.9s;}
        .loading-animation5:before {animation-delay: -0.8s;}
        .loading-animation6:before {animation-delay: -0.7s;}
        .loading-animation7:before {animation-delay: -0.6s;}
        .loading-animation8:before {animation-delay: -0.5s;}
        .loading-animation9:before {animation-delay: -0.4s;}
        .loading-animation10:before {animation-delay: -0.3s;}
        .loading-animation11:before {animation-delay: -0.2s;}
        .loading-animation12:before {animation-delay: -0.1s;}
    </style>
</head>
<body>
        <div class='loading-container'>
            <div class='loading loading-animation1'></div>
            <div class='loading loading-animation2'></div>
            <div class='loading loading-animation3'></div>
            <div class='loading loading-animation4'></div>
            <div class='loading loading-animation5'></div>
            <div class='loading loading-animation6'></div>
            <div class='loading loading-animation7'></div>
            <div class='loading loading-animation8'></div>
            <div class='loading loading-animation9'></div>
            <div class='loading loading-animation10'></div>
            <div class='loading loading-animation11'></div>
            <div class='loading loading-animation12'></div>
        </div>
              
</body>
</html>

loading載入動畫

css3中，手寫loading載入動畫

loading載入動畫 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="w

css3純手寫loading效果

-s 1.3 utf AC keyframes title sca osi inf <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

css3實現三種不同的loading載入動畫效果

HTML： <div class="box"> <div class="loader"> <div class="loading-1">

在CSS3中，可以利用transform功能來實現文字或圖像的旋轉、縮放、傾斜、移動這四種類型的變形處理

for skew 文字 values alt 實例垂直 -o 移動 CSS3中的變形處理(transform)屬 transform的功能分類 1.旋轉 transform:rotate(45deg); 該語句使div元素順時針旋轉45度。deg是CSS 3的“V

深入MNIST，手寫數字，加cnn

Tensorflow python from __future__ import print_function import tensorflow as tf from tensorflow.examples.tutorials.mnist import input_data # number 1 t

圖解線程池工作機制，手寫線程池？

實現有用 trace test 滿了 all 函數 tor runtime ThreadPoolExecutor構造函數的各個參數說明 public ThreadPoolExecutor(int corePoolSize,//線程池中核心線程數

全面理解Handler第一步：理解消息隊列，手寫消息隊列

pro 主線程思考 -c 常見 pub 為什麽不能 array handler機制前言 Handler機制這個話題，算是爛大街的內容。但是為什麽偏偏重拿出來“炒一波冷飯”呢？因為自己發現這“冷飯”好像吃的不是很明白。最近在思考幾個問題，發現以之前對Handler機制的了

不使用Tomcat，手寫簡單的web服務

背景：　　公司使用的YDB提供了http的查詢資料庫服務，直接通過url傳入sql語句查詢資料-_-||。ydb的使用參照：https://www.cnblogs.com/hd-zg/p/7115112.html 　　有的業務使用到了該功能。但ydb系統升級後，這個服務被遺漏了，導致使用到該功能的業務無

EF的連線字串，不想用config中，想寫到程式碼裡，總是報錯不支援的關鍵字 data source

用WPF寫一個小東西，EF連線資料庫的字串是寫在app.config裡的，明文。網上找了很久，倒是有加解密的文章。我覺得太複雜了。事實上只要不顯示明文就行了。修改了EF的建構函式，在程式碼裡對connectStrings賦值。明明是複製的原來工作正常的app.config中的connectstring

ios抓包軟體Thor限時折扣6元中，手慢無

Thor for iOS iOS 端強力專業的 HTTP 抓包分析工具 - Thor v1.0.0 已上架 AppStore 去 App store 下載歡迎大家加入 Thor 官方 qq 群：577198244，探討 Thor 的各種用法其它語言:

一個Action中，可以寫多個類似的業務控制方法

1）通過模組根路徑 + 功能子路徑 = 訪問模組下子功能的路徑 @Controller @RequestMapping(value="/user") public class UserAction{ @RequestMapping(value="/add") public St

lesson22-24 MNIST資料集，模組化搭建神經網路八股，手寫數字識別準確率輸出

import tensorflow as tf #MNIST資料集輸出識別準確率 #MNIST資料集： #提供6w張28*28畫素點的0-9手寫數字圖片和標籤，用於訓練 #提供1w張28*28畫素點的0-9手寫數字圖片和標籤，用於測試 #每張圖片的784個畫素點（

CSS實現Loading載入動畫

優秀的前端工程師總是優先考慮用CSS替代圖片：基本思路是建立8個圓形div，絕對定位排列成圓圈，然後，依次通過opacity屬性更新透明度，就得到一個loading的效果圖。和GIF相比，CSS實現的好處主要在於，對於不同背景顏色，該動畫都是完美的，還可以用CS

Tensorflow中MNIST手寫數字資料集

剛開始跑的程式碼還有錯誤，但是不知道為什麼再次執行就正確了，可能是新添加了input_data.py檔案，暫存記錄一下，等待深入研究 # -- coding: utf-8 -- import tensorflow as tf from tensorflow.example

純CSS 仿某網站 loading載入動畫

原理很簡單，使用css3的動畫，相容webkit核心瀏覽器（支援移動端）和一些標準瀏覽器，如果需要支援其他核心的瀏覽器，比如火狐（加上-moz-）、opera(加上-o-)、版本高於10的IE瀏覽器（加上-ms-）字首。話不多說，上截圖。 ![圖片1](http

Android 電子簽名，手寫簽名案列實現方法，並上傳網頁顯示（base64）！

最近說專案可能會用到一個電子簽名，不需要識別的那種，只是一個單純手寫簽名，然後以base64的格式提供給前端web頁面。其實挺簡單的，自定義一個手寫view就上線了。Android 電子簽名，手寫簽名案列實現方法！先上圖：按鈕說明：第一個按鈕是清除手寫板，第二個是將手寫板的

sklearn中digits手寫字型資料集介紹

1. 匯入from sklearn import datasets digits = datasets.load_digits()2. 屬性檢視digits: bunch型別print digits.keys() ['images', 'data', 'target_nam

Android在切換Fragment過程中，如何避免重新載入

這是公司的新專案，MainActivity中是集合了多個Fragment，同時，Fragment 中又用ViewPager 嵌套了多個Fragment 所以在MainActivity中，為了避免滑動衝突，通過FragManager 進行Fragment 的切換操作但是，同

穩了，手寫生產者消費者模式程式碼

程式碼語言：kotlin、Java import java.util.concurrent.locks.ReentrantLock /** * kotlin * 測試主類 */ fun mai

MySQL學習筆記--MySQL邏輯架構，sql寫與載入順序以及七種JOIN模式圖解

一、MySQL的邏輯架構MySQL的最大特點是其外掛式的儲存引擎架構將查詢處理和其他的系統任務以及資料的儲存，提取相分離。這種架構可以根據業務的需求和實際需求選擇合適的儲存引擎。正因為外掛式引擎的特點它的架構可以在多種不同的場景中應用併發揮良好的效能。1. 連線層：為請求做連

css3中，手寫loading載入動畫

相關推薦