ChokCoco

摘要： 從 Chrome 125 開始，支持了一個全新的 CSS 特性 - Anchor Positioning，翻譯過來即是錨點定位。 在之前的文章中，我們較為系統的講述了這個新特性的使用，感興趣的可以翻開一下前文：搶先體驗！超強大的 Anchor Positioning 錨點定位。 在本文中，我們將使用 閱讀全文

摘要： 在之前，我們有些過這么一篇文章 - 使用 CSS 輕松實現高頻出現的各類奇形怪狀按鈕。 里面包含了如下這些圖形： 你可以在這里看到：CodePen Demo -- CSS Various Button Shapes | CSS 各種造型按鈕 接下來幾篇文章中，將在上述基礎上，額外補充一些在日常設計稿 閱讀全文

摘要： 本文，我們將一起探討探討，如下所示的一個卡片 Hover 動畫，應該如何實現： 這個效果的幾個難點： 鼠標移動的過程中，展示當前卡片邊緣的 border 以及發光效果； 效果只出現在鼠標附近？這一塊的實現方法就有很多種了，可以計算鼠標附近的范圍，在范圍內去實現的效果，但是這樣成本太高了。 轉換一下思 閱讀全文

摘要： 今天，有個群友問了我這么一個問題，如果不想切圖，是否有辦法實現帶漸變邊框的字體效果？如下所示： 本文，就將嘗試一下，在 CSS 中，我們可以如何盡可能的實現這種漸變邊框字體效果。 元素疊加 首先，比較容易想到的寫法是通過元素疊加實現。 元素本身實現文字效果本身 通過元素的偽元素，配合 backgro 閱讀全文

摘要： 今天我們來學習一個有意思的多行文本輸入打字效果，像是這樣： 這個效果其實本身并非特別困難，實現的方式也很多，在本文中，我們更多的會聚焦于整個多行打字效果最后的動態光標的實現。 也就是如何在文本不斷變長，在不確定行數的情況下，讓文字的最末行右側處，一直有一個不斷閃爍的光標效果： 單行文本打字效果 在此 閱讀全文

摘要： Chrome 在 121 版本開始，原生支持了兩個滾動條樣式相關的樣式 scrollbar-color 和 scrollbar-width。 要知道，在此前，雖然有 ::-webkit-scrollbar 規范可以控制滾動條，可是，::-webkit-scrollbar 是非標準特性，在 MDN 文 閱讀全文

摘要： 最近，群里在討論這么一個有趣的交互效果，來源于：vueflow.dev： 通過審查元素，發現原效果借助了 Canvas 實現。 思索了一番，覺得這個效果利用 CSS 配合部分 Javascript 代碼完全也是可以做到的。 于是動手嘗試了一番，最終完美的復刻了該效果： 過程中還是有非常多有意思的技巧 閱讀全文

摘要： 最近，群里在討論一個很有意思的線條動畫效果，效果大致如下： 簡單而言，就是線條沿著不規則路徑的行進動畫，其中的線條動畫可以理解為是特殊的光效。 本文，我們將一起探索，看看在不使用 JavaScript/Canvas 的基礎上，使用純 CSS/SVG 的方式，我們可以如何大致的還原上述的線條動畫效果。 閱讀全文

摘要： 最近，群里聊到了一個很有意思的布局效果。大致效果如下所示，希望使用 CSS 實現如下所示的布局效果： 正常而言，我們的 HTML 結構大致是如下所示： <div class="g-container"> <div class="g-nav"> <ul> <li>Tab 1</li> <li>Tab 閱讀全文

摘要： accent-color 是從 Chrome 93 開始被得到支持的一個不算太新屬性。之前一直沒有好好介紹一下這個屬性。直到最近在給一些系統整體切換主題色的時候，更深入的了解了一下這個屬性。 簡單而言，CSS accent-color 支持使用幾行簡單的 CSS 為表單元素著色，是的，只需幾行代碼就 閱讀全文