酷炫的 CodePen 演示（10 月 4 日）
發佈於2024-11-16
瀏覽：600
輕質水扭曲效果
Ksenia Kondrashova 使用帶有水效果的漂亮著色器創建了一個演示。它看起來很逼真，就像游泳池裡的水一樣。感覺平靜和催眠。
懸停時的 3D 視差效果
Temani Afif 使用單一圖像標籤創建令人驚嘆的效果。這是一個很好的例子：一個 HTML 標籤創建了驚人的 3D 效果…而且程式碼非常簡單！該演示幾乎只需要 18 行 CSS！
懸停時選擇性飽和
另一個使用單一影像元素的很酷的演示。 Ana Tudor 使用 SVG 濾鏡套用顏色插值蒙版並根據顏色突出顯示圖片元素。
煩人的土豆
您需要打開揚聲器來觀看 Sophia Wood（又名 Fractal Kitty）的這個有趣的演示。點擊聲音按鈕或按 1-8 按鈕讓馬鈴薯說話……但要小心，這可能既有趣又煩人。
車輪圖庫（僅限 CSS）
克里斯·博爾森創建的動畫圓形畫廊。將滑鼠懸停在圖片上並查看它們的動畫。我喜歡標題與照片運動一起顯示的方式。光滑的。
點彩派 NASA 圖像
Sophia Wood 的另一個演示。她用P5生成無限生成的點。每個週期它們的尺寸都會變小，展現出一幅太空圖。像往常一樣，藝術與代碼的創造性結合。
顏色對比檢查表
這更像是一個「書呆子」輔助功能演示：一個包含所有 CSS 顏色名稱及其顏色對比組合的網格。 Dave Rupert 使用 WCAG 2.1 規格來確定結果。
我的院子標誌
Chris Coyier 複製了這個標誌性標誌，應用滾動驅動的動畫來讓所有行動態調整（文字可編輯）其字體，以便所有行佔據相同的寬度。由於它使用animation-range屬性，該演示僅適用於Chrome。
具有滾動捕捉事件的滾動驅動動畫卡堆疊
Paul Noble 創建了一個令人驚嘆的卡片堆棧，將滾動驅動的動畫與滾動捕捉事件相結合。您必須使用觸控板（此演示無法使用滑鼠）才能享受美妙的過渡。
快速雙倍進步
Ana Tudor 的另一個演示。程式碼乾淨、簡短且語義化。我喜歡這個組件的設計（來自 Reddit 問題？）並且可以看到自己在某些項目中使用類似的東西。
如果您喜歡此列表，請查看上個月的演示！
版本聲明
本文轉載於：https://dev.to/alvaromontoro/10-cool-codepen-demos-october-2024-1li0?1如有侵犯，請聯絡[email protected]刪除
最新教學
更多>
-
為什麼我的 PyQt4 按鈕點擊訊號在循環內總是輸出相同的值？在循環中連接 PyQt4 中的槽和訊號在 PyQt4 中，在槽和訊號之間建立連接是事件處理的基本面向。但是，當嘗試連接循環內按鈕發出的多個訊號時，可能會出現意外行為。 為了說明此問題，請考慮以下程式碼：def __init__(self): for i in range(0, 10): ...程式設計 發佈於2024-11-16 -
如何在整個 MySQL 資料庫中執行全域查找和替換？尋找並取代整個 MySQL 資料庫目標是在整個 MySQL 資料庫中執行全域尋找和取代操作。這個問題建議更改以下語法：update [table_name] set [field_name] = replace([field_name],'[string_to_find]','[string_to_...程式設計 發佈於2024-11-16
-
如何在 C++ 中將字串轉換為雙精度數：使用 `std::istringstream` 和 `std::stod` 的簡單指南在C 中將字串轉換為雙精度型在C 中，可以使用std::istringstream 和std::stod 函數將字串轉換為雙精度型。 #include <sstream> double string_to_double(const std::string& s) { std:...程式設計 發佈於2024-11-16
-
如何在 PHP 中組合兩個關聯數組，同時保留唯一 ID 並處理重複名稱？在 PHP 中組合關聯數組在 PHP 中，將兩個關聯數組組合成一個數組是常見任務。考慮以下請求：問題描述：提供的代碼定義了兩個關聯數組，$array1和$array2。目標是建立一個新陣列 $array3，它合併兩個陣列中的所有鍵值對。 此外，提供的陣列具有唯一的 ID，而名稱可能重疊。要求是建構一...程式設計 發佈於2024-11-16
-
為什麼 Lambda 比 C++ 中的普通函數更可優化？與普通函數相比，為什麼Lambda 允許增強編譯器優化Nicolai Josuttis 的C 標準庫（第二版）斷言lambda可以與普通函數相比，編譯器可以更有效地最佳化。這項優勢源自於 lambda 作為函數物件的本質。 當 lambda 傳遞給函數模板時，它會被實例化為專門針對該物件定制的新函數...程式設計 發佈於2024-11-16
-
Bootstrap 4 Beta 中的列偏移發生了什麼事？Bootstrap 4 Beta：列偏移的刪除和恢復Bootstrap 4 在其Beta 1 版本中引入了重大更改柱子偏移了。然而，隨著 Beta 2 的後續發布，這些變化已經逆轉。 從 offset-md-* 到 ml-auto在 Bootstrap 4 Beta 1 中， offset-md-*...程式設計 發佈於2024-11-16
-
如何有效地從 JavaScript 中的物件陣列中刪除屬性？從物件陣列中有效刪除屬性處理包含多個物件的陣列時，需要從每個物件中刪除特定屬性。雖然使用 for 迴圈的簡單方法就足夠了，但探索利用 ES6 功能和原型操作的替代方法可以帶來更有效率的實作。 ES6 物件解構One這種技術就是 ES6 中引入的物件解構。它可以從物件中提取特定屬性並進一步分配給新變數...程式設計 發佈於2024-11-16
-
Nonce 如何保護 Web 要求免受重播攻擊？如何使用Nonces 保護Web 請求問題用戶找到了利用網站評分系統的請求驗證系統的方法：複製高價值的HTTP 請求。這會損害系統的完整性和可靠性。 解決方案：實現 Nonce 系統Nonce（使用一次的數字）是透過確保特定請求不被執行來防止請求重播攻擊的值。之前做的。這是實現隨機數係統的常見且安全...程式設計 發佈於2024-11-16
-
在 Go 中使用 WebSocket 進行即時通信构建需要实时更新的应用程序（例如聊天应用程序、实时通知或协作工具）需要一种比传统 HTTP 更快、更具交互性的通信方法。这就是 WebSockets 发挥作用的地方！今天，我们将探讨如何在 Go 中使用 WebSocket，以便您可以向应用程序添加实时功能。 在这篇文章中，我们将介绍： WebSoc...程式設計 發佈於2024-11-16
-
如何有效控制JVM記憶體消耗？控制JVM 記憶體消耗為了分配適當的資源以獲得最佳應用程式效能，設定JVM 的最大記憶體至關重要JVM （Java虛擬機器）可以利用。這不僅包括堆內存，還包括正在運行的進程的整個內存消耗。 為了實現這一點，JVM 提供了兩個關鍵的命令列參數：- Xms:: 此參數指定啟動時分配給JVM 的最小記憶體...程式設計 發佈於2024-11-16
-
互動式角鬥士戰鬥模擬|角鬥士之戰.com透過這個互動式角鬥士戰鬥模擬進入競技場！控制兩個強大的角鬥士，每個角鬥士都有獨特的動作，如攻擊、防禦和閃避，並配有動態動畫和即時戰鬥日誌。這款模擬由 GladiatorsBattle.com 提供支持，非常適合古羅馬和戰術遊戲的粉絲。加入戰鬥，體驗鬥獸場的快感！ ...程式設計 發佈於2024-11-16
-
如何正確設定Java URLConnection中的User-Agent？設定Java URLConnection 的使用者代理程式嘗試使用Java 和URLConnection 解析網頁並將使用者代理設定為指定的值時，可以在末尾附加一個額外的“Java/1.5.0_19”。這是由於舊版 Java 的限制所致。 解決方案（Java 1.6.30 及更高版本）在 Java ...程式設計 發佈於2024-11-16
-
讀取檔案時如何刪除文字換行符？消除文本中的換行符在提供的程式碼片段中，您遇到了一個問題，即無意中向每行添加了換行符讀取檔案時。要修正此問題，您可以採用以下策略：選項1：刪除最後一個字元使用切片從讀取行中刪除最後一個字符:read_line = read_line[:len(read_line)-1]選項2：利用字串庫利用字串庫刪...程式設計 發佈於2024-11-16
-
Java 虛擬機器：生命週期與類別載入器Java 虛擬機器 (JVM) 是 Java 生態系統的核心，提供執行 Java 程式碼的所有必要工具。要充分理解它的工作原理，了解該解釋器的生命週期及其對 Java 應用程式的效能和最佳化的影響至關重要。 整個 JVM 生命週期始於一個稱為「JVM Bootstrapping」的基本過程，該過程...程式設計 發佈於2024-11-16
學習中文
- 1 走路用中文怎麼說？ 走路中文發音，走路中文學習
- 2 坐飛機用中文怎麼說？ 坐飞机中文發音，坐飞机中文學習
- 3 坐火車用中文怎麼說？ 坐火车中文發音，坐火车中文學習
- 4 坐車用中文怎麼說？ 坐车中文發音，坐车中文學習
- 5 開車用中文怎麼說？ 开车中文發音，开车中文學習
- 6 游泳用中文怎麼說？ 游泳中文發音，游泳中文學習
- 7 騎自行車用中文怎麼說？ 骑自行车中文發音，骑自行车中文學習
- 8 你好用中文怎麼說？ 你好中文發音，你好中文學習
- 9 謝謝用中文怎麼說？ 谢谢中文發音，谢谢中文學習
- 10 How to say goodbye in Chinese? 再见Chinese pronunciation, 再见Chinese learning
