原创 現代 CSS 解決方案:accent-color 強調色

accent-color 是從 Chrome 93 開始被得到支持的一個不算太新屬性。之前一直沒有好好介紹一下這個屬性。直到最近在給一些系統整體切換主題色的時候,更深入的瞭解了一下這個屬性。 簡單而言,CSS accent-color 支持

原创 【動畫進階】神奇的 3D 卡片反光閃爍動效

最近,有羣裏在羣裏發了這麼一個非常有意思的卡片 Hover 動效,來源於此網站 -- key-drop,效果如下: 非常有意思酷炫的效果。而本文,我們不會完全還原此效果,而是基於此效果,嘗試去製作這麼一個類似的卡片交互效果: 該效果的幾

原创 現代 CSS 解決方案:文字顏色自動適配背景色!

在 23 年的 CSS 新特性中,有一個非常重要的功能更新 -- 相對顏色。 簡單而言,相對顏色的功能,讓我們在 CSS 中,對顏色有了更爲強大的掌控能力。 其核心功能就是,讓我們能夠基於一個現有顏色 A,通過一定的轉換規則,快速生成我們想

原创 帶圓角的虛線邊框?CSS 不在話下

今天,我們來看這麼一個非常常見的切圖場景,我們需要一個帶圓角的虛線邊框,像是這樣: 這個我們使用 CSS 還是可以輕鬆解決的,代碼也很簡單,核心代碼: div { border-radius: 25px; border:

原创 【佈局技巧】Flex 佈局下居中溢出滾動截斷問題

在頁面佈局中,我們經常會遇到/使用這麼一類常見的佈局,也就是列表內容水平居中於容器中,像是這樣: <ul class="g-contaner"> <li></li> <li></li> </ul> ul { wid

原创 瀏覽器跨 Tab 窗口通信原理及應用實踐

最近,相信大家一定被這麼個動效給刷屏了: 以至於,基於這個效果的二次創作層出不窮,眼花繚亂。 基於跨窗口通信的彈彈球: 基於跨窗口通信的 Flippy Bird: 我也嘗試製作了一個跨 Tab 窗口的 CSS 動畫聯動,效果如下:

原创 CSS 也能實現 if 判斷?實現動態高度下的不同樣式展現

最近在羣裏,有個小夥伴問了這麼一道很有趣的問題: CSS 能否實現,容器再某個高度下是某種表現,一旦超出某個高度,則額外展示另外一些內容 爲了簡化實際效果,我們看這麼一張示意效果圖: 可以看到,當容器高度沒有超過某一個值時,沒有箭頭圖

原创 前端如何防止數據被異常篡改並且復原數據

每天,我們都在和各種文檔打交道,PRD、技術方案、個人筆記等等等。 其實文檔排版有很多學問,就像我,對排版有強迫症,見不得英文與中文之間不加空格。 所以,最近在做這麼一個谷歌擴展插件 chrome-extension-text-format

原创 【動畫進階】單標籤下多色塊隨機文字隨機顏色動畫

我的小冊 《CSS 技術揭祕與實戰通關》上線了,想了解更多有趣、進階、系統化的 CSS 內容,可以猛擊 - LINK。 在 CSS 還原拉斯維加斯球數字動畫 - 掘金 一文中,我們利用純 CSS,實現了一個非常 Amazing 的動畫效

原创 CSS 還原拉斯維加斯球數字動畫

我的小冊 《CSS 技術揭祕與實戰通關》上線了,想了解更多有趣、進階、系統化的 CSS 內容,可以猛擊 - LINK。 最近大家刷抖音,是否有刷到拉斯維加斯的新地標 「Sphere」: 場館內部的視覺效果非常驚人,其中一個效果讓我虎軀

原创 小技巧 | 漸變消失遮罩的多種實現方式

我的小冊 《CSS 技術揭祕與實戰通關》上線了,想了解更多有趣、進階、系統化的 CSS 內容,可以猛擊 - LINK。 在知乎看到一題比較有意思的題目。 題目大致是如何實現下述圖片的效果,如果使用 div 前置遮擋的話,會影響 div

原创 【動畫進階】神奇的背景,生化危機4日食 Loading 動畫還原

最近,在 Steam 玩一款老遊戲(生化危機 4 重置版),其中,每當遊戲轉場的過程中,都有這麼一個有趣的 Loading 動畫: 整個效果有點類似於日食效果,中間一圈黑色,向外散發着太陽般的光芒。 本文,我們將嘗試使用 CSS,還原這個

原创 【動畫進階】當路徑動畫遇到滾動驅動!

我的小冊 《CSS 技術揭祕與實戰通關》上線了,想了解更多有趣、進階、系統化的 CSS 內容,可以猛擊 - LINK。 本文,我們將一起利用純 CSS,實現如下這麼個酷炫的效果: 在一年前,我介紹了 CSS 中非常新奇有趣的一個新特性

原创 現代 CSS 解決方案:原生嵌套(Nesting)

很早之前,就寫過一篇與原生嵌套相關的文章 -- CSS 即將支持嵌套,SASS/LESS 等預處理器已無用武之地?,彼時 CSS 原生嵌套還處於工作草案 Working Draft (WD) 階段,而今天(2023-09-02),CSS 原

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

在 CSS 中,存在許多數學函數,這些函數能夠通過簡單的計算操作來生成某些屬性值,例如在現代 CSS 解決方案:CSS 數學函數一文中,我們詳細介紹了 calc():用於計算任意長度、百分比或數值型數據,並將其作爲 CSS 屬性值。 mi