原创 現代 CSS 解決方案:CSS 數學函數

在 CSS 中,其實存在各種各樣的函數。具體分爲: Transform functions Math functions Filter functions Color functions Image functions Counter f

原创 離譜的 CSS!從錶盤刻度到藝術剪紙

某日,羣裏有這樣一個問題,如何實現這樣的錶盤刻度: 這其實是個挺有意思的問題,方法也有很多。 單標籤,使用 conic-gradient 實現錶盤刻度 最簡單便捷的方式,就是利用角向漸變的方式 conic-gradient,代碼也非常簡單

原创 陰影進階,實現更加的立體的陰影效果!

CSS 陰影的存在,讓物體看上去更加有型立體。 然而,在最簡單的陰影使用之上,我們可以實現更多有意思且更加立體的陰影效果。 本文將帶大家看看如何使用 CSS 實現幾類比普通陰影更加立體的陰影效果。 CSS 陰影基礎 CSS 中,明面上可以實

原创 讓交互更加生動!有意思的鼠標跟隨 3D 旋轉動效

今天,羣友問了這樣一個問題,如下所示的鼠標跟隨交互效果,如何實現: 簡單分析一下,這個交互效果主要有兩個核心: 藉助了 CSS 3D 的能力 元素的旋轉需要和鼠標的移動相結合 本文,就將講述如何使用純 CSS 實現類似的交互效果,以及

原创 Amazing!巧用 CSS 視差實現酷炫交互動效

本文將介紹利用 CSS 實現滾動視差效果的一個小技巧,並且,利用這個技巧來製作一些有意思的交互特效。 關於使用 CSS 實現滾動視差效果,在之前有一篇文章詳細描述過具體方案 - CSS 實現視差效果,感興趣的同學可以先看看這篇文章。 這裏,

原创 現代 CSS 解決方案:Modern CSS Reset

在早年間(其實也不是很早),寫過幾篇關於 CSS Reset 的文章 - reset.css 知多少。 詳細描述了當時業界比較常用的,兩個 CSS reset 方案:reset.css 與 Normalize.css。 以更爲推薦的 Nor

原创 不借助 Javascript,利用 SVG 快速構建馬賽克效果

之前在公衆號轉發了好友 Vajoy 的一篇文章 -- 巧用 CSS 把圖片馬賽克風格化。 核心是利用了 CSS 中一個很有意思的屬性 -- image-rendering,它可以用於設置圖像縮放算法。 何爲 image-rendering?

原创 巧用 background-clip 實現超強的文字動效

最近,有同學詢問,如何使用 CSS 實現如下效果: 看起來是個很有意思的動效。 仔細思考一下,要想實現這類效果,其實用到的核心屬性只有一個 -- background-clip: text。 有意思的 background-clip: t

原创 一道有意思的 CSS 面試題,FizzBu zz ~

FizzBu​​zz 是一道很有意思的題目。我們來看看題目: 如果遇見了 3 的倍數要說 Fizz,5 的倍數就說 Buzz,如果即是 3 的倍數又是 5 的倍數就說 FizzBuzz。 如果是在一些編程語言中,這是一道比較初級的題目,當然

原创 2022 年最受矚目的新特性 CSS @layer 到底是個啥?

步入 2022,CSS 的新特性層出不窮,而最近在 CSS 圈最受矚目的新特性,非 CSS @layer 莫屬。 本文,將用最簡潔的語言,快速讓讀者們搞懂,到底什麼是 CSS @layer 新規範。 過往 CSS 優先級中存在的問題 如果我

原创 神奇的 CSS,讓文字智能適配背景顏色

最近幾天,有好幾個同學都問了同樣一個問題。 頁面上有一段文本,能否實現這段文本在不同背景色下展示不同的顏色?也就是俗稱的智能變色。像是下面這樣: 文本在黑色底色上表現爲白色,在白色底色上表現爲黑色。看似很複雜的一個效果,但是其實在 CSS

原创 巧用 CSS 構建漸變彩色二維碼

今日,羣裏有個很有意思的問題,問我如何實現一個彩色的,帶漸變的二維碼,像是這樣: 很有意思的問題,我們在百度谷歌,搜索 qrcode,能搜到非常多在線製作二維碼的工具,它們其中一些也會帶有製作漸變二維碼的功能。但是它們大部分都是 Canv

原创 革命性創新,動畫殺手鐗 @scroll-timeline

在 CSS 規範 Scroll-linked Animations 中,推出了一個劃時代的 CSS 功能。也就是 -- The @scroll-timeline at-rule,直譯過來就是滾動時間線。 本文,就將帶大家一探究竟,從入門到學

原创 巧用 CSS 實現炫彩三角邊框動畫

最近有個小夥伴問我,在某個網站看到一個使用 SVG 實現的炫彩三角邊框動畫,問能否使用 CSS 實現: 很有意思的一個動畫效果,立馬讓我想起了我在 CSS 奇思妙想邊框動畫 一文中介紹的邊框動畫,非常的類似: 其核心就是利用了角向漸變(

原创 突破限制,CSS font-variation 可變字體的魅力

今天,在 CodePen 上看到一個很有意思的效果 -- GSAP 3 ETC Variable Font Wave,藉助了 JS 動畫庫 GSAP 實現,一起來看看: 我尋思着能否使用 CSS 復刻一版,鼓搗了一會,利用純 CSS 成功