原创 CSS秀起來真沒JS什麼事
發現了一個純CSS實現，具有漸變倒影和3D旋轉效果的柵欄動畫，他的實現方式是：利用10個<div>元素創建10個柵條，接着再複製整份<div>元素，並創建一個漸變遮罩形成漸變效果，以此作爲柵欄的倒影。 這聽起來有點像用左腳的腳趾去
2020-02-25 18:08:13
原创 一文搞懂CSS中的字體單位大小(px,em,rem...)
在學習的過程中,發現CSS有很多可以描述單位的尺寸。比如px,em,rem,vw等等。平時也沒有深究，一來是沒時間，二來是在我學習清單中優先級過低。一直想徹底弄明白，一直耽擱到現在。現在花上一點時間來整理一下，徹底弄懂它。 CSS
2020-02-25 18:08:13
原创 CSS，給你點“顏色“看看
對於CSS顏色，想必大家都或多或少用過，本文是筆者整理的關於CSS顏色相關的一些基礎知識，目的是希望在需要用到CSS顏色相關知識時，看這一篇就夠了。 下面多圖預警，就是要給你一點“顏色“看看（偷笑ing）。 本篇主要包含以下內容：
2020-02-25 18:08:13
原创 趣味CSS3效果小彙總
衆所周知，在CSS3中產生了諸多優秀的特性，現在就來分享一下我這段時間對於這些特性的效果實踐，希望對大家有所啓發。 挑戰1: 畫一個對話框 要畫一個對話框，首先來學習做一個三角形。其實非常的簡單。 <!DOCTYPE html>
2020-02-25 18:08:13
原创 純CSS實現動態晴陰雨雪，純得不能再純了
分享一下如何僅用CSS3，實現單標籤的動態晴陰雨雪。技術關鍵點就是“單標籤”和“純CSS”。先看下最終效果： 再看看HTML代碼： <!--晴--> <div class="weather sunny"></div> <!--陰
2020-02-25 18:08:13
原创 HTML5 3D書本翻頁動畫
這是一款十分炫酷的HTML5 3D書本翻頁動畫，效果相對比較簡單，拖拽鼠標模擬用手翻頁，更漂亮的是翻頁過程中，呈現出逼真的3D立體效果。書本中的文字和圖片也會3D展示，非常酷。 HTML代碼 <div class="b
2019-08-14 08:51:24
原创 HTML5 3D衣服搖擺動畫特效
這又是一款基於HTML5 Canvas的3D動畫傑作，它是一個可以隨風飄動的3D衣服搖擺動畫特效，非常逼真。當我們將鼠標滑過衣服時，衣服將會出現搖擺的動畫，點擊鼠標時，衣服將會更加劇烈地擺動。 HTML代碼 <div styl
2019-08-14 08:51:24
原创 多視角3D可旋轉的HTML5 Logo動畫
這是一款基於HTML5和CSS3的3D動畫特效，與之前的3D特效不同的是，這款是完全用HTML5特性實現的，而並非用多張圖片疊加起來。這款3D動畫還有一個特點是可以無限的旋轉，從而可以從多個視角來觀察HTML5 Logo。 HT
2019-08-14 08:51:24
原创 2小時完成HTML5拼圖小遊戲
當時初學遊戲開發，經驗淺薄，所以沒有好好專研遊戲裏的算法和代碼的缺陷，導致遊戲出現了很多bug，甚至拼圖打亂後很可能無法復原。最近經常有朋友問起這個遊戲，希望我能把代碼裏的bug改一下方便初學者學習，順便我也打算測試一下自己寫這種
2019-08-10 10:14:19
原创 CSS3 SVG實現可愛的動物哈士奇和狐狸動畫
我想向大家展示如何巧妙地使用HTML、CSS排序動畫和SVG濾鏡把生活中可能最可愛的東西之一——動物畫到網頁上。我們將探討繪製動物的兩種技術：一種使用純HTML和CSS，另一種使用內聯SVG背景圖像。 所涉及的動畫也很複雜，因此本
2019-08-10 10:14:18
2
原创 HTML5 手勢檢測原理和實現
手勢 常用的 HTML5 手勢可以分爲兩類，單點手勢和兩點手勢。單點手勢有 tap（單擊），double tap（雙擊），long tap（長按），swipe（揮），move（移動）。兩點手勢有 pinch（縮放），rotate（
2019-08-10 10:14:18
原创 HTML5 中的5大存儲方式總結
總體情況 h5之前，存儲主要是用cookies。cookies缺點有在請求頭上帶着數據，大小是4k之內。主Domain污染。 主要應用：購物車、客戶登錄 對於IE瀏覽器有UserData，大小是64k,只有IE瀏覽器支持。 目標
2019-08-10 10:14:18
原创 將 HTML5 性能發揮到極致
HTML5作爲新興領域越來越熱。然而在移動設備硬件性能弱於PC的背景下，對性能的需求顯得更爲重要，而HTML5性能優化前與優化後有着極大的差別，如何優化才能提高性能，對此熟知的人很少。本文以LayaAir引擎爲例，通過代碼示例詳細
2019-08-10 10:14:18
原创 能看懂這10個JavaScript難點的程序員運氣不會太差…
爲了保證可讀性，本文采用意譯而非直譯，並且對示例代碼進行了大量修改。另外，本文版權歸原作者所有，翻譯僅用於學習。 1. 立即執行函數 立即執行函數，即Immediately Invoked Function Expression
2019-08-10 10:14:18
1
原创 HTML5超炫酷粒子效果的進度條
這是一款基於HTML5和JavaScript的進度條應用，這款進度條插件非常有特點，它在進度展示的時候呈現粒子的動畫效果，也就是說，進度條在滑動的同時，會產生一些小粒子掉落下來，效果非常酷。另外還有一個特點是隨着進度的變化，進度條
2019-08-10 10:14:18