原创 現代 CSS 解決方案：數學函數 Round
在 CSS 中，存在許多數學函數，這些函數能夠通過簡單的計算操作來生成某些屬性值，例如在現代 CSS 解決方案：CSS 數學函數一文中，我們詳細介紹了 calc()：用於計算任意長度、百分比或數值型數據，並將其作爲 CSS 屬性值。 mi
2023-09-04 13:35:49
原创 震驚！CSS 也能實現碰撞檢測？
本文，我們將一起學習，使用純 CSS，實現如下所示的動畫效果： 上面的動畫效果，非常有意思，核心有兩點： 小球隨機做 X、Y 方向的直線運動，並且能夠實現碰撞到邊界的時候，實現反彈效果 小球在碰撞邊界的瞬間，顏色發生隨機的變化 嗯？很
2023-08-22 13:27:45
原创 搶先體驗！超強的 Anchor Positioning 錨點定位
本文，將向大家介紹 CSS 規範中，最新的 Anchor Positioning，翻譯爲錨點定位。 Anchor Position 的出現，極大的豐富了 CSS 的能力，雖然語法稍顯複雜，但是有了它，能夠實現非常多之前實現起來非常困難，或者
2023-08-15 13:27:52
9
原创 【動畫進階】神奇的 3D 磨砂玻璃透視效果
最近，羣友分享了一個很有意思的效果： 原效果的網址：frosted-glass。該效果的幾個核心點： 毛玻璃磨砂效果 卡片的 3D 旋轉跟隨效果 整體透明度和磨砂感、以及卡片的 3D 形態會隨着用戶移動鼠標而進行動態變化 原效果實現的
2023-08-08 13:27:47
原创 【動畫進階】有意思的 Emoji 3D 表情切換效果
最近，羣裏面的同學發了這麼一個非常有意思是動畫效果： 原效果地址 -- CodePen Demo -- Letter Hop 當然，原效果，主要使用了 GSAP 動畫庫以及一個 3D 文字 JavaScript 庫： import { T
2023-08-01 13:28:17
2
原创 【動畫進階】有意思的網格下落漸次加載效果
最近，羣友貼了一個非常有意思的動畫效果，整體動畫效果如下： 點擊某個按鈕後，觸發一個動畫效果，原本的網格內容，將按順序（又帶點隨機的效果）從高處下落進行加載填充動畫。 當然，我個人認爲這個動畫有點華而不實，主要體現在這個動畫一次需要耗費較
2023-07-18 13:33:01
原创 單標籤下的日間/黑夜模式切換按鈕效果
前不久，在網上看到這麼一張非常有趣的圖： 想必很多同學都看到這張圖，是一個開發小哥被一個日間/黑夜模式切換按鈕效果逼瘋的視頻。 其最終效果大致如下： 原完整代碼在這裏：Night && Day Toggle ☀️/🌙 [Complete
2023-06-21 13:27:49
原创 現代 CSS 解決方案：CSS 原生支持的三角函數
在 CSS 中，存在許多數學函數，這些函數能夠通過簡單的計算操作來生成某些屬性值，例如 ： calc()：用於計算任意長度、百分比或數值型數據，並將其作爲 CSS 屬性值。 min() 和 max()：用於比較一組數值中的最大值或最小值，
2023-05-25 13:27:48
3
原创 超長溢出頭部省略打點，坑這麼大，技巧這麼多？
在業務中，有這麼一種場景，表格下的某一列 ID 值，文本超長了，正常而言會是這樣： 通常，這種情況都需要超長省略溢出打點，那麼，就會變成這樣： 但是，這種展示有個缺點，3 個 ID 看上去就完全一致了，因此，PM 希望能夠實現頭部省略打
2023-04-27 13:27:46
原创 漲姿勢了，殊途同歸的圖片交互動效製作！
最近，在 CodePen 上，看到一個非常有意思的圖片動效，效果如下： 原效果鏈接：CodePen Demo - 1 div pure CSS blinds staggered animation in 13 declarations 本
2023-04-24 13:27:52
原创 漲姿勢了，有意思的氣泡 Loading 效果
今日，羣友提問，如何實現這麼一個 Loading 效果： 這個確實有點意思，但是這是 CSS 能夠完成的？ 沒錯，這個效果中的核心氣泡效果，其實藉助 CSS 中的濾鏡，能夠比較輕鬆的實現，就是所需的元素可能多點。參考我們之前的： 使用純
2023-04-13 13:27:55
原创 現代圖片性能優化及體驗優化指南
之前，整個《現代圖片性能優化及體驗優化指南》分了 5 篇來發，本文是系列合集，方便大家收藏及連貫閱讀。 圖片資源，在我們的業務中可謂是佔據了非常大頭的一環，尤其是其對帶寬的消耗是十分巨大的。 對圖片的性能優化及體驗優化在今天就顯得尤爲重
2023-03-31 13:27:53
原创 英雄聯盟比賽選手的六芒星能力圖動畫是如何製作的？
最近，在看 LPL 比賽的時候，看到這樣一個有意思的六芒星能力圖動畫： 今天，我們就來使用純 CSS 實現這樣一個動畫效果！ 實現背景網格 對於如下這樣一個背景網格，最好的方式當然肯定是切圖，或者使用 SVG 路徑。 如果一定要使用 C
2023-03-24 13:28:51
原创 CSS 高階小技巧 - 角向漸變的妙用！
本文將介紹一個角向漸變的一個非常有意思的小技巧！ 我們嘗試使用 CSS 繪製如下圖形： 在之前，類似的圖案，其實我們有嘗試過，在 單標籤實現複雜的棋盤佈局 一文中，我們用單標籤實現了這樣一個棋盤佈局： 那麼，本文有什麼特殊之處呢？讓我們
2023-03-21 13:27:56
原创 現代圖片性能優化及體驗優化指南 - 圖片資源的容錯及可訪問性處理
本文是系列第五篇，終章。系列文章： 現代圖片性能優化及體驗優化指南 - 圖片類型及 Picture 標籤的使用 現代圖片性能優化及體驗優化指南 - 響應式圖片方案 現代圖片性能優化及體驗優化指南 - 縮放精細化展示及避免佈局偏移、拉伸 現
2023-03-10 13:27:57