css3實現動畫的好處-tft每日頭條

css3實現動畫的好處

生活更新时间:2025-02-10 23:54:55

點擊上方藍字關注“小鄭搞碼事”，每天都能學到知識，搞懂一個問題！

在移動端開發中，經常會使用到loading動畫，然而，實現 loading動畫的方式也很多，loading的展示樣式就更多了。今天這裡我來展示一下其中一種有意思的loading動畫。看我怎麼搞。

先看一下大概的效果圖：

css3實現動畫的好處（如何用css3實現這個有意思的loading動畫）1

對就是上面展示的這樣子。看起來像個鬧鐘在旋轉似的。

其實現原理很簡單的：

1、将圓分為左右兩個半圓作為顯示區域，溢出隐藏掉。

2、分别在左右半圓中繪制一個相同大小的半圓，将填充背景色，以供旋轉使用。

3、根據需要旋轉有背景色的半圓即可。

下面看一下具體實現的技術點：

一、dom結構

css3實現動畫的好處（如何用css3實現這個有意思的loading動畫）2

這個結構也很簡單，div.loading是相對定位，直接子元素div.left和div.right是絕對定位，設置成溢出隐藏，最後來旋轉i.bg。

二、動畫的設定

css3實現動畫的好處（如何用css3實現這個有意思的loading動畫）3

如上所示：動畫設定需要注意，旋轉的中心點。左右兩邊不一樣。

三、完美銜接

css3實現動畫的好處（如何用css3實現這個有意思的loading動畫）4

為了讓左右兩模塊完美的銜接上，需要左邊的旋轉背景加一個1s的延遲（根據總的時間定）。

最後總結：

css3的動畫屬性好好組合利用，能夠實現好多有意思的效果。重要的是要學會利用這些看着有限的知識點來解決工作中碰到的各種問題。

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部

网友关注

