您現在的位置是:電腦技術吧?>? 組裝維修 ??>??餅狀巖芯,柱狀餅圖??>??正文詳情

餅狀巖芯,柱狀餅圖

隨天藍2019-11-22 15:21:41 人圍觀
簡介如何做餅狀統計圖今天,我們想達到一個長任務等待的提示效果,設計師給了我一個GIF效果圖,內容如下:根據公眾的實踐,我應該直接按照圖片,調整布局,然后早點回家娶個老婆,

今天,要實現一個長任務等待提示效果。

  然后設計師就把做好的gif效果圖給我,就是下面這個:

  按照大眾做法,我應該是把圖片直接按圖索驥,調調布局,然后早早回家抱老婆。

  但是,我這個人,天生不安分守己。

想到是用在客戶端,客戶端又是用的webkit內核,于是,立馬決定使用CSS3來折騰一番。

  外面的光環很好實現,360度轉轉轉就OK. 但是,中間那個雞蛋轉轉轉的可不是好啃的骨頭啊。

人家師傅餅前一分鐘,餅下十年功啊。

  我生小輩想要習得這轉餅的精髓,可得要好生琢磨一番啊!  如果您手頭的是IE10 這類支持animation的現代瀏覽器,您可以狠狠地點擊這里:CSS3餅狀圖loading旋轉動畫demo

  截圖是死的,demo是活的。

建議點上面的地址去仔細對比CSS3實現和gif動畫效果。

  不難發現,這個gif尺寸又大,效果也不流暢,還燒性能。

相比之下,立馬被CSS3實現甩出了2條南京路。

  CSS3效果更佳、性能更高、資源占用更少大家都認同了。

關鍵是,這個大餅它是怎么轉起來的?  略復雜。

  蛋餅旋轉技能傳授  師父領進門修行在個人,聽不懂我也沒辦法啦~~  我們肉眼看上去是一個雞蛋被攤在了整個餅上,實際上,這只是個障眼法。

  實際攤的雞蛋,只有半個餅那么大。

還有半個餅位置是長得像雞蛋的假雞蛋和長得像大餅的假大餅。

顯然這句話你聽不懂,因為我自己都沒聽懂,哈哈~~所謂一圖勝千言,示意圖走起~  下圖示意的就是雞蛋餅上的雞蛋從100%變小成0的過程。

  1. 這是沒有干擾的蛋餅,你看到的是半個假餅和半個假蛋。

  2. 當我們煎餅動畫轉起的一瞬間,我們讓假的餅子隱藏回家打醬油去。

于是,從上面看,我們看到的就是滿滿一層的雞蛋。

  3. 真雞蛋轉起,你會發現,半個真雞蛋,由于逆時針旋轉,露出了點空(左側上部)。

  demo對應效果類似(淺色看成雞蛋):

  4. 當真雞蛋旋轉了180度(半圈)的時候,真假雞蛋正好重合在了一起,于是就是看到的就是蛋餅上半面雞蛋。

  demo對應效果類似:

  demo對應效果類似:

  6. 一直旋轉到360度,其完全被假的餅子遮蓋,一點雞蛋都看不到了。

完成了從全部都0的動畫過程。

這就是蛋餅轉轉轉的基本原理。

  CSS3表示  可見,要實現我們想要的蛋餅效果,我們需要這些東西:  圓形的蛋餅子 對應下面類名為inner元素  旋轉的半面真雞蛋 對應下面類名為spiner的元素  不動的半面蛋餅子,前半程隱藏,后半程出現 對應下面類名為masker的元素  不動的半面假雞蛋,前半程出現,后半程隱藏 對應下面類名為filler的元素 CSS Code復制內容到剪貼板

    div class=inner div class=spiner/div div class=filler/div div class=masker/div /div
  inner主要實現圓以及背景色;  spiner主要實現半圓的360度逆時針旋轉,其背景色有別于父元素的背景色;  filler半圓,定位在右側,與旋轉元素同樣背景色;后面的180度隱藏;  masker半圓,定位在左側,與大背景色色值相同;旋轉前180度隱藏,之后顯示遮蓋;  其中,360度旋轉CSS代碼如下:  CSS Code復制內容到剪貼板
    @keyframes spin { 0% { transform: rotate(360deg); } 100% { transform: rotate(0deg); } }
  因為是逆時針,所以是從360deg到0deg.  前半程出現,后半程隱藏,可以借助animation step相關的timing function實現,代碼如下:  CSS Code復制內容到剪貼板
    @keyframes second-half-hide { 0% { opacity: 1; } 50%, 100% { opacity: 0; } }
