HTML & CSS ? 15個超酷的CSS3代碼特效展示

15個超酷的CSS3代碼特效展示

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

今天跟大家分享與CSS3相關的特效展示案例，這些例子特效主要由CSS3編寫出來，除了新鮮有創意之外，編寫代碼質量也很高，對于前端人員或設計師都有參考的價值，當然有的不是全CSS3編寫的，部分是需要與JS代碼結合使用才能發揮效果。

下面大家一起看看這些CSS DEMO，確實很酷哦！

Color Extraction Effect

全個像幻燈版一樣的圖像色板，使用CSS濾鏡和Vibrant.js實現。

color-extraction-2
查看演示

CSS True Titles

使用CSS做蒙版、遮罩特效

css-title-17
查看演示

Flipside

很酷的提示框動畫效果，但在Chrome瀏覽器查看還是有點不完美。

flipside-3
查看演示

Netflix Logo In CSS

純CSS實現的 netflix logo動畫效果。

netflix-4
查看演示

Simpsons in CSS

純CSS繪制卡通人物頭像：阿森一族

simpson-in-css-5
查看演示

Clippy

Clippy是一個在線生成工具，主要用來實現css背景剪切功能（可查看css clip屬性詳解）

clippy-6
查看演示

A single DIV

好多使用CSS繪制的圖像，而且只是用一個DIV標簽實現！

single-div-7
查看演示

Motion Blur Experiment

一個運動模糊的彈窗，很有創意，使用 SVG 濾鏡實現。

motion-blur-8
查看演示

Silon

logic-9
查看演示

CSS space shooter

一個3D游戲動畫演示，CSS真強大啊

space-shooter-10
查看演示

Blackout

blackout-1
查看演示

X-ray

x-ray-11
查看演示

Squiggly

Squiggly-11
查看演示

Pure CSS content filter

css-filter-13
查看演示

Elastic stroke CSS + SVG

CSS和SVG實現的文字動效

elastic-14
查看演示

Rotate Clock

rotate-clock-15
查看演示

Isometric experiment

isometric-16
查看演示

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

與 、 相關的文章

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

+ 添加評論2 Responses to “15個超酷的CSS3代碼特效展示”

  1. 路楊 - 回復
    2015 年 06 月 19 日 下午 5:08

    CSS3 的確很強大。貌似機器配置差的話有點卡

  2. 靜水流深8907 - 回復
    2015 年 06 月 16 日 下午 4:23

    CSS3沒有做不到，只有想不到！


{ 發表評論 }