CSS3實現小球載入效果

阿新 • • 發佈：2020-12-19

技術標籤：css3 css

實現原理。

在這裡插入圖片描述

設定大盒子居中.
box1與box2定位在一起，
給小球定位到左上，右上，右下，右下， box2旋轉45deg，盒內小球跟著旋轉，錯開位置，呈現出八個小球
給初始色設定透明度變小,動畫執行時,透明度變成1,看起來就是亮了一樣。
設定動畫名稱load,執行時間為1秒,次數為無限次infinite。
8個小球,一起執行,設定延遲時間,最大延遲等於執行時間,當動畫執行12.5%時,也就是執行了0.125秒時小球的透明度為1,然後剩下的87.5%剩下的處於透明度為0.3.相當於暗的狀態.
相當於排隊打飯，一個人打飯需要1s，第一個人打飯結束，第二個人打飯，第二個人需要等待1s，依次類推，第三個人打飯需要等待2s，他打飯需要1秒，三個人全部打完飯需要3s。這就是相當於動畫完成時間為1秒。8個小球，第一個小球不用等待，直接執行，0.125秒，也就是動畫執行到12.%，剩下的0.875也就是87.5%小球處於opaticy為.3的狀態，

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color 
: black;
        }
        /*設定大盒子居中 */
        
        .box {
            position: absolute;
            width: 200px;
            height: 200px;
            margin: 0 auto;
            top: 50%;
            left: 50%;
            margin-top: -100px;
            margin-left: -100px;
        }
        /*box1與box2定位在一起， */ 

        
        .box1,
        .box2 {
            position: absolute;
            width: 200px;
            height: 200px;
            top: 0;
            left: 0;
        }
        /* 給小球定位到左上，右上，右下，右下， box2旋轉45deg，盒內小球跟著旋轉，錯開位置，呈現出八個小球 */
        
        .box2 {
            transform: rotate(45deg);
        }
        
        span {
            position: absolute;
            width: 14px;
            height: 14px;
            background-color: aqua;
            border-radius: 50%;
            /*給初始色設定透明度變小,動畫執行時,透明度變成1,看起來就是亮了一樣  */
            opacity: .3;
            animation: load 1s infinite;
            /* 設定動畫名稱load,執行時間為1秒,次數為無限次infinite */
            animation: load 1s infinite;
        }
        
        span:nth-child(1) {
            top: 0;
            left: 0;
        }
        
        span:nth-child(2) {
            right: 0;
            top: 0;
        }
        
        span:nth-child(3) {
            right: 0;
            bottom: 0;
        }
        
        span:nth-child(4) {
            left: 0;
            bottom: 0;
        }
        /* 8個小球,一起執行,設定延遲時間,最大延遲等於執行時間,當動畫執行12.5%時,也就是執行了0.125秒時小球的透明度為1,然後剩下的87.5%剩下的處於透明度為0.3.相當於暗的狀態.*/
        /* 相當於排隊打飯，一個人打飯需要1s，第一個人打飯結束，第二個人打飯，第二個人需要等待1s，依次類推，第三個人打飯需要等待2s，他打飯需要1秒，三個人全部打完飯需要3s。這就是相當於動畫完成時間為1秒。8個小球，第一個小球不用等待，直接執行，0.125秒，也就是動畫執行到12.%，剩下的0.875也就是87.5%小球處於opaticy為.3的狀態， */
        
        @keyframes load {
            12.5% {
                opacity: 1;
            }
            20% {
                opacity: .3;
            }
            100% {
                opacity: .3;
            }
        }
        
        .box1 span:nth-child(1) {
            animation-delay: 0s;
        }
        
        .box2 span:nth-child(1) {
            animation-delay: .125s;
        }
        
        .box1 span:nth-child(2) {
            animation-delay: .25s;
        }
        
        .box2 span:nth-child(2) {
            animation-delay: .375s;
        }
        
        .box1 span:nth-child(3) {
            animation-delay: .5s;
        }
        
        .box2 span:nth-child(3) {
            animation-delay: .625s;
        }
        
        .box1 span:nth-child(4) {
            animation-delay: .75s;
        }
        
        .box2 span:nth-child(4) {
            animation-delay: 0.875s;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="box1">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="box2">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
</body>

</html>

CSS3實現小球載入效果

技術標籤：css3css 實現原理。設定大盒子居中.box1與box2定位在一起，給小球定位到左上，右上，右下，右下， box2旋轉45deg，盒內小球跟著旋轉，錯開位置，呈現出八個小球給初始色設定透明度變小,動畫執行時,

css3實現水球波紋效果

原理：父div設為圓形，並隱藏超出範圍的內容，多個子div設為大圓角正方形並設定背景顏色，子div圓心設定到父div下方，並繞自己的圓心旋轉，效果就是水球波紋。

CCS實現loading載入效果

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

使用CSS3實現橢圓動畫效果

寫在前面的話：　　有這樣一個需求，在大屏中要實現幾個球用橢圓形狀的佈局進行展示，展示的同時還要沿著橢圓軌道進行運動。經過百度結合自身的思考之後給出了以下demo。

在HTML中使用css3實現雪人動畫效果

此文轉載自：https://blog.csdn.net/weixin_41937552/article/details/111715092 背景：聖誕節又到了，拿什麼來哄女朋友開心？

CSS3實現雙眼眨眼效果

技術標籤：CSS3 <div class="box"> <div class="yanjin"> <div class="demo">歡迎來到VUE3</div>

tensorflow mnist 資料載入實現並畫圖效果

關於 TensorFlow TensorFlow™ 是一個採用資料流圖（data flow graphs），用於數值計算的開源軟體庫。節點（Nodes）在圖中表示數學操作，圖中的線（edges）則表示在節點間相互聯絡的多維資料陣列，即張量（ten

jquery+css3實現的經典彈出層效果示例

本文例項講述了jquery+css3實現的彈出層效果。分享給大家供大家參考，具體如下：

Umi專案通過配置 dynamicImport loadingComponent 實現子頁面載入效果

轉載：https://www.jianshu.com/p/14609ad96780 在前端單頁面應用中，子頁面的程式碼都是當用戶訪問到的時候，才會非同步去載入子頁面的程式碼。

Css3 實現鋸齒效果整理

一、Css3 實現鋸齒效果優惠券鋸齒效果 <!DOCTYPE html> <html lang=\"en\"> <head>

CSS3 實現 y軸旋轉切換顯示正反面內容 - 【動畫效果】

<!DOCTYPE html> <html> <head> <meta charset=\"utf-8\"/> <title>TYEST</title>

微信小程式實現分頁載入效果

分頁載入功能大家遇到的應該會經常遇到，應用場景也很多，例如微博，QQ，微信朋友圈以及新聞類應用，都會有分頁載入的功能，這不僅節省了我們使用者的流量，還提升了使用者體驗。那麼今天的這篇文章就是介紹微信小程

CSS3 實現倒計時效果

這篇文章主要介紹了CSS3 實現倒計時效果的示例程式碼，幫助大家更好的理解和使用CSS3，感興趣的朋友可以瞭解下

CSS3實現柱狀圖的3D立體動畫效果

這篇文章所實現的動畫效果起源於一個小小的想法，這個想法來自於另一個網站的一篇文章，它介紹瞭如何在網頁中使用css、圖片和JavaScript建立立體的柱狀圖。在閱讀了那篇文章之後，我想挑戰一下，嘗試使用純css來實現

vue實現小球滑動交叉效果

本文例項為大家分享了實現小球滑動交叉效果的具體程式碼，供大家參考，具體內容如下

我用 CSS3 實現了一個超炫的 3D 載入動畫

今天給大家帶來一個非常炫酷的CSS3載入Loading動畫，它的特別之處在於，整個Loading動畫呈現出了3D的視覺效果。這個Loading載入動畫由12個3D圓柱體圍成一個橢圓形，同時這12個圓柱體依次波浪式地起伏，從而傳遞給使用

SpringBoot整合Shiro 實現動態載入許可權

一、前言本文小編將基於 SpringBoot 整合 Shiro實現動態uri許可權，由前端vue在頁面配置uri，Java後端動態重新整理許可權，不用重啟專案，以及在頁面分配給使用者角色、按鈕、uri 許可權後，後端動態分配許可權

Qt自定義控制元件實現圓圈載入進度條

本文例項為大家分享了Qt實現圓圈載入進度條的具體程式碼，供大家參考，具體內容如下

Unity Shader實現翻書效果

今天實現一個簡單的翻書的效果，話不多說，先上一張效果圖：這裡就隨便用的一張紋理了，我們還是稱為“翻木板”吧，哈哈。

Android碎片fragment實現靜態載入的例項程式碼

靜態載入好後的介面如下，兩個碎片分別位於一個活動的左邊和右邊：左邊和右邊分別為一個碎片，這兩個碎片正好將一整個活動佈滿。一個活動當中可以擁有多個碎片，碎片的含義就是可以在同一個UI介面下，將這個介面分

CSS3實現小球載入效果

實現原理。

相關推薦