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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

原创 現代 CSS 高階技巧,像 Canvas 一樣自由繪圖構建樣式!

在上一篇文章中 -- 現代 CSS 之高階圖片漸隱消失術,我們藉助了 CSS @Property 及 CSS Mask 屬性,成功的實現了這樣一種圖片漸變消失的效果: CodePen Demo -- 基於 @property 和 mask

原创 現代 CSS 之高階圖片漸隱消失術

在過往,我們想要實現一個圖片的漸隱消失。最常見的莫過於整體透明度的變化,像是這樣: <div class="img"></div> div { width: 300px; height: 300px; backg

原创 除了 filter 還有什麼置灰網站的方式?

大家都知道,當一些重大事件發生的時候,我們的網站,可能需要置灰,像是這樣: 當然,通常而言,全站置灰是非常簡單的事情,大部分前端同學都知道,僅僅需要使用一行 CSS,就能實現全站置灰的方式。 像是這樣,我們僅僅需要給 HTML 添加一個統

原创 快速構建頁面結構的 3D Visualization

對 Chrome 擴展功能熟悉的小夥伴,可能都有用過 Chrome 的 3D 展示頁面層級關係這個功能。 可以通過 控制檯 --> 右邊的三個小點 --> More Tools --> Layers 打開。即可以看到頁面的一個 3D 層級關

原创 現代 CSS 指南 -- at-rule 規則掃盲

大部分同學都用過 CSS 的屏幕寬度媒體查詢,像是這樣: @media screen and (min-width: 900px) { div { padding: 1rem 3rem; } } 這裏表示的是與屏幕寬度相關

原创 CSS 漸變鋸齒消失術

在 CSS 中,漸變(Gradient)可謂是最爲強大的一個屬性之一。 但是,經常有同學在使用漸變的過程中會遇到漸變圖形產生的鋸齒問題。 何爲漸變鋸齒? 那麼,什麼是漸變圖形產生的鋸齒呢? 簡單的一個 DEMO: <div></div>

原创 超強的蘋果官網滾動文字特效實現

每年的蘋果新產品發佈,其官網都會配套更新相應的單頁滾動產品介紹頁。其中的動畫特效都非常有意思,今年 iPhone 14 Pro 的介紹頁不例外。 最近,剛好有朋友問到,其對官網的一段文字特效特別感興趣,看適用簡單卻不知從何下手,我們來看看: