原创 現代 CSS 高階技巧，像 Canvas 一樣自由繪圖構建樣式！
在上一篇文章中 -- 現代 CSS 之高階圖片漸隱消失術，我們藉助了 CSS @Property 及 CSS Mask 屬性，成功的實現了這樣一種圖片漸變消失的效果： CodePen Demo -- 基於 @property 和 mask
2022-12-13 13:27:46
原创 現代 CSS 之高階圖片漸隱消失術
在過往，我們想要實現一個圖片的漸隱消失。最常見的莫過於整體透明度的變化，像是這樣： <div class="img"></div> div { width: 300px; height: 300px; backg
2022-12-06 13:27:56
原创 除了 filter 還有什麼置灰網站的方式？
大家都知道，當一些重大事件發生的時候，我們的網站，可能需要置灰，像是這樣： 當然，通常而言，全站置灰是非常簡單的事情，大部分前端同學都知道，僅僅需要使用一行 CSS，就能實現全站置灰的方式。 像是這樣，我們僅僅需要給 HTML 添加一個統
2022-12-02 13:27:48
原创 快速構建頁面結構的 3D Visualization
對 Chrome 擴展功能熟悉的小夥伴，可能都有用過 Chrome 的 3D 展示頁面層級關係這個功能。 可以通過 控制檯 --> 右邊的三個小點 --> More Tools --> Layers 打開。即可以看到頁面的一個 3D 層級關
2022-11-21 13:27:46
原创 現代 CSS 指南 -- at-rule 規則掃盲
大部分同學都用過 CSS 的屏幕寬度媒體查詢，像是這樣： @media screen and (min-width: 900px) { div { padding: 1rem 3rem; } } 這裏表示的是與屏幕寬度相關
2022-11-03 13:27:55
原创 CSS 漸變鋸齒消失術
在 CSS 中，漸變（Gradient）可謂是最爲強大的一個屬性之一。 但是，經常有同學在使用漸變的過程中會遇到漸變圖形產生的鋸齒問題。 何爲漸變鋸齒？ 那麼，什麼是漸變圖形產生的鋸齒呢？ 簡單的一個 DEMO： <div></div>
2022-10-27 13:27:48
原创 超強的蘋果官網滾動文字特效實現
每年的蘋果新產品發佈，其官網都會配套更新相應的單頁滾動產品介紹頁。其中的動畫特效都非常有意思，今年 iPhone 14 Pro 的介紹頁不例外。 最近，剛好有朋友問到，其對官網的一段文字特效特別感興趣，看適用簡單卻不知從何下手，我們來看看：
2022-10-20 13:28:53
原创 超強的純 CSS 鼠標點擊拖拽效果
背景 鼠標拖拽元素移動，算是一個稍微有點點複雜的交互。 而在本文，我們就將打破常規，向大家介紹一種超強的僅僅使用純 CSS 就能夠實現的鼠標點擊拖拽效果。 在之前的這篇文章中 -- 不可思議的純 CSS 實現鼠標跟隨，我們介紹了非常多有意思
2022-10-10 13:30:16
原创 見微知著，從兩道有意思的 CSS 面試題，考察你的基礎
今天在論壇，有看到這樣一道非常有意思的題目，簡單的代碼如下： <div> <p id="a">First Paragraph</p> </div> 樣式如下： p#a { color: green; } div::firs
2022-09-27 13:28:00
原创 單標籤實現複雜的棋盤佈局
最近，有羣友問我，他們的一個作業，儘量使用少的標籤去實現這樣一個象棋佈局： 他用了 60 多個標籤，而他的同學，只用了 6 個，問我有沒有辦法儘可能的做到利用更少的標籤去完成這個佈局效果。 其實，對於一個頁面的佈局而言，標籤越少不一定是好
2022-09-20 13:27:57
原创 新時代佈局新特性 -- 容器查詢
終於，在漫長的等待下，容器查詢（CSS Container Queries）將在 Chrome 105 版本得到正式的支持！ 而目前，我們也能在 Chrome Canary 版本中，或者在 Chrome 93~104 通過開啓 Enabl
2022-09-14 13:30:37
原创 高階 CSS 技巧在複雜動效中的應用
最近我在 CodePen 上看到了這樣一個有意思的動畫： 整個動畫效果是在一個標籤內，藉助了 SVG PATH 實現。其核心在於對漸變（Gradient）的究極利用。 完整的代碼你可以看看這裏 -- CodePen DEMO -- to
2022-09-10 13:28:39
原创 有意思的水平橫向溢出滾動
最近接到一個很有意思的需求，能否做到當內容橫向溢出時，依然能夠使用鼠標滾輪對內容進行滾動的方法。 什麼意思呢？來看看這麼一種情況： 我們有一個垂直方向溢出滾動的容器，以及一個水平方向溢出滾動的容器： 如果使用的是非觸控板（大部分用戶沒有觸
2022-09-07 13:27:49
原创 巧用 transition 實現短視頻 APP 點贊動畫
在各種短視頻界面上，我們經常會看到類似這樣的點贊動畫： 非常的有意思，有意思的交互會讓用戶更願意進行互動。 那麼，這麼有趣的點贊動畫，有沒有可能使用純 CSS 實現呢？那當然是必須的，本文，就將巧妙的藉助 transition，僅僅使用
2022-08-30 13:29:11
原创 有意思的方向裁切 overflow: clip
本文將介紹一個新特性，從 Chrome 90 開始，overflow 新增的一個新特性 -- overflow: clip，使用它，輕鬆的對溢出方向進行控制。 overflow: clip 爲何 首先，簡單介紹下 overflow: cli
2022-08-26 13:30:46