2. 程式人生 > >css3純手寫loading效果

css3純手寫loading效果

阿新 • • 發佈：2018-05-01
-s 1.3 utf AC keyframes title sca osi inf 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>圓形旋轉loading</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .box{
                width: 50px;
 

                height:50px;
                margin: 100px;
                position: absolute;
            }
            .box:nth-of-type(2){
                transform: rotate(45deg);
            }
            .box p{
                width: 15px;
                height: 15px;
                background
 
: #0000FF;
                border-radius: 50%;
                position: absolute;
                animation: run 1.5s infinite linear;
            }
            .box p:nth-of-type(1){ /*左上*/
                left: 0;
                top: 0;
            }
            .box p:nth-of-type(2){ /*右上*/
                right
 
: 0;
                top: 0;
            }
            .box p:nth-of-type(3){ /*左下*/
                left: 0;
                bottom: 0;
            }
            .box p:nth-of-type(4){ /*右下*/
                right: 0;
                bottom: 0;
            }
            /*動畫效果*/
            @keyframes run{
                0%{
                    transform: scale(0);
                }
                50%{
                    transform: scale(1);
                }
                100%{
                    transform: scale(0);
                }
            }
            /*延遲動畫效果   負值是解決蹦動的效果*/
            .box:nth-of-type(1) p:nth-of-type(1){
                animation-delay: -0.1s;
            }
            .box:nth-of-type(2) p:nth-of-type(1){
                animation-delay: -0.3s;
            }
            .box:nth-of-type(1) p:nth-of-type(2){
                animation-delay: -0.5s;
            }
            .box:nth-of-type(2) p:nth-of-type(2){
                animation-delay: -0.7s;
            }
            .box:nth-of-type(1) p:nth-of-type(3){
                animation-delay: -0.9s;
            }
            .box:nth-of-type(2) p:nth-of-type(3){
                animation-delay: -1.1s;
            }
            .box:nth-of-type(1) p:nth-of-type(4){
                animation-delay: -1.3s;
            }
            .box:nth-of-type(2) p:nth-of-type(4){
                animation-delay: -1.5s;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <p></p>
            <p></p>
            <p></p>
            <p></p>
        </div>
        <div class="box">
            <p></p>
            <p></p>
            <p></p>
            <p></p>
        </div>
    </body>
</html>

css3純手寫loading效果

相關推薦

css3純手寫loading效果

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

css3中，手寫loading載入動畫

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

簡易-五星評分-jQuery純手寫

開始 round size dcl cas blog ren func fin 超級簡單的評分功能，分為四個步驟輕松搞定： 第一步： 　　引入jquery文件；這裏我用百度CDN的jquery： <script src="http://apps.bdimg.com/

vue10行代碼實現上拉翻頁加載更多數據，純手寫js實現下拉刷新上拉翻頁不引用任何第三方插件

each ray 如果 部分 list 插件 下拉 ast 頁面數據 vue10行代碼實現上拉翻頁加載更多數據，純手寫js實現下拉刷新上拉翻頁不引用任何第三方插件/庫 一提到移動端的下拉刷新上拉翻頁，你可能就會想到iScroll插件，沒錯iScroll是一個高性能，資源占用

CSS3實現10種Loading效果（轉）

技術分享 mes borde chan idt 1.2 logs -c tran 昨晚用CSS3實現了幾種常見的Loading效果，雖然很簡單，但還是分享一下，順便也當是做做筆記…… 第1種效果： 代碼如下： <div class="loading">

大學生簡單網頁div+css網頁純手寫代碼制作html靜態頁面切圖排版

靜態頁面 靜態頁 watermark 簡單 ima 大學生 ges 51cto mar 了解下下+2425691680 大學生簡單網頁div+css網頁純手寫代碼制作html靜態頁面切圖排版

Spring Boot2.0之純手寫框架

框架部分重點在於實現原理，懂原理！ 廢話不多說，動手幹起來！ SpringMVC程式入口？ 沒有配置檔案，Spring 容器是如何載入？ 回顧我們之前搭建Spring Boot專案使用的pom 引入的依賴需要parent，其作用是支援依賴 快速整合框架 不需要寫版本號 還有就是web元件，自動引入s

純手寫SpringMVC到SpringBoot框架專案實戰

引言 Spring Boot其設計目的是用來簡化新Spring應用的初始搭建以及開發過程。該框架使用了特定的方式來進行配置，從而使開發人員不再需要定義樣板化的配置。 通過這種方式，springboot是一個快速整合第三方框架的，簡化了xml的配置，專案中再也不包含web.xml檔案了

純手寫springboot專案（詳細）

導語：不會用eclipse建立springboot專案？也不會用IDEA建立springboot專案？沒關係，會建立資料夾和文字文件就行。 1、springboot專案目錄結構 springboot專案檔案目錄結構   &nb

linux入門考試題答案(個人純手寫)

考試資訊： IPADDR: 172.25.254.x(X 在這裡指您的工作站編號加100) NETMASK: 255.255.255.0 GATEWAY: 172.25.254.250 DNS: 172.25.254.250 yum源地址為：http://172.25.254.250/rhel7

【手寫系列】純手寫實現一個高可用的RPC

前言 在實際後臺服務開發中，比如訂單服務（開發者A負責）需要呼叫商品服務（開發者B負責），那麼開發者B會和A約定呼叫API，以介面的形式提供給A。通常都是B把API上傳到Maven私服，然後B開始寫API的實現，A只需要引入API依賴進行開發即可。 訂單

純手寫Spring，麻雀雖小，五臟俱全

                                          &nb

高手過招「效能優化/純手寫SpringMVC框架/MySql優化/微服務」

效能優化那些絕招，一般人我不告訴他 1，支付寶介面的介面如何正確呼叫； 2，從併發程式設計角度來提高系統性能； 3，系統響應的速度縮短N倍的祕密； 4，從Futuretask類原始碼分析到手寫； 5，快速提升Web專案吞吐量；   300行精華程式碼：純手寫SpringMVC框

基於註解方式純手寫spring-ioc

1.定義註解 @Target({ElementType.TYPE}) @Retention(RetentionPolicy.RUNTIME) public @interface ExtService { } 2.工具類 https://blog.csdn.net/qq_419882

【小程式】頭腦王者答題邏輯簡單復刻（程式碼純手寫）

前言 今天接到公司通知要求仿照小程式頭腦王者的模型上線一個自己的單詞APP 所以就花了兩個小時的時候寫了一個demo 思路 要想實現答題系統，首先要跟後臺確定題庫返回資料的型別和結構 經過跟後臺協商，

純手寫springIOC

 大家好啊～ 那麼今天來帶大家寫一下spring的ioc。   其實也很簡單，首先我們明白兩點，java解析xml和java的反射機制，因為ioc就是主要是基於這兩個來實現，今天只是簡單的來大家實現下。   廢話不多說直接上程式碼。   1.首先加入maven依賴

canvas時鐘純手寫

html程式碼： <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <style type="text/css">

數值分析--線性方程組解的演算法（6種）（附演算法百度雲連結，純手寫原創）

先上乾貨百度雲（純手寫，純HTML，可直接開啟），如下： 注：參考書籍《數值分析》北京航空航天大學出版社 一、順序GUASS消去法 點進去如下，先輸入要解的N階矩陣： 比如，我們輸入3： 出現下方的矩陣框，為(N+1)*N的增廣矩陣，輸入待計算的矩陣，然

純手寫ORM框架

1.首先定義一個實體類Book public class Book { private Integer bookId; private String bookName; private String bookAuthor; private BigDecimal bo

純手寫SpringMVC架構，用註解實現springmvc過程（動腦學院Jack老師課後自己練習的體會）

標籤： 1、第一步，首先搭建如下架構，其中，annotation中放置自己編寫的註解，主要包括service controller qualifier RequestMapping 第二步：完成對應的annotation: package com.cn.annotation; import java.