純CSS3實現打火機火焰動畫
HTML5已經越來越流行起來了,尤其是移動互聯網的發展,更是帶動了HTML5的迅猛發展,我們也是時候學習HTML5了,以防到時候落伍。今天給大家介紹10款效果驚艷的HTML5應用,方便大家學習,也將應用的源碼整理了一下發給大家。
1、純CSS3實現打火機火焰動畫
這又是一款很酷的純CSS3動畫特效,它是一個可以點燃的打火機,當你用鼠標滑過這只打火機時,打火機就會打開,然後開始出現火焰燃燒的動畫特效。另外要說明的是,整個動畫都是利用純CSS3實現的,沒有一行JS代碼,小夥伴們,這個CSS3動畫是不是很酷?
pure-css3-lighter
在線演示 / 源碼下載
2、HTML5/CSS3圖片過濾歸類應用 三種過濾動畫
今天我們要來分享一款基於HTML5和CSS3的圖片特效,它可以很方便地將各種圖片進行歸類和過濾,在歸類過濾的過程中,圖片有非常酷的動畫效果,並且,結合CSS3的特性,這裏一共提供了3種炫酷的圖片過濾動畫。
html5-css3-image-filter
在線演示 / 源碼下載
3、HTML5視頻播放器 超酷播放器UI界面
今天要分享一款UI界面非常出色HTML5視頻播放器,播放器具備播放/暫停、音量調節、全拼播放等功能,應該也算是比較完善了的。我們也可以看看之前發布過的HTML5視頻播放器,像HTML5播放器API集合 輕松學會HTML5播放器開發,也非常酷。
html5-mini-video-player
在線演示 / 源碼下載
4、純CSS3 Tooltip提示 陰影邊框飛入動畫
Tooltip可以既可以節省網頁寶貴的空間,而且又可以讓用戶快速得到想要的信息,今天要分享的這款CSS3 Tooltip外觀非常漂亮,而且是純CSS3實現,Tooltip的邊框設置了陰影特效,而且Tooltip提示框也有飛入的動畫效果,是一款挺酷的CSS3 Tooltip應用。
css3-tooltip-http://www.jyz521.com/shadow
在線演示 / 源碼下載
5、CSS3火焰效果文字特效
記得我們以前分享過一款很酷的CSS3火焰文字特效,把它挖出來看看:HTML5火焰文字特效。今天我們要來再分享一款CSS3火焰效果的文字特效,和之前那個文字特效不同的是,這個是靜態的,沒有動畫的效果,不過也非常酷。
css3-flame-text-effect
在線演示 / 源碼下載
6、CSS3彈簧線圈動畫
今天我們要來分享一款純CSS3實現的動畫特效,這款CSS3動畫效果是模擬彈簧線圈的特性。它可以不停的轉動和扭動彈簧線圈,讓整個彈簧動畫非常逼真和動感。另外由於彈簧被扭動,所以從不同的角度線圈的顏色會有細微的變化。
css3-slinky-animation
在線演示 / 源碼下載
7、150多個純CSS3動畫SVG圖標
CSS3真的很強大,但SVG的實力也不容小覷,今天我們要將它們兩個有機結合,分享給大家150多個非常有趣的純CSS3動畫SVG圖標。這150個SVG圖標中,都擁有鼠標滑過的動畫特效,有的是陰影特效,也有的是動感的動畫,這些圖標真的很酷。
150-css3-svg-icons
在線演示 / 源碼下載
8、HTML5 SVG多折線圖表 圖表可縮放顯示
今天我們要來介紹一款基於HTML5 SVG的折線圖表,該款圖片支持多條折線重疊在一起顯示,可以方便地比較不同顏色折線的數據。另外圖表還有一個特點,就是可以縮放和移動,這大大方便了用戶瀏覽圖表數據,非常人性化。更多圖表應用,請移步至HTML5圖表欄目。
html5-svg-multi-line-chart
在線演示 http://www.jyz521.com// 源碼下載
9、基於Bootstrap的CSS3下拉菜單 菜單3D立體效果
Bootstrap是Twitter推出的一個用於前端開發的開源工具包,基於Bootstrap框架,我們可以方便地制作漂亮的UI界面。今天要分享的這款CSS3下拉菜單就是基於Bootstrap的,下拉子菜單的外觀也非常不錯,同時菜單也具有3D立體的視覺效果。
css3-bootstrap-http://feishenbo.cn/ dropdown-menu
在線演示 / 源碼下載
10、純CSS3實現自行車動畫 非常逼真
還記得那款純CSS3實現的小豬、老鼠、小牛嗎,簡直是太形象生動了。這次我們要來分享一款利用純CSS3實現的自行車動畫,與前面那款不同的是,這個自行車是可以運動的,就像有一個人在騎車一樣,車輪也會轉動,非常逼真的一款動畫效果。
純CSS3實現打火機火焰動畫