原创 使用requestAnimationFrame和Canvas給按鈕添加繞邊動畫
要給按鈕添加酷炫的繞邊動畫，可以使用Canvas來實現。基本的思路是創建一個和按鈕大小相同的Canvas元素，內置在按鈕元素中。然後在Canvas上實現邊線環繞的動畫。requestAnimationFrame接口我們使用requestA
2020-06-26 02:49:22
原创 使用純CSS3實現一個3D旋轉的書本
有一些前沿的電商網站已經開始使用3D模型來展示商品並支持在線定製，而其中圖書的展示是最爲簡單的一種，無需複雜的建模過程，使用圖片和CSS3的一些變換即可實現更好的展示效果，簡潔而實用。書本的3D模型是所有商品中最爲簡單的，因爲其本質上就是
2020-06-26 02:49:22
1
原创 如何使用CSS3實現一個3D商品標籤
使用3D緞帶形狀的標籤是常見的一個設計模式，用在商品折扣、文章標題或網站推薦信息上， 來突出顯示重點內容，吸引用戶視覺焦點。實現的方法有2種，一種是使用背景圖片，一種是使用三角形的CSS3僞元素。 本文介紹第2種方法，
2020-06-26 02:49:22
原创 如何使用CSS3實現書頁（書本）卷角效果
我們有時候想在頁面顯示一個公告或用戶提示信息。一個常用設計是使用書籤形狀。我們可以給書籤添加捲角效果，以使其更爲逼真。所謂的“卷角”實際上可以用小角度傾斜的陰影效果來模擬。用CSS3的僞元素實現這個效果很容易。先給出一個實例，我們在WOW
2020-06-26 02:49:22
原创 SVG過濾器feColorMatrix矩陣變換效果用法詳解
在計算機圖形學（數學）中，矩陣乘法可用於把空間向量進行幾何變換。我們可以把顏色的值（RGBA）表示成一個四維空間向量：color = (r, g, b, a);那麼就可以應用矩陣相乘的方法來對其進行變換操作。SVG標準中的feColor
2020-06-26 02:49:22
2
原创 使用純CSS3實現一個日食動畫
日食現象是月亮擋在了地球和太陽之間，也就是月亮遮擋住了太陽。所以要構造日食，我們需要2個對象：一個代表月亮，一個代表太陽。<div class="eclipse sun"></div> <div class="eclipse moon">
2020-06-26 02:49:22
原创 如何使用CSS3/SCSS實現逼真的車窗雨滴效果
在天氣預報類的Web移動應用中，常常需要實現屏幕的雨滴效果，表示陰雨天氣。感覺上比較神奇，其實想通了，這個效果的實現只需要一點物理知識和CSS3的簡單變換。實現一個小雨滴首先雨滴是一個個小的橢圓形元素：.raindrop { widt
2020-06-26 02:49:11
2
原创 使用Babel獨立版編譯ES6代碼時報錯誤:Unexpected token
使用babel-standalone來在線編譯ES6代碼，但是遇到如下錯誤：Unexpected token <原因是ES6中使用了ReactJS，需要在編譯預設置選項（presets）中添加react，記錄下。
2020-06-02 17:24:38
原创 如何使用CSS3實現一個3D泡沫圖形
要實現一個逼真的泡沫，涉及到比較複雜的光學/物理學知識。我們這裏先簡化下問題，實現一個相對簡單而足夠實用的泡沫元素。我們可以把基礎的泡沫元素應用在很多場景中，比如水景、泡咖啡、啤酒甚至火焰特效中。泡沫首先是一個圓形元素12345.bubb
2020-02-20 19:57:35
原创 如何使用CSS3實現一個平滑的3D文本標題
要實現3D文本，基本上有3種方法：1. 使用CSS3的投影濾鏡（filter: drop-shadow）2. 使用3d建模和CSS3 3d變換來實現（最真實）3. 使用CSS3 text-shadow屬性來實現（最簡單，可複製，現代瀏覽器
2020-02-20 19:57:35
原创 使用CSS3線性漸變（linear-gradient）實現文本波浪線效果
我們在讀紙質書的時候，經常用筆劃波浪線來突出重點內容，以強化視覺感受。而在Web頁面上，沒有CSS3之前，我們只能用背景圖片來實現類似功能，這當然不是個高效的方式，且難於維護和調整。比如你只是想調整下顏色、線條大小和傾斜的角度，你都得打開
2020-02-20 19:57:35
原创 使用CSS3實現響應式標題全屏居中和網站前端性能
要實現標題全屏居中（同時在垂直和水平方向居中），有若干種方法，包括使用彈性佈局、表格單元、絕對定位和自動外邊距等。全屏居中其中目前比較流行也比較容易理解的方法是使用絕對定位+偏移實現。也就是分兩步來把元素居中：1. 第一步先把元素放在離視
2020-02-20 19:57:35
原创 如何使用純CSS3實現一個沙漏動畫
要實現一個沙漏動畫，我們首先需要實現一個漏斗的幾何形狀。漏斗圖形我們接着把漏斗拆分成3個簡單圖形：一個三角形，一個倒置三角形和中間的管道（垂直線）。那麼問題就簡化爲實現三角形和直線。要實現三角形很簡單，有模式可套用。即使用零寬高的元素，設
2020-02-20 19:57:35
原创 CentOS安裝sass-lang報錯Temporary failure in name resolution
在給我們的開發平臺添加sass/scss語言支持時，需要安裝sass-lang（已安裝ruby環境）。但遇到如上的錯誤，經排查和DNS配置（vi /etc/resolv.conf）無關，而是因爲gem的source不可用。刪除原有gem源
2020-02-20 19:57:35
原创 使用純CSS3創建一個紡錘形分隔線
紡錘形分割線用於仿真紙中間被剪開時的陰影效果，也就是中間咧開而兩邊收攏的情況。簡單講就是兩頭小，中間大。如下所示（請忽略中間的wow圖標）：使用CSS3來實現這種效果，可以使用border-radius和box-shadow兩個屬性。首先
2020-02-20 19:57:34