原创 巧用 CSS 變量，實現動畫函數複用，製作高級感拉滿的網格動畫

本文將介紹一種基於 CSS 變量技巧，通過合理使用 CSS 變量，實現 CSS 動畫 @keyframes 的複用。 CSS 變量 CSS 變量大家應該都比較熟悉了，已經不能算是新知識了，快速過一遍。 CSS 變量（CSS Variable

2023-03-07 13:28:01

原创 CSS 數學函數與容器查詢實現不定寬文本溢出跑馬燈效果

在許久之前，曾經寫過這樣一篇文章 -- 不定寬溢出文本適配滾動。我們實現了這樣一種效果： 文本內容不超過容器寬度，正常展示 文本內容超過容器的情況，內容可以進行跑馬燈來回滾動展示 像是這樣： 但是，之前的方案，有一個很明顯的缺點，如果

2023-03-02 13:27:53

原创 現代圖片性能優化及體驗優化指南 - 懶加載及異步圖像解碼方案

本文是系列第四篇。系列文章： 現代圖片性能優化及體驗優化指南 - 圖片類型及 Picture 標籤的使用 現代圖片性能優化及體驗優化指南 - 響應式圖片方案 現代圖片性能優化及體驗優化指南 - # 縮放精細化展示及避免佈局偏移、拉伸 圖

2023-02-28 13:31:54

原创 現代圖片性能優化及體驗優化指南 - 縮放精細化展示及避免佈局偏移、拉伸

本文是系列第三篇。系列文章： 現代圖片性能優化及體驗優化指南 - 圖片類型及 Picture 標籤的使用 現代圖片性能優化及體驗優化指南 - 響應式圖片方案 圖片資源，在我們的業務中可謂是佔據了非常大頭的一環，尤其是其對帶寬的消耗是十分

2023-02-23 13:28:02

原创 現代圖片性能優化及體驗優化指南 - 響應式圖片方案

本文是系列第二篇。系列文章： 現代圖片性能優化及體驗優化指南 - 圖片類型及 Picture 標籤的使用 圖片資源，在我們的業務中可謂是佔據了非常大頭的一環，尤其是其對帶寬的消耗是十分巨大的。 對圖片的性能優化及體驗優化在今天就顯得尤爲

2023-02-21 13:33:02

原创 由小見大！不規則造型按鈕解決方案

今天，有個羣友在羣裏提問，使用 CSS 能否實現下述這個圖形： emmm，中間這個酷似三次貝塞爾曲線的造型，使用 CSS 不太好實現。我的建議是切圖實現，然而羣友要求一定要用 CSS 實現。 雖然麻煩，但是這個圖形勉強也是能用 CSS 實

2023-02-17 13:28:06

原创 現代圖片性能優化及體驗優化指南 - 圖片類型及 Picture 標籤的使用

圖片資源，在我們的業務中可謂是佔據了非常大頭的一環，尤其是其對帶寬的消耗是十分巨大的。 對圖片的性能優化及體驗優化在今天就顯得尤爲重要。本文，就將從各個方面闡述，在各種新特性滿頭飛的今天，我們可以如何儘可能的對我們的圖片資源，進行性能優化及

2023-02-10 13:28:01

原创 vh 存在問題？試試動態視口單位之 dvh、svh、lvh

大部分同學都知道，在 CSS 世界中，有 vw、vh、vmax、vmin 這幾個與視口 Viewport 相關的單位。 正常而言： 1vw 等於1/100的視口寬度 （Viewport Width） 1vh 等於1/100的視口高度 （V

2023-01-31 13:28:59 7

原创 CSS 奇思妙想之酷炫倒影

在 CSS 中，倒影是一種比較常見的效果。今天，我們就將嘗試，使用 CSS 完成各類不同的倒影效果，話不多說，直接進入主題。 實現倒影的兩種方式 首先，快速過一下在 CSS 中，實現倒影的 2 種方式。 使用 -webkit-box-ref

2023-01-12 13:27:56

原创 有意思，小程序還可以一鍵生成App！

小程序≠微信小程序 說到小程序，大部分同學的第一反應，可能是微信小程序、支付寶小程序，確實，小程序的概念深入人心，並且已經被約定俗成的綁定到某些互聯網公司的 APP 上。 但是，“小程序”並不是一個註冊商標，也不是哪一家的專利。 小程序作爲

2023-01-05 13:32:35 1

原创 巧用視覺障眼法，還原 3D 文字特效

最近羣裏有這樣一個有意思的問題，大家在討論，使用 CSS 3D 能否實現如下所示的效果： 這裏的核心難點在於，如何利用 CSS 實現一個立體的數字？CSS 能做到嗎？ 不是特別好實現，但是，如果僅僅只是在一定角度內，利用視覺障眼法，我們還

2023-01-03 13:29:02

原创 不規則圖形背景排版高階技巧 -- 酷炫的六邊形網格背景圖

今天，收到一個很有意思的提問，如何實現類似如下的背景效果圖： 嗯？核心主體是由多個六邊形網格疊加形成。 那麼我們該如何實現它呢？使用純 CSS 能夠實現嗎？ 當然可以，下面我們就將嘗試如何使用 CSS 去實現這樣一個背景效果。 如何繪製六

2022-12-26 13:27:41 1

原创 開局一張圖，構建神奇的 CSS 效果

假設，我們有這樣一張 Gif 圖： 利用 CSS，我們嘗試來搞一些事情。 圖片的 Glitch Art 風 在這篇文章中 --CSS 故障藝術，我們介紹了利用混合模式製作一種暈眩感覺的視覺效果。有點類似於抖音的 LOGO。 像是這樣： 假

2022-12-19 13:27:54

原创 現代 CSS 高階技巧，不規則邊框解決方案

本文是 CSS Houdini 之 CSS Painting API 系列第四篇。 現代 CSS 之高階圖片漸隱消失術 現代 CSS 高階技巧，像 Canvas 一樣自由繪圖構建樣式！ 現代 CSS 高階技巧，完美的波浪進度條效果！ 在

2022-12-18 13:27:35

原创 現代 CSS 高階技巧，完美的波浪進度條效果！

本文是 CSS Houdini 之 CSS Painting API 系列第三篇。 現代 CSS 之高階圖片漸隱消失術 現代 CSS 高階技巧，像 Canvas 一樣自由繪圖構建樣式！ 在上兩篇中，我們詳細介紹了 CSS Paintin

2022-12-15 13:28:24