CSS3非常強大,它可以渲染很多你意想不到的特效,而且目前瀏覽器對CSS3的支援也逐漸放開了,所以利用CSS3可以製作一些即美觀又實用的網頁應用,下面12款CSS3應用集錦分享給大家,有原始碼下載。
1、CSS3各大網站分享按鈕 帶網站Logo小圖示
對於CSS3分享按鈕,我們在之前的文章中已經分享幾款了,像純CSS3社會化分享按鈕 可固定網頁頂部、CSS3發光社會分享按鈕等。今天我又收集了一款非常強大的CSS3各大網站分享按鈕,非常多的按鈕,基本上一些國外的社交網站都有。另外,這款CSS3分享按鈕還帶有社交網站的Logo小圖示,外觀非常漂亮。
線上演示 原始碼下載
2、CSS3華麗的Tab選單 帶小圖示動畫
之前我們分享過一款非常出色的CSS3 Tab選單HTML5 SVGTab滑塊選單,結合SVG,Tab選單實現非常靈活。今天我們要再來分享一款基於CSS3的華麗Tab選單,這款Tab選單的選單項是一個個小圖示,滑鼠滑過時,選單項展示對應文字,並出現展開的動畫。
線上演示 原始碼下載
3、CSS3 3D發光切換按鈕 模擬效果很逼真
剛剛我們釋出過一款CSS3開關切換滑動按鈕,應該說出了有點3D立體的效果外,其他都很普通。現在我們要來分享一款更酷的CSS3開關切換按鈕,它不僅具有3D的效果,而且可以發光,當開關處於開啟狀態時,旁邊的小燈就會亮起來,然後燈光投射到開關上,效果挺逼真的。
線上演示 原始碼下載
4、HTML5/CSS3提示框Tooltip動畫
之前我們已經分享過一款HTML5/CSS3分步提示框Tooltip,不過這款提示框主要是用來分步操作提示的,不是真正的Tooltip。今天我們要分享一款利用CSS3實現的提示框Tooltip動畫。當滑鼠移到圖示按鈕上時,就會在按鈕正上方彈出一個Tooltip提示框,並且伴有淡入淡出的效果。
線上演示 原始碼下載
5、3D側躺CSS3選單 3D展開子選單
之前我們分享過一款HTML5/CSS3 3D下拉摺疊選單,尤其是摺疊的動畫非常酷。今天我們再來分享一款CSS33D選單,這款3D選單的特點是它側躺在頁面上,展開子選單時也有漂亮的動畫,並且子選單也呈現3D的效果,大家可以下載這款選單的原始碼學習研究。
線上演示 原始碼下載
6、CSS3手風琴選單 可同時摺疊多個選單
今天開始我們要來分享一些各種樣式的手風琴選單,這次分享的CSS3手風琴選單可以同時摺疊展開多個選單項,選單整體是黑色的風格,並且在每一個選單項上都有很漂亮的小圖示,小圖示像是嵌入在裡面一樣很有質感。
線上演示 原始碼下載
7、純CSS3 3D按鈕 按鈕酷似牛奶般剔透
CSS3按鈕一般都可以設計的非常漂亮,利用投影、漸變等CSS3屬性特效可以把按鈕渲染的十分動感。今天分享的這款CSS3按鈕外觀非常特別,它看上去酷似晶瑩剔透的牛奶,而且在點選按鈕時出現3D效果的動畫,按鈕按下時,按鈕會輕輕的彈動一下,非常逼真。
線上演示 原始碼下載
8、純CSS3實現動感彈性按鈕
今天我們來分享一款很有意思的CSS3按鈕,當你把滑鼠滑過按鈕時,整個按鈕就會全身扭動起來,像是有彈性一樣,非常動感。另外,按鈕的結構非常簡單,你可以通過合適的配色,讓按鈕更加貼切你的網站,最後推薦另外一款CSS3按鈕:CSS3多樣式小圖示按鈕 帶分享按鈕
線上演示 原始碼下載
9、jQuery/CSS3實現超酷的分享按鈕
之前我們介紹過幾款不同的CSS3分享按鈕,效果都挺不錯,像這款CSS3各大網站分享按鈕 帶網站Logo小圖示幾乎包含了所有的社交網站分享按鈕,這款純CSS3社會化分享按鈕可固定在網頁頂部。今天要分享的這款分享按鈕是基於CSS和jQuery的,按鈕比較大,非常大氣。
線上演示 原始碼下載
10、HTML5鯨魚動畫 又一款超酷HTML5動畫
之前看到過同樣效果的一款鯨魚動畫,不過可惜的是那個動畫是用flash製作的。今天我找到了基於HTML5的鯨魚動畫,鯨魚會隨著滑鼠的移動而遊動,畫面非常立體,鯨魚也超級逼真。真的,HTML5確實很給力,HTML5動畫完全可以完成flash能做的事情。
線上演示 原始碼下載
11、純CSS3繪製可愛小男孩動畫 超酷面部表情
之前我們分享過幾個純CSS3動畫特效,比如純CSS3人物行走動畫就非常酷,還有純CSS3AndroidLogo動畫繪製也很酷。今天我們又要來分享一款純CSS3繪製的可愛小男孩動畫,除了繪製的小男孩逼真可愛外,其面部表情也十分酷。整個動畫是利用純CSS3實現,沒有用圖片和JS,不知道你們的瀏覽器中效果怎麼樣。
線上演示 原始碼下載
12、CSS3視覺化網頁編輯器 基於tinymce編輯器
上次我們分享過一款網頁編輯器jQuery輕量級網頁編輯器選中即可編輯,配置比較簡單。今天我們要來分享一款基於tinymce的CSS3視覺化網頁編輯器,編輯器功能相當完善,可以對文字進行各種操作,也可以新增連結和對齊文字。是一款功能更加強大網頁編輯器。
線上演示 原始碼下載
以上就是12款CSS3應用集錦下載,歡迎收藏分享。
原文連結:http://www.html5tricks.com/12-css3-app-download.html
相關閱讀
評論(0)