后半程顯示則是: CSS Code復制內容到剪貼板
    @keyframes second-half-show { 0% { opacity: 0; } 50%, 100% { opacity: 1; } }
于是,我們只要加個動畫時間,以及無限執行就OK啦~~ CSS Code復制內容到剪貼板
    .spiner { transform-origin: rightright center; animation: spin .8s infinite linear; } .filler { animation: second-half-hide .8s steps(1, end) infinite; } .masker { animation: second-half-show .8s steps(1, end) infinite; }
  其他細節都是定位什么的,很基礎的知識,就不?嗦啦~~  餅其實還沒有做好  啊,搗鼓了這么久還沒有結束啊?  沒錯。

仔細查看gif動畫,你會發現,蛋餅它是從全盤都0再到整個360度覆蓋的。

  而,上午搗鼓的動畫只是從360度無死角覆蓋到0覆蓋。

一旦覆蓋結束,就又要走360度開始,不連貫,怎么破?  我是這么處理的:  再覆蓋一個蛋餅從0度到360度展示的動畫。

與一直搗鼓的動畫前后半程分別展示就可以了。

  于是,最終有如下HTML:  XML/HTML Code復制內容到剪貼板

    div class=inner div class=spiner/div div class=filler/div div class=masker/div /div div class=inner2 div class=spiner/div div class=filler/div div class=masker/div /div
inner和inner2也使用的前后半程隱藏的動畫,動畫時間正好是一個周期的2倍。

CSS Code復制內容到剪貼板

    .inner { opacity: 1; animation: second-half-hide 1.6s steps(1, end) infinite; } .inner2 { opacity: 0; animation: second-half-show 1.6s steps(1, end) infinite; }
于是,就有了完美的做蛋餅效果了。

版權聲明:本文由 隨天藍 整理編輯。

原標題:餅狀統計圖,餅狀

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

文章評論

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

    用戶名:

    驗證碼:

作者推薦

  • pdf怎么轉文檔格式,docx怎么轉換jpg

    pdf怎么轉文檔格式,docx怎么轉換jpg 相關圖片pdf改為docx我相信大多數小伙伴使用PDF轉換器轉換成word后,文件擴展名就是。醫生?所以最近,許多小伙伴來問小編輯如何將PDF轉換成docx格式。現在,超人軟件編輯將介紹手機pdf怎么轉...

  • 鼠標設置,電腦鼠標沒反應怎么辦

    鼠標設置,電腦鼠標沒反應怎么辦 相關圖片鼠標點了電腦沒反應首先,讓我們看看這個例子的效果。如果鼠標在場景中的不同位置被刷過,場景中的惡棍會有不同的反應。特別有趣的是,當鼠標穿越的速度不同時,反應的強度也...

  • 帶命令行的安全模式,命令提示符進入安全模式

    帶命令行的安全模式,命令提示符進入安全模式 相關圖片windows安全模式Bat命令可以幫助用戶在win10系統中快速進入安全模式。win10如何使用bat命令行進入安全模式?下一步,超人軟件編輯將介紹win10系統的bat命令,趕快win7安全模式怎么進...

  • 網頁設計要注意什么,網頁設計需要什么

    網頁設計要注意什么,網頁設計需要什么 相關圖片網頁設計注意要點一。記住:你能控制的時間是有限的。我只能在4秒鐘內瀏覽普通網頁,所以你沒有足夠的時間吸引用戶并讓他們繼續瀏覽你的網站。也就是說,你應該盡可能準確地描...

  • 打開軟件假死,頁面假死

    打開軟件假死,頁面假死 相關圖片應用程序假死最近,許多小伙伴報告說,當他們的win7系統計算機打開文件夾時,他們總是裝死。那么win7打開的文件夾的偽死呢?接下來,超人軟件將為您帶來一個解決方案,解決wi一打...

  • 派派豬理財怎么樣,派派豬官網

    派派豬理財怎么樣,派派豬官網 相關圖片派派靠譜嗎怎么樣現在支付寶的收入越來越低,人們開始關注其他金融產品。他們中的一些人選擇了一種叫做餡餅的金融產品。派豬可靠嗎?讓我們與廣州下屬超人軟件站編輯派豬一起...

  • 代碼示例文字英文,楔形文字

    代碼示例文字英文,楔形文字 相關圖片文愛示例文本隱慾效果說明:鼠標放在文本上,文本樣式會發生變化,如無下劃線、文本會閃爍等,結合其他樣式屬性,也可以實現按鈕式文本鏈接,效果如圖所示具體操作步驟:步驟...

  • 派派是不是微信好友,派派新版本怎么刪通訊錄好友

    派派是不是微信好友,派派新版本怎么刪通訊錄好友 相關圖片有對方微信號怎么整人拍拍是一種植根于熟人的聊天和社交軟件。最近,在我的青春年華里,派派再一次受到關注。那么餡餅是如何欺騙朋友的呢?現在,超人軟件編輯將為大家介紹一...

  • 中外廣告差別,什么是好廣告

    中外廣告差別,什么是好廣告 相關圖片哪個國家的廣告好在網絡傳播領域,我一直在探索與用戶更好的溝通和信息傳遞!在解釋H5廣告與傳統廣告的區別的同時,筆者嘗試用一幅圖片來概括一種內容,讓看護者在形式看似簡單...

  • 硬盤裝系統,固態硬盤安裝系統

    硬盤裝系統,固態硬盤安裝系統 相關圖片新硬盤怎么裝系統最近,很多追求個性的小伙伴反映,他們很想知道如何設置win7硬盤的背景。然后,超人軟件將為您介紹win7系統硬盤后臺的設置方法。請不要錯過它1。弗斯特系統遷移...