生活老師傅教你裝修前要準備些什麼
新房裝修前，最主要的準備工作不隻是找一家合适的裝修公司；還需學會相應的裝修攻略。比如設計攻略、軟裝搭配攻略、配色攻略等！這些攻略，我們今天...都不說！今天帶小夥伴們看看新房最最最基礎的——硬裝施工！拆除重建才是裝修第一步1、毛坯房：戶型改... 2022-11-10
生活正青春裡林睿和方靜誰赢了
在職場中，觀衆們最喜歡看到幾位主角，你争我搶的樣子，畢竟在銷售行業中。有搶單的現象，也可以說是很正常的情況。在《正青春》這部電視劇中，sw公司雖然是一家化妝品公司，但其中的爾虞我詐也非常多，畢竟公司裡有很多女人，有女人在的地方，就會有各種各... 2023-03-22
生活 excel中text函數的使用方法
TEXT函數函數可将數值轉換為文本，并可使用戶通過使用特殊格式字符串來指定顯示格式。需要以可讀性更高的格式顯示數字，請使用TEXT函數。需要合并數字、文本或符号時，請使用TEXT函數語法：TEXT(value,format_text)=Te... 2023-02-06
生活簡單常見草字
很多喜歡書法的朋友，都有這樣一個習慣，就喜歡将自己練習完書法的草紙進行統一整理，而整理之後，再次重新使用，在廢舊草紙上繼續練字，有的是字上練字，有的喜歡在背面再次練字，這種習慣，一方面可以節省紙張，另一方面，也可以做到釋放心情，一舉兩得，相... 2022-11-08
生活 ios14怎麼批量删除短信
相信很多用iPhone的小夥伴，信息應用裡面都充滿了各種信息。并且大多數都是垃圾營銷信息、驗證碼信息、通知信息等等。想要全部删除的時候發現點擊【編輯】的話，隻能一條一條手動選擇删除或者是點擊全部已讀。那麼怎麼樣可以快速全部删除呢?1、打開手... 2023-01-01
生活保爾和張海迪誰厲害
故天将降大任于是人也，必先苦其心志，勞其筋骨，餓其體膚，空乏其身，行拂亂其所為，所以動心忍性，曾益其所不能。——《生于憂患，死于安樂》通過保爾的成長道路，告訴人們的是一個人隻有在艱難困苦中戰勝敵人，也戰勝自己，才會創作出奇迹，才能成為鋼鐵戰... 2023-03-22
生活松樹皮要泡多久能栽蘭花
松樹皮要泡多久能栽蘭花?松樹皮大約要泡半年，才能栽養蘭花植物松樹皮才采收後，需要将其切成大小均勻的塊狀，放在水中煮沸，進行消毒，今天小編就來聊一聊關于松樹皮要泡多久能栽蘭花?接下來我們就一起去研究一下吧!松樹皮要泡多久能栽蘭花松樹皮大約要泡... 2022-05-31
生活江蘇原裝溫控表誠信互利
參展者來自于全球20多個國家和地區的500多家企業，屆時相關領域最新科技和産品将同台鬥豔。據悉，江蘇東祥儀表有限公司作為江蘇金湖縣政府特别推薦參展的8家企業之一，近年來其科研團隊在流量測量自動化控制方面做出重大突破，新産品‘東祥電遠傳塑料管... 2023-01-22
生活迷你世界的收甘蔗機怎麼做簡單
迷你世界是一款卡通的沙盒類遊戲，非常的适合喜歡卡通風格的玩家來玩這些遊戲。迷你世界有着不同的遊戲模式，适合喜歡不同風格的玩家前來嘗試，在生存模式中每個遊戲的玩法處理都不太一樣，隻要你的技術和動手能力夠強，就能在迷你世界中主宰世界。值得一提的... 2022-11-30
生活四件套水晶絨和法蘭絨哪個好
相信很多人對鹿皮絨三件套和法蘭絨三件套的選擇上會比較糾結，不知道這兩種三件套哪種好?今天我給大家整理了一些關于這方面的問題以及鹿皮絨三件套和法蘭絨三件套的區别是什麼?1、法蘭絨三件套法蘭絨三件套是我們比較常見的一種材質，而且它的适用範圍也很... 2022-12-17
生活牙結石是不是就是牙裡有石頭
作者：KQ88口腔醫學網牙結石又稱牙石，通常存在于唾液腺開口處的牙齒表面。如下颚前牙的舌側表面，上颚後牙的頰側表面和牙齒的頸部，以及口腔黏膜運動不到的牙齒表面等處。牙結石開始是乳白色的軟垢，會因逐漸的鈣化而變硬。它是由75%的磷酸鈣，15%... 2023-01-02
生活涼拌蟲草花的做法
新鮮的蟲草花，比較難見；前幾日去超市，又偶遇了它，其實也不能說偶遇，因為之前去買過一回，知道它擺放的大概位子，所以，現在隻要去那家超店裡，都會去瞅瞅。果然，隻見它同伴幾人，孤單的躺在冰鮮櫃的角落裡，跟山竹，檸檬做伴，惹人愛的模樣，讓我不忍心... 2022-12-19
生活外貿abd是什麼意思
外貿abd是什麼意思?提單上的ETD是什麼意思呢？同一縮略詞也具有不同的意思，像ETD就是這樣，一般情況下ETD可以表示為兩種情況，比如：，今天小編就來說說關于外貿abd是什麼意思?下面更多詳細答案一起來看看吧!外貿abd是什麼意思ETD是... 2022-11-26
生活真正的沙金手镯價格
真正的沙金手镯價格?沙金是黃金按形态劃分的品種之一，是山體中的岩金被河水沖刷、金和石英礦脈分離而成的黃金，因形态大多細微如砂而得名而黃金一般為掘岩洞取和在含金的江河溪流中淘取，其中礦洞中采取的黃，現在小編就來說說關于真正的沙金手镯價格?下面... 2022-12-11
生活初中生僻成語
初中生僻成語?生僻成語【大而化之】多指工作作風粗糙，把本該細緻具體對待的問題籠統而簡單地處理，今天小編就來聊一聊關于初中生僻成語?接下來我們就一起去研究一下吧!初中生僻成語生僻成語【大而化之】多指工作作風粗糙，把本該細緻具體對待的問題籠統而... 2022-10-16
生活沒有指示白實線變道算違章嗎
所有的實線變道都算違章嗎？交警提醒：這一種情況下不算違章！其實現在已經是我們生活中非常重要的一個交通工具了，随着汽車數量的不斷增加，交通壓力也是越來越大的，所以相關部門在這個時候也是設定了各種各樣的交通規則，以便我們在開車的時候遵守交通規則... 2022-10-29
生活正多面體怎麼折疊
畢達哥拉斯古希臘有許多學者熱衷于幾何的研究，甚至有的學者還熱衷于幾何的教學，這為幾何逐漸形成為一門學科奠定了結構基礎，因為教學與研究不同，研究可以是個案地，獨立地進行，而教學則必須相對成體系，要明确概念，要構建前後關系。關于這一點，普羅克洛... 2023-02-17
生活東海航空公司官網查詢
東海航空公司官網查詢?飛機駕駛艙直接與地面控制中心視頻通話，乘務員實時接受視頻指導進行救援，乘客可以刷微信或者視頻通話7月17日，東海航空與飛天聯合前後艙空地互聯項目簽約，成為國内首家試點前後艙協同空地互聯的航空公司，在全國率先跨入了“互聯... 2023-01-07
生活陳小纭楊幂神評論
這一邊，電視劇《斛珠夫人》還在熱播，除了陳偉霆和楊幂這條主線CP，“帝旭”和“缇蘭”這對副CP也因為人設原因大受關注，女二陳小纭一人分飾兩角，十分出彩。眼看着陳小纭就要擺脫“綜藝咖”、“前女友”的标簽，實現口碑逆轉了，緊接着她就因為在劇外的... 2022-12-11
生活李清照第一美人
李清照第一美人?□李寶路李清照是北宋末、南宋初的才女，吟詩作畫皆通，喜歡讀書，她不但填詞造詣高，對收藏古文奇器也情有獨鐘當然，這與她的丈夫——收藏家趙明誠也有很大關系，下面我們就來聊聊關于李清照第一美人?接下來我們就一起去了解一下吧!李清照... 2023-01-04
生活倒立有什麼好處和壞處
倒立有什麼好處和壞處?一、倒立的好處：提高智力和反應能力，可以治療秃頂、眼花、白發、面部肌肉下垂、乳房松弛下垂、腹部肌肉松弛下垂、臀部肌肉下垂、精神不振、易疲勞、未老先衰、重者腦疾病和心髒病纏身，我來為大家科普一下關于倒立有什麼好處和壞處?... 2022-06-22
生活反轉人生太奇葩
大家好，歡迎來到“爛片觀衆室”我是不愛看爛片的諸葛小喬但是看爛片也要開心呀小喬不會是最後一個看《反轉人生》的吧真的太好笑了吧陳暢導演周依然馬思超李川等領銜主演豆瓣尚未開分，很好笑可以看女主周依然飾演的沐想想，家庭貧困的好學生外号小透明，還會... 2022-11-29
生活豬肺雪梨湯怎麼做止咳潤肺
前陣子吃上火導緻感冒因為沒有及時去看醫生，感冒就一直反複着。最嚴重的是咳嗽總是止不住，于是終于在一次吃了上火的食物後咳的差點背過氣。挂了急診，輸液緩解了很多。吃了幾天的藥，但是咳嗽依然在反複中和鄰居聊天，介紹了一個民間止咳潤肺的偏方，據說是... 2023-03-27
生活化州市客運樞紐場站規劃目标
從三月30日起保運集團陸續恢複縣際班線和省際班線，4月1日起保定市陸續恢複去往山東青島、河南濮陽等地的客運班線。3月30日起，已恢複客運班線發車情況：1、672路：保定至唐縣保定客運中心站發車時間：9:30、14:30、10:30、11:3... 2022-12-11
生活走進二月的早春
和絹妙的暮春并肩走進五月晨陽晨陽，從窗子裡進來帶着新開的月季香氣我的高興，采了一把我的快樂，紮了一束高興送給了貝殼風鈴快樂送給了金屬風鈴貝殼風鈴多了個顫音金屬風鈴多了個轉音我在兩串風鈴間先聽了《再回首》後聽了《Hing歌》“這花，叫流蘇”風... 2023-02-19
生活張天福白茶小罐茶
随着春節的日益臨近，購買茶禮贈送親友的人越來越多。相信，不少茶友都注意到了頻頻在朋友圈及抖音等平台刷屏的茶王贊白茶。圖片截自朋友圈廣告茶王贊由國家一級演員張光北代言（代表作品：《亮劍》，代表人物：楚雲飛），而且他還是茶王贊的聯合創始人。那麼... 2022-12-15
生活脈管炎好轉有哪些症狀
脈管炎是現在非常常見的一種高發病，該病給人們造成的危害是相當嚴重的。很多患者因為初期症狀輕微得不到重視導緻病情不斷的惡化加重，最後出現難以挽回的後果。如果我們對脈管炎有一定的了解，這樣就能及時的發現治療避免更大危害的産生。下面我們先來了解下... 2023-01-21
生活羅傑費德勒複出
告别賽前，費德勒在新聞發布會上說自己很開心。圖/新華社9月24日晨，費德勒結束了職業生涯最後一場比賽。拉沃爾杯首個比賽日，代表歐洲隊出戰的費德勒搭檔納達爾錯失賽點後1比2不敵世界隊組合索克/蒂亞福。結束這場比賽後，41歲的費德勒正式宣告退役... 2022-12-09
生活花盆土壤除蟲小妙招
花盆土壤除蟲小妙招?給花盆土壤殺蟲隻需要準備一些橘子皮就可以了，我來為大家科普一下關于花盆土壤除蟲小妙招?以下内容希望對你有幫助!花盆土壤除蟲小妙招給花盆土壤殺蟲隻需要準備一些橘子皮就可以了。接下來隻需要将橘子皮放入水杯中，接着倒入清水就可... 2022-06-13
生活 nor flash市場容量
norflash市場容量?36氪獲悉，根據TrendForce集邦咨詢研究顯示，PCOEMs自2021年11月上旬起基于上遊半導體物料供給改善而恢複部分clientSSD訂單，幫助供應商得以将庫存維持在較低水位，使得供應商降價求售的壓力并不... 2023-01-13

tft每日頭條

> 生活

> css3實現動畫的好處

css3實現動畫的好處

相关生活资讯推荐

热门生活资讯推荐

网友关注