• <menu id="uqgee"></menu>
  • 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]

    聯系云軒總監微信

    微信
    古董鉴定