HTML & CSS ? 30個免費的CSS3動畫片段代碼

30個免費的CSS3動畫片段代碼

發表于: HTML & CSS. 評論 (1)
Sponsor

對于網頁設計師來說，前端代碼CSS/HTML不是強項，但有時候也是需要寫的。特別是現在流行CSS3動畫，學習和了解一些相關知識是必須的。

CSS3動畫其實不算復雜，比JS簡單得多，今天我們整理自CODEPEN上的一些好看的CSS3動畫片段，從這些案例中設計師可以從中學習，并了解一些新的代碼寫法，又或者獲取一些動畫靈感也是不錯的哦。

以下為CSS3動畫案例整理：

青蛙與小船動畫

美麗的小河，有一只可愛的小蛙，如果配合“呱呱呱”或者船只的聲音就更贊了。

full page css3 animation sailboat
查看代碼

天所圖標

animated weather icons howto code
查看代碼

加載動畫

open source css3 loader animations
查看代碼

網頁彈窗效果

css3 magnific popup code
查看代碼

Cube Animation

css3 rotation loop cube animated 3d
查看代碼

Circle Illusion Loader

illusion circle loader animation effect
查看代碼

贊按鈕效果

tumblr style animation like unlike
查看代碼

Minimal Throbbers

animated circles throbbers free code
查看代碼

CSS3 Animated Effects

hover animated effects css3 code
查看代碼

Map Marker

css3 only map marker animated icon
查看代碼

Cloudy Spiral

cloudy spiral effect css3 open source
查看代碼

CSS3 MacBook Air

css3 macbook air icon animated movable
查看代碼

Concentric Spheres

loading animation freebie concentric spheres
查看代碼

CSS3實現3D立方體

css3 animation effect using cubes
查看代碼

Slidedown UI

pure css3 slide down menu toggle
查看代碼

網頁開頭按鈕

css3 glowing light switch on off
查看代碼

轉動的齒輪

moving css3 gears icon style
查看代碼

Green Beaker

green science beaker lab icon motion
查看代碼

Progress Bars

html5 animated css3 progress bars
查看代碼

PayPal Animation

css3 paypal loading animation effect open source
查看代碼

CSS3 加載樣式

css3 loader animation effect freebie
查看代碼

帶動畫的Wifi 圖標

animated wifi lines symbol css3
查看代碼

CSS3 Buttons

css3 button hover animation effect
查看代碼

Animated Checkbox

css3 animated check box effect
查看代碼

Camera Icon

css3 pure camera icon animation open source
查看代碼

漂亮的旋轉按鈕

glowing light circle rotation effect
查看代碼

iOS-Style Switches

css3 switches ios7 ios8 open source code
查看代碼

Working Clock

css3 working clock animated effect
查看代碼

Rabbit

jumping vector css3 rabbit effect animated
查看代碼

CSS3 Loading Bar

css3 loading bar animated effect
查看代碼

整理：WDL

推薦：查看最受歡迎的 301 個設計網站 → http://hao.shejidaren.com
交流：為設計新人提供的設計交流群，請加入UI設計交流群，分享經驗、接單、求職、聊設計。
贊助商鏈接

與 相關的文章

贊助商鏈接
設計達人微信交流社區：shejidaren888
喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。
«
»

+ 添加評論One Response to “30個免費的CSS3動畫片段代碼”

  1. 鄔磊 - 回復
    2015 年 01 月 13 日 上午 11:44

    不錯，學著做做~~


{ 發表評論 }