熱評文章

  • 南方航空什么座位最好,南方航空未開放選座

    南方航空什么座位最好,南方航空未開放選座 相關圖片東航73h最佳座位南航應用程序是南航正式推出的旅游軟件。通過這個軟件,用戶可以在線選擇座位。那么,南航如何選擇座位呢?現在,超人軟件編輯想介紹中國南方航空公司的iPhone版...

  • 什么是數據庫索引,數據庫索引怎么用

    什么是數據庫索引,數據庫索引怎么用 相關圖片SQL數據庫介紹了indexeddb是一個HTML5 web數據庫,它允許html5web應用程序在用戶瀏覽器中存儲數據。Indexeddb非常強大,對應用程序非常有用。它數據庫...

  • 月輪加速器,月輪加速器怎么樣

    月輪加速器,月輪加速器怎么樣 相關圖片好用的加速器月輪加速器以其自由、良好的減阻效果受到眾多用戶的青睞。但也有用戶發現,月輪加速器在使用過程中的加速效果因人而異,也有合作伙伴發現月輪加速器的加速效果并...

  • txt格式怎么轉換,txt格式轉換

    txt格式怎么轉換,txt格式轉換 相關圖片TXT轉換Excel相信大家在日常工作和學習生活中都會遇到需要將PDF格式轉換成TXT或word格式的情況。如何將PDF轉換成TXT?如何將PDF轉換為word?接下來,讓超人軟件小說格式轉換器...

  • 信件背景,背景

    信件背景,背景 相關圖片純色背景一。焰火創建了一個新文件,白色繪圖板,形成一個矩形,并用eef8e0填充它。這是照片。2。用濾鏡效果眼糖4000填充矩形——如圖3所示抖動。為矩形添加內部照明效信箋壁紙...

  • 安全守護電話手表怎樣調時間,安全守護手表使用方法

    安全守護電話手表怎樣調時間,安全守護手表使用方法 相關圖片安全守護2如何調時間安全手表是一種可以直接在手機上管理手表的軟件。通過該軟件,您可以接收到位置信息,以確保兒童的安全。那么如何使用安全手表呢?保安值班時間怎么定?現...

  • 什么是網頁安全色,安全色

    什么是網頁安全色,安全色 相關圖片安全色為什么顏色雖然大多數現代計算機支持256色(8位),但網頁上只有216色是通用的。即使現在一般支持16位和32位計算機,10%的計算機顏色限制為256色。上面的圖片是網頁web安全色種...

  • Word轉換成PPT,word轉換成ppt的方法

    Word轉換成PPT,word轉換成ppt的方法 相關圖片2010版ppt轉換成word相信在實際辦公過程中,您已經滿足了將ppt轉換成word或PDF的需要。那么如何將ppt轉換成word呢?現在,超人軟件編輯想介紹如何將ppt轉換成PDF,word怎么變成ppt格式...

  • 魔獸世界軍團再臨app,魔獸世界 軍團助手

    魔獸世界軍團再臨app,魔獸世界 軍團助手 相關圖片魔獸世界舊版軍團助手作為《魔獸世界》的官方游戲助理,《魔獸世界》陸軍便攜式應用程序被《魔獸世界》的所有玩家和好友使用。那么,魔獸世界陸軍的便攜式應用程序一直連接在...

  • 色的成語,色和

    色的成語,色和 相關圖片相近色 對比色 互補色一。暖色暖色主要由紅、橙、黃等紅色色調組成。暖色給人溫暖、舒適、動感的感覺,在網頁設計中可以突出視覺效果。在網頁中使用類似顏色時,請注意色塊的大...

關注微信

变脸官网查询