您現在的位置是:電腦技術吧?>? 組裝維修 ??>??加載loading,頁面進來加載loading??>??正文詳情

加載loading,頁面進來加載loading

錢星晴2019-11-16 22:30:37 人圍觀
簡介網頁loading在我們的新設計教程中,我將向您展示如何創建純CSS3的加載動畫組件(不帶任何圖像)。我認為它可以減少你的項目的代碼量和你網站上額外圖片的負荷。我準備了三種不同類

在我們這次的新設計教程中,我將向您展示如何創建純CSS3的loading加載動畫組件(沒有任何圖像)。

我認為它可以為你減少項目的代碼量和額外的圖像對你網站的負載。

我準備了三種不同風格的加載組件。

現在,讓我們看看我做的。

  css3-loading  Step 1. HTML  你可以在這里看到的三個元素放置加載元素的div。

代碼如下 div class=main_body div class=element div class=loading1 div/div div/div div/div div/div div/div div/div div/div div/div /div /div div class=element div class=loading2 div/div div/div div/div div/div div/div div/div div/div div/div /div /div div class=element div class=loading3 div/div div/div div/div div/div div/div /div /div /div   Step 2. CSS  現在,最有趣的一步,我會給你風格各加載的元素。

歡迎來檢查的第一個樣式: 代碼如下 .loading1 { height:100px; position:relative; width:80px; } .loading1 div { background-color:#FFFFFF; height:30px; position:absolute; width:12px; /* css3 radius */ -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; /* css3 transform - scale */ -webkit-transform:scale(0.4); -moz-transform:scale(0.4); -o-transform:scale(0.4); /* css3 animation */ -webkit-animation-name:loading1; -webkit-animation-duration:1.04s; -webkit-animation-iteration-count:infinite; -webkit-animation-direction:linear; -moz-animation-name:loading1; -moz-animation-duration:1.04s; -moz-animation-iteration-count:infinite; -moz-animation-direction:linear; -o-animation-name:loading1; -o-animation-duration:1.04s; -o-animation-iteration-count:infinite; -o-animation-direction:linear; } .loading1 div:nth-child(1) { left:0; top:36px; /* css3 transform - rotate */ -webkit-transform:rotate(-90deg); -moz-transform:rotate(-90deg); -o-transform:rotate(-90deg); /* css3 animation */ -webkit-animation-delay:0.39s; -moz-animation-delay:0.39s; -o-animation-delay:0.39s; } .loading1 div:nth-child(2) { left:10px; top:13px; /* css3 transform - rotate */ -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -o-transform:rotate(-45deg); /* css3 animation */ -webkit-animation-delay:0.52s; -moz-animation-delay:0.52s; -o-animation-delay:0.52s; } .loading1 div:nth-child(3) { left:34px; top:4px; /* css3 transform - rotate */ -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); /* css3 animation */ -webkit-animation-delay:0.65s; -moz-animation-delay:0.65s; -o-animation-delay:0.65s; } .loading1 div:nth-child(4) { right:10px; top:13px; /* css3 transform - rotate */ -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -o-transform:rotate(45deg); /* css3 animation */ -webkit-animation-delay:0.78s; -moz-animation-delay:0.78s; -o-animation-delay:0.78s; } .loading1 div:nth-child(5) { right:0; top:36px; /* css3 transform - rotate */ -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); -o-transform:rotate(90deg); /* css3 animation */ -webkit-animation-delay:0.91s; -moz-animation-delay:0.91s; -o-animation-delay:0.91s; } .loading1 div:nth-child(6) { right:10px; bottom:9px; /* css3 transform - rotate */ -webkit-transform:rotate(135deg); -moz-transform:rotate(135deg); -o-transform:rotate(135deg); /* css3 animation */ -webkit-animation-delay:1.04s; -moz-animation-delay:1.04s; -o-animation-delay:1.04s; } .loading1 div:nth-child(7) { bottom:0; left:34px; /* css3 transform - rotate */ -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -o-transform:rotate(180deg); /* css3 animation */ -webkit-animation-delay:1.17s; -moz-animation-delay:1.17s; -o-animation-delay:1.17s; } .loading1 div:nth-child(8) { left:10px; bottom:9px; /* css3 transform - rotate */ -webkit-transform:rotate(-135deg); -moz-transform:rotate(-135deg); -o-transform:rotate(-135deg); /* css3 animation */ -webkit-animation-delay:1.3s; -moz-animation-delay:1.3s; -o-animation-delay:1.3s; } /* css3 keyframes - loading1 */ @-webkit-keyframes loading1 { 0%{ background-color:#000000 } 100%{ background-color:#FFFFFF } } @-moz-keyframes loading1 { 0%{ background-color:#000000 } 100%{ background-color:#FFFFFF } } @-o-keyframes loading1 { 0%{ background-color:#000000 } 100%{ background-color:#FFFFFF } }   你可以看到我用CSS3動畫關鍵幀,每一步(點)是彼此分離的延遲。

現在,請查看我們的第二負載的風格元素: 代碼如下 .loading2 { height:140px; position:relative; width:140px; /* css3 transform - scale */ -webkit-transform:scale(0.6); -moz-transform:scale(0.6); -o-transform:scale(0.6); } .loading2 div { background-color:#FFFFFF; height:25px; position:absolute; width:25px; /* css3 radius */ -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; /* css3 animation */ -webkit-animation-name:loading2; -webkit-animation-duration:1.04s; -webkit-animation-iteration-count:infinite; -webkit-animation-direction:linear; -moz-animation-name:loading2; -moz-animation-duration:1.04s; -moz-animation-iteration-count:infinite; -moz-animation-direction:linear; -o-animation-name:loading2; -o-animation-duration:1.04s; -o-animation-iteration-count:infinite; -o-animation-direction:linear; } .loading2 div:nth-child(1) { left:0; top:57px; /* css3 animation */ -webkit-animation-delay:0.39s; -moz-animation-delay:0.39s; -o-animation-delay:0.39s; } .loading2 div:nth-child(2) { left:17px; top:17px; /* css3 animation */ -webkit-animation-delay:0.52s; -moz-animation-delay:0.52s; -o-animation-delay:0.52s; } .loading2 div:nth-child(3) { left:57px; top:0; /* css3 animation */ -webkit-animation-delay:0.65s; -moz-animation-delay:0.65s; -o-animation-delay:0.65s; } .loading2 div:nth-child(4) { right:17px; top:17px; /* css3 animation */ -webkit-animation-delay:0.78s; -moz-animation-delay:0.78s; -o-animation-delay:0.78s; } .loading2 div:nth-child(5) { right:0; top:57px; /* css3 animation */ -webkit-animation-delay:0.91s; -moz-animation-delay:0.91s; -o-animation-delay:0.91s; } .loading2 div:nth-child(6) { right:17px; bottom:17px; /* css3 animation */ -webkit-animation-delay:1.04s; -moz-animation-delay:1.04s; -o-animation-delay:1.04s; } .loading2 div:nth-child(7) { left:57px; bottom:0; /* css3 animation */ -webkit-animation-delay:1.17s; -moz-animation-delay:1.17s; -o-animation-delay:1.17s; } .loading2 div:nth-child(8) { left:17px; bottom:17px; /* css3 animation */ -webkit-animation-delay:1.3s; -moz-animation-delay:1.3s; -o-animation-delay:1.3s; } /* css3 keyframes - loading2 */ @-webkit-keyframes loading2 { 0%{ background-color:#000000 } 100%{ background-color:#FFFFFF } } @-moz-keyframes loading2 { 0%{ background-color:#000000 } 100%{ background-color:#FFFFFF } } @-o-keyframes loading2 { 0%{ background-color:#000000 } 100%{ background-color:#FFFFFF } }   我在這里使用相同的理念作為第一要素,但是,稍微改變風格。

最后第三加載元件: 代碼如下 .loading3 div { background-color:#FFFFFF; border:1px solid #000000; float:left; height:114px; margin-left:5px; width:30px; opacity:0.1; /* css3 transform - scale */ -webkit-transform:scale(0.8); -moz-transform:scale(0.8); -o-transform:scale(0.8); /* css3 animation */ -webkit-animation-name:loading3; -webkit-animation-duration:1.2s; -webkit-animation-iteration-count:infinite; -webkit-animation-direction:linear; -moz-animation-name:loading3; -moz-animation-duration:1.2s; -moz-animation-iteration-count:infinite; -moz-animation-direction:linear; -o-animation-name:loading3; -o-animation-duration:1.2s; -o-animation-iteration-count:infinite; -o-animation-direction:linear; } .loading3 div:nth-child(1) { /* css3 animation */ -webkit-animation-delay:0.24s; -moz-animation-delay:0.24s; -o-animation-delay:0.24s; } .loading3 div:nth-child(2) { /* css3 animation */ -webkit-animation-delay:0.48s; -moz-animation-delay:0.48s; -o-animation-delay:0.48s; } .loading3 div:nth-child(3) { /* css3 animation */ -webkit-animation-delay:0.72s; -moz-animation-delay:0.72s; -o-animation-delay:0.72s; } .loading3 div:nth-child(4) { /* css3 animation */ -webkit-animation-delay:0.96s; -moz-animation-delay:0.96s; -o-animation-delay:0.96s; } .loading3 div:nth-child(5) { /* css3 animation */ -webkit-animation-delay:1.2s; -moz-animation-delay:1.2s; -o-animation-delay:1.2s; } /* css3 keyframes - loading3 */ @-webkit-keyframes loading3 { 0% { -webkit-transform:scale(1.2); opacity:1; } 100% { -webkit-transform:scale(0.7); opacity:0.1; } } @-moz-keyframes loading3 { 0% { -moz-transform:scale(1.2); opacity:1; } 100% { -moz-transform:scale(0.7); opacity:0.1; } } @-o-keyframes loading3 { 0% { -o-transform:scale(1.2); opacity:1; } 100% { -o-transform:scale(0.7); opacity:0.1; } }   這就是今天的。

我們剛剛創建的三種不同的加載元素。

我希望一切都對你很容易和你一樣的結果。

祝你好運!

版權聲明:本文由 錢星晴 整理編輯。

原標題:頁面加載loading,loading加載頁

轉載注明出處:http://www.dn9ww09s.icu/assemble/12969.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • picsart一樣功能的軟件,picsart怎么用放大鏡

    picsart一樣功能的軟件,picsart怎么用放大鏡 相關圖片軟件怎么做我發現很多網友都在問picsart是什么樣的軟件,有什么用。Picsart是一種適用于Android平臺的視頻、音頻、圖像軟件,具有強大的功能。用戶可以使用pipicart軟件...

  • 設計師排版,排版設計師是做什么的

    設計師排版,排版設計師是做什么的 相關圖片排版設計師招聘閱讀筆記:工具不重要,工具不重要,工具也不重要。好 啊?有人說DW已經被淘汰很長一段時間了。我成功了,然后呢?我打算用那本紅色小冊子來談談。哈哈哈希望你...

  • xp升級到win7傻瓜教程,xp更新win7系統

    xp升級到win7傻瓜教程,xp更新win7系統 相關圖片戰網不是有效的win32隨著微軟的不斷發展,XP這一款老系統已經越來越不能對抗新型病毒的攻擊。那么xp怎么升級到win7呢?下面,超人軟件小編就為大家介紹一下Windows XP怎么升lol動態鏈接...

  • windows7不待機,win7保持不待機

    windows7不待機,win7保持不待機 相關圖片win7系統取消待機我相信很多win7的用戶和朋友都覺得電腦自動長時間待機很煩人。那么如何在沒有待機的情況下設置win7呢?接下來,超人軟件編輯器將介紹如何設置沒有自動睡眠的winw...

  • 星光四射,星光四射的意思

    星光四射,星光四射的意思 相關圖片ps打造星光四射這個例子的想法是:導入lotus材質,然后為其制作flash動畫效果。畫出遮罩的圖形,然后利用圖形之間的疊加原理制作出星星四向動畫效果第一部分制作的蓮花動畫。(星...

  • 服務器拒絕了你發送離線文件,服務器拒絕了你發送離線文件的請求

    服務器拒絕了你發送離線文件,服務器拒絕了你發送離線文件的請求 相關圖片qq離線文件服務器拒絕近日,不少QQ用戶和朋友反映,在發送脫機文件時,系統會提示服務器拒絕發送脫機文件的提示。服務器拒絕向您發送脫機文件是怎么回事?現在,跟隨超人軟件編...

  • steam黑屏怎么辦,steam商店頁面黑屏

    steam黑屏怎么辦,steam商店頁面黑屏 相關圖片steam交易電腦自動關機Steam,作為一個優秀的游戲平臺,我相信大家都會通過她購買付費軟件。那么蒸汽交易的黑幕呢?接下來,超人軟件編輯將介紹如何解決蒸汽交易的黑屏問題。希望...

  • 轉到,銀行卡怎么轉到支付寶

    轉到,銀行卡怎么轉到支付寶 相關圖片微信錢免費轉到銀行卡轉到URL行為允許用戶在當前窗口或指定框架中打開新頁面。它不僅可以由不同的事件執行,還可以一次更改兩個或多個框架的內容1。Dreamweaver CS5轉到UR話費變微信...

  • pptv怎么一次下載全部視頻,pptv聚力下載視頻在哪里找

    pptv怎么一次下載全部視頻,pptv聚力下載視頻在哪里找 相關圖片如何把pptv的視頻下載到手機作為一款功能強大的視頻播放軟件,pptv被認為是一種受歡迎的電影觀看方式。pptv如何下載視頻?pptv如何下載電影?接下來,超人軟件編輯將介紹pptv相關教學...

  • html的disabled,css disabled

    html的disabled,css disabled 相關圖片jsp disabled一些表單屬性,如readonly和disabled,在HTML中很容易被忽略,但它們在獲取值方面有所不同。感興趣的朋友可以學習這篇文章1。只讀只讀屬性,可獲取值html中decoration...

熱評文章

  • 手機怎么看vcf文件,vcf手機文件查看器

    手機怎么看vcf文件,vcf手機文件查看器 相關圖片微信vcf文件怎么打開最近,許多合作伙伴報告說,他們在使用計算機的過程中發現了后綴為VCF的文件。那么VCF是什么文件?如何打開VCF文件?接下來,超人軟件編輯會介紹給大家,希望...

  • ps邊框制作教程,手工邊框制作

    ps邊框制作教程,手工邊框制作 相關圖片ps簡單相框制作方法其效果如下:選擇一張圖片,用FW打開,在圖片上創建一個圖層,制作一個與圖片大小相同的矩形,用白色填充以添加效果。邊的具體設置如圖所示。注意這里的顏色...

  • playerunknown,更新playerunknown

    playerunknown,更新playerunknown 相關圖片playerunknown國際服由于絕地武士的生存,蒸汽平臺也被越來越多的人使用。但也有不少玩家反饋,在運行steam的過程中更新playerunkown時出現錯誤,導致游戲正常連接失敗。所以aplayerunknow...

  • 透明度怎么設置,如何設置圖片透明度

    透明度怎么設置,如何設置圖片透明度 相關圖片qq自定義主題怎么設置透明度這個例子為您介紹了一些關于div的設置,例如border和transparency的編寫方法。對于不知道的人,請參考以下邊框:style=border stylqq空間透明度怎么設置...

  • xp怎么加入局域網,xp局域網設置

    xp怎么加入局域網,xp局域網設置 相關圖片w7和xp怎么創建局域網局域網可以幫助一個辦公室的多臺計算機實現更快的文件管理、應用軟件共享、打印機共享等功能。那么XP是如何建立局域網的呢?接下來,超人軟件將介紹如何為...

  • 一個完整的項目流程,什么是流程

    一個完整的項目流程,什么是流程 相關圖片項目全過程流程我收到一封郵件,里面有幾個關于設計過程和原型的問題。UI設計過程:線框-低保真原型-模型-高保真原型,這個過程對嗎?今天我們來討論一個完整的UI設計過程辦會流...

  • 此windows7副本不是正版,windows7副本不是正版

    此windows7副本不是正版,windows7副本不是正版 相關圖片已激活此windows副本尊敬的windows系統用戶,您在使用本機過程中是否遇到過此windows副本不是正版的情況。如果此windows副本不是正版的,會有什么問題?如果此windo7601副本不是正版...

  • ps修復眼睛一大一小,ps人像雙下巴怎么處理

    ps修復眼睛一大一小,ps人像雙下巴怎么處理 相關圖片ps如何處理下巴贅肉我想你們在平時拍照的過程中遇到了被雙下巴拍到的困境。那么PS怎么擺脫雙下巴呢?現在,超人軟件編輯將介紹PS如何擺脫雙下巴。來看看PS怎么去雙下巴?ps怎么瘦...

  • 表格中怎樣拆分單元格,單元格中的內容怎么拆分

    表格中怎樣拆分單元格,單元格中的內容怎么拆分 相關圖片wps中的拆分單元格在哪里今天,我將介紹如何在Dreamweaver中拆分單元格來拆分單元格,首先將光標移到要拆分的單元格上,單擊屬性窗口中的“拆分單元格”按鈕,在彈出的窗口中填寫要...

  • 火狐瀏覽器最好的翻譯插件,火狐瀏覽器一鍵自動翻譯

    火狐瀏覽器最好的翻譯插件,火狐瀏覽器一鍵自動翻譯 相關圖片火狐瀏覽器手機版翻譯我相信當你使用Firefox瀏覽器瀏覽互聯網時,你會被外來詞的全屏所困擾。那么Firefox如何翻譯網頁呢?接下來,超人軟件編輯器將介紹如何翻譯火狐的網頁,如果火...

關注微信

变脸官网查询