我在一個 Next.js 應用程序中使用 Heroicons，它們方便地將圖標封裝為 React 組件。 我想要做的一件事是自定義描邊寬度，使它們顯示得更細。 我查看了 JSX 中如何做到這一點，也許使用屬性，但是我找不到方法。 我可以直接從該網站導入 SVG，但我喜歡使用 React 組件的方法。 由於某種原因，我認為直接設置全局 CSS 屬性並不起作用，因為它在 SVG 中是硬編碼的，但實際上它起作用了： svg path { stroke-width: 1; }
如何在深色或亮色模式下顯示不同的網頁圖示 我在 Mac 上設置了自動切換深色和亮色模式的功能。 當我開始建立一個新的網站時，有一段時間我意識到我把一個白色圖片設置為網頁圖示，而在亮色模式下它幾乎是看不見的！ 所以我開始探索在深色模式中添加一個網頁圖示以及在亮色模式中添加不同的圖示的可能方法。 結果發現（目前）無法對 PNG/JPG 位圖圖片進行這樣的操作，但我們可以使用 SVG 向量圖像的技巧來實現。 我們可以在 SVG 圖像中嵌入 CSS。 如果圖像足夠簡單以至於我們可以識別一個顏色並在深色模式下更改它，那麼我們可以為這 2 種模式設置不同的顏色。 這是我用作網頁圖示的 SVG 代碼： <svg width="37" height="45" viewBox="0 0 37 45" fill="none" xmlns="http://www.w3.org/2000/svg" > <style> path { fill: #ccc; } @media (prefers-color-scheme: dark) { path { fill: #fff; } } </style> <path fill-rule="evenodd" clip-rule="evenodd" d="M31.8831 2.04389C25.2462 2.72205 20 11.1737 20 21.5C20 32.2696 25.7062 41 32.7451 41C33.9877 41 35.2047 40.7279 36.3664 40.2206C32.5452 43.2149 27.7311 45 22....
動畫是一個迷人的主題。無論您想要添加互動動畫，如過渡效果，還是構建整個全屏體驗，您都擁有所有所需的工具。 動畫是一個迷人的主題。無論您想要添加互動動畫，如過渡效果，還是構建整個全屏體驗，您都擁有所有所需的工具。 而且，您有很多不同且具有不同目的的選擇。 CSS 通常被認為更加高效，儘管 JavaScript 也可以非常高效。一切取決於您需要做什麼，以及每幀渲染所需的時間。 CSS 過渡效果 CSS 動畫 SVG 動畫 Canvas API 動畫 Web Animations API WebGL 讓我們總結這些選項，找出哪一種是合適的選擇。 CSS 過渡效果 CSS 過渡效果 有一個起點和終點。它們將一點從 X 移動到 Y，或從可見變為不可見。 它是最簡單的動畫，主要用於與頁面其餘部分無縫集成的微妙動畫。 通過過渡效果，您可以從一個狀態轉換到另一個狀態，但您無法做更多。 CSS 動畫 與 CSS 過渡效果相比，CSS 動畫 允許您具有不止 2 個狀態，事實上，您可以擁有很多狀態，並且可以用於創建更複雜的動畫。 當您需要相對簡單且無法使用過渡效果實現的動畫時，建議使用 CSS 動畫。 SVG 動畫 SVG 是一種出色的基於矢量的格式，可以使用 SMIL（SVG 動畫的"本地"格式）創建動畫。 由於存在跨瀏覽器的不一致性（並且 IE/Edge 不支援），SMIL 快將在 Chrome 中廢棄，但是團隊已暫時撤銷了此決定。 他們希望推動 CSS 動畫和 Web Animations API 來代替 SMIL。 Canvas API 動畫 Canvas API 提供了一種在屏幕上繪製的方法，使用的是點陣而不是向量。 儘管動畫是可能的，但不如其他選項高效。...