分享8個難忘的HTML5炫酷動畫及原始碼
HTML5的強大之處不僅在於讓網頁元素更加靈活多變,更在於它可以很方便地實現各種網頁動畫特效,讓你的網站更加富有現代化特色。就現在的瀏覽器而言,已經基本都支援HTML5了,所以這也方便了我們開發者免去了考慮瀏覽器相容性的頭疼問題。今天要分享一些令人難忘的HTML5炫酷動畫,希望大家會喜歡。
1、HTML5火球擋板碰撞動畫遊戲
今天我們要再來分享一款超酷的HTML5火球擋板碰撞動畫遊戲。螢幕上有一個火球在不停的運動,你可以移動滑鼠滑動螢幕下方的擋板,火球碰撞到擋板後,即可反彈出去,這是個很有特色的HTML5遊戲。
2、HTML5/CSS3圓盤秒錶動畫 秒錶可暫停計時
今天我們要分享一款基於HTML5和CSS3的圓盤秒錶動畫,秒錶可以精確到0.001秒,並且可以在計時過程中暫停計時,同時秒錶可以隨時重置。
3、3D版HTML5模擬衣服撕扯動畫
還記得很早以前向大家分享的這款HTML5 Canvas模擬衣服撕扯動畫嗎?這絕對是一款非常具有創意而且很好玩的HTML5動畫。今天我們來分享一下它的3D版本,在原來的基礎上,衣服布料呈3D環形顯示,你同樣可以用滑鼠拖拽衣服,不過和之前不同的是,滑鼠左鍵用來拖拽衣服,滑鼠右鍵用來切割衣服,失去了之前滑鼠用力程度和衣服破碎程度的關係,似乎功能上有所缺失,但是HTML5 3D功能還是不錯的。
4、純CSS3實現超酷的磁帶動畫
記得之前分享過一款HTML5磁帶式古典播放器,效果相當震撼。這次我們要用純CSS3來實現一個超酷的磁帶動畫特效。首先用純CSS3繪製了一個磁帶的外觀,還是相當逼真的,然後用CSS3的動畫屬性實現了磁帶的旋轉,就像在播放歌曲一樣,如果配合
5、HTML5仿Apple Watch時鐘動畫
Apple Watch剛剛釋出不久,就已經有國外的大牛將其時鐘錶盤介面用HTML5模仿出來了,並且這款HTML5仿Apple Watch的時鐘是動態的,可以根據本地時間實時更新指標資料。時鐘的介面非常華麗,確實有蘋果的風格,HTML5也的確非常強大。
6、純CSS3和SVG滑鼠滑過燈泡發光特效
這次要分享一款利用純CSS3和SVG實現的燈泡發光效果,我們只需要將滑鼠滑過燈泡,整個燈泡就會出現發光發亮的動畫特效,效果相當逼真。CSS3的運用,讓燈泡外圍有一層淡淡的光暈。並且在燈光點亮和熄滅的時候有淡入淡出的效果。
7、HTML5動感的火焰燃燒動畫特效
這又是一款基於HTML5的超炫動畫特效,是一款動感的火焰燃燒動畫效果。這款HTML5動畫火焰燃燒非常逼真,之前我們也分享過一些其他的HTML5火焰燃燒動畫,比如:HTML5 Canvas火焰燃燒動畫和純CSS3實現打火機火焰動畫。一般像這樣的HTML5動畫都是基於Canvas的,今天的這款也不例外。
8、CSS3圖片傾斜效果 可傾斜四個角度
今天我們再來分享一款CSS3圖片特效,它可以讓網頁上的圖片傾斜任意的角度,其實在CSS3中實現圖片的傾斜非常簡單,我們並不需要利用複雜的JS計算各種角度,只要用CSS3的transition屬性即可完成圖片的傾斜效果,非常簡單,具體實現大家可以看DEMO演示。