Menu

為Web設計人員和開發人員加載10個CSS旋轉器片段

<返回列表

自定義紡紗機是一種有趣的方式來呼吸你的網頁的生命。

你可以找到很多定制站點提供免費紡紗機作為GIF。但是,如果您想使用CSS和SVG創建動畫呢?

這就是這篇文章的目標,因為我將分享一堆免費的定制紡絲器,它們都是由CSS驅動的。

不管你是在設計一個Ajax驅動的應用程序,還是想給你的站點添加一個有趣的預加載程序,不管是哪種方式,這些片段都是為工作而構建的。

1.各種CSS紡紗機

這個出色的自定義CSS紡絲器集合來自于開發者IulianSavin。

在這里你會發現大量的動畫樣式,從旋轉的圓圈到動畫條,甚至還有一個自定義的乒乓風格的加載器。說真的那個太棒了。

這些裝載機都是完全可用資產您可以將其復制/粘貼到您自己的項目中。

請注意,這些紡絲器也來自這個GitHub回購在這里,您可以下載源代碼的全部。通常比從代碼筆復制/粘貼要容易一些。

2.月食旋轉器

這是一個超級獨特的旋轉器,模仿日食?;蛘吣撤N燈光顯示…我不太確定,但我知道看起來很棒。

整個過程依賴于非常少的HTML,而且它被削減得更小,這要歸功于哈梅爾模板。

您可以將Haml和Sass代碼編譯成普通的HTML/CSS,如果這對您來說也更容易定制的話。

3.超級簡單的CSS旋轉器

它不會比一個燈火通明的圓圈簡單得多。

這正是托馬斯·曼德利德創造的設計所能找到的。這是一個超級基本的代碼片段,CSS旋轉器是一個真實的景象。

這不是這個名單上最時尚的設計之一,但它做的工作。

記住這一點,如果你需要一個基本的旋轉器,將匹配任何網站。

4.Beaulti圈

我不太清楚Beaulti循環的名字和什么有什么關系。

但是我確信這個定制的css自旋器是瘋狂酷。動畫風格太有趣了,然后你會意識到這完全是用CSS和HTML構建的。更令人印象深刻。

整個圓圈設計是超級干凈和極簡主義。它會迅速抓住你的注意力,使它完美地作為一個定制的紡紗裝載機。

我確實認為這對公司網站來說有點浮華,但是如果你把顏色更新成淺藍色,再把它變小一點,這個東西就能用了。

5.純CSS紡紗機

開發人員馬克卡恩把這些純粹的CSS紡絲為您的享受。

這里有一個非常有趣的混合,在不同的顏色之間交替,再加上一個旋轉的所有顏色一起在一個彩虹。他們看起來很激進,很專注于科技。

如果你喜歡這個旋轉器的黑色設計,它可以很好地為你的網站工作。只需確保您自定義旋轉器的顏色,以匹配您的布局。

6.紡紗機W/字體圖標

下面是一個非常有趣的想法,將定制CSS 3動畫與免費圖標字體.

在這支筆里,你會發現一堆來自Icomon的圖標。但它們都是動畫,使用CSS創建旋轉圖形,看上去像定制的紡絲器。

基本上它們是定制的紡紗機。因為它們對CSS中的字體屬性進行操作,所以只需對它們進行更多的操作。

看看這個,試著把設計弄得亂七八糟。經過15-20分鐘的修修補補,你可能會喜歡最終的結果。

7.奧林匹克環

這肯定是我一段時間以來見過的最有創意的裝載機之一。

如果你把奧運五環合并成一個HTML文檔,再加上CSS 3,你就會得到這個優秀的旋轉器設計。

您會發現少量JavaScript代碼,但是直接處理動畫。該代碼處理延遲,通過JavaScript更容易管理。其他一切都只是CSS。

盡管如此,您仍然可以將其轉化為一個純CSS解決方案,只需做一些修改。我幾乎認為奧運會組織者應該把這個裝載機添加到他們的網站上。

8.純CSS Android預裝紡紗機

這里有一個非??岬募虞d旋轉集,它是在典型的Android加載圖形之后設計的。

如果你曾經使用過Android,你會發現很多這些加載圖形。它們當然不是100%的復制品,但它們非常接近。

這支筆只使用純CSS,這使它成為任何一個網頁開發人員的絕佳選擇。

9.彈跳延遲裝載機

雖然這個例子在技術上并不是一個旋轉器,但是它還是太酷了,不能從這個列表中刪除。

開發人員JoniTrythall從零開始創建了這些彈跳加載器球,使用了一點CSS和一些創造性的奇思妙想。

代碼本身運行在Haml&SCSS上,但您可以輕松地將其編譯到CodePen中的原始HTML/CSS。這可能更容易復制/粘貼到您的頁面,如果您不熟悉預處理.

10.旋轉點

最后,但肯定不是最不重要的是這個超級有趣的旋轉裝載機。

它是由較小的點組成的,它們都經歷了一個周期的旋轉。這意味著它被設計為在特定的點上減速,所有的點都排列在一起,然后加速完成另一場革命。

毫無疑問,這個旋轉器會在你的頁面上翻過頭來。它也足夠微妙,它可以輕松地融入任何布局。

開發人員ormer Fatih在創建這段代碼時考慮到了簡單性,因此您可以讓它只使用8行HTML和不到50行的CSS。

異想天開極簡主義用一些額外的東西來吸引你的注意力。


最新網站設計資訊
企業網站建設

企業網站建設優化一條龍,多年品牌網站設計,營銷網站開發,手機網站制作,響應式網站設計

聯系我們

電話:18868949445QQ:1611387063 郵箱:[email protected]

聯系云軒總監微信

微信
日韩久久久久久中文人妻,老熟女BBXX,japanese日本人妻共享,丝袜无码一区二区三区