資訊專欄INFORMATION COLUMN
摘要：看看這些驚人的純實驗，也許你自己也可以嘗試一下。項目鏈接疊疊高游戲你可以不用來編寫一個游戲。這個純粹用實現的疊疊高游戲看上去很簡單，但是很有趣，而且圖形也很漂亮。項目鏈接鬼影漸變效果按鈕令人驚訝的是它是只用編寫的。
翻譯：瘋狂的技術宅
原文：https://1stwebdesigner.com/12...
本文首發微信公眾號：jingchengyideng
歡迎關注，每天都給你推送新鮮的前端技術文章
你可能認為 CSS 只是一種簡單地為網頁設計樣式的語言，但它的功能比你想象的要多得多。 從逼真的圖像到甚至是視頻游戲，你會驚訝地看到一個優秀的開發者可以用 CSS 做些什么。
這里有各種濾鏡和特效，它們都是開源的，可以用在你自己的 web 項目中。 這些模塊有的機遇 JavaScript，更多的是HTML。 這意味著它們比你期望的更輕盈。 看看這些驚人的純CSS實驗，也許你自己也可以嘗試一下。
太陽系
哇！ 如果你喜歡太空，一定會被這個用 CSS 實現的的太陽系動畫效果所震撼。 這不僅僅是一個漂亮的動畫; 相對于真實的地球年，每個行星都能準確地圍繞太陽旋轉。
查看演示
項目鏈接：https://codepen.io/kowlor/pen...
漸變背景動畫效果動畫對于網站來說是一個臭名昭著的問題。如果優化不佳，可能會導致速度大服務放緩。這個美麗的動畫漸變效果非常輕巧，更不用說它能讓你很容易的就能編輯和添加自己的顏色。
項目鏈接：https://codepen.io/P1N2O/pen/...
疊疊高游戲你可以不用 JavaScript 來編寫一個游戲。這個純粹用 CSS 實現的疊疊高游戲看上去很簡單，但是很有趣，而且圖形也很漂亮。雖然做出來并不容易，但這只也僅僅是讓 CSS 小小的露了一手。
查看演示
項目鏈接：https://codepen.io/finnhvman/...
3D進度條漂亮輕便的進度條。易于定制，很容易適應你的項目。 這些條紋使用 3D 技術制作，具有獨特的液體外觀。 你甚至可以將它們變成迷你 3D 圖表！
查看演示
項目鏈接：https://codepen.io/rgg/pen/Qb...
出故障的文字故障文本看起來總是很酷。這個案例沒有使用 GIF，僅用 JavaScript 或 HTML 就實現了生動的特效。 如果你想為你的網站添加小故障效果，請參考它。
查看演示
項目鏈接：https://codepen.io/lbebber/pe...
Francine你可以用 HTML 和 CSS 制作藝術品！ Francine 是一副18世紀風格的畫作，純粹用代碼制作和展示。 然而它看起來與其他傳統創作的藝術品沒有任何區別。
項目鏈接：https://github.com/cyanharlow...
手機與 Francine 類似，這款手機也是只用 CSS 和 HTML 創造的，但是看上去簡直和真的一樣！ 如果你有興趣，可以使用代碼并查看如何實現。
查看演示
項目鏈接：https://codepen.io/Wujek_Greg...
地圖創作器你以為要用 JavaScript 來編寫這東西？ 再好好想想！ 這個可愛的 3D 地圖創作器除了 CSS（還有一點點HTML）之外什么都沒有。 難道這不足以令人興奮嗎？
查看演示
項目鏈接：https://codepen.io/onediv/pen...
Instagram.css你的網站需要一些仿 Instagram 風格的過濾器？ 這組縮小文件也附帶安裝教程。 現在，你可以輕松地將 Instagram 過濾器添加到任何圖像中。
項目鏈接：https://picturepan2.github.io...
鬼影漸變效果按鈕令人驚訝的是它是只用 CSS 編寫的。 憑借其漂亮的動畫和漸變效果，把這個按鈕用在任何網站上，看起來都會很棒。
查看演示
項目地址：https://codepen.io/ARS/pen/vE...
Devices.css如果你曾經想在自己的網站上展示手機或電腦，并在屏幕上顯示你所選擇的圖片，請參考此項目。 這些都是以現代設備為藍本設計的！
項目地址：https://picturepan2.github.io...
動態圖像著色這是一個非常酷的項目：用 CSS 和顏色選擇工具更改圖片中的顏色。
演示效果
項目地址：https://codepen.io/noahblon/p...
小巧、靈敏和美麗你在網站上看到的許多驚人的特效都可以說是 JavaScript 的功勞，遺憾的是 JS 并不總是最輕量級的解決方案。 不過你可能會對CSS的功能感到驚訝。 如果做得正確，大多數情況下它對性能的影響要小得多。
無論是哪種方式，可以看到 CSS開發者提出的這些創意都很有趣。這些實驗項目是由一些真正的創新開發者做出的，所以請去給他們一些支持，并告訴我你覺得哪個是最酷的！
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/53630.html
摘要：看看這些驚人的純實驗，也許你自己也可以嘗試一下。項目鏈接疊疊高游戲你可以不用來編寫一個游戲。這個純粹用實現的疊疊高游戲看上去很簡單，但是很有趣，而且圖形也很漂亮。項目鏈接鬼影漸變效果按鈕令人驚訝的是它是只用編寫的。 翻譯：瘋狂的技術宅原文：https://1stwebdesigner.com/12... 本文首發微信公眾號：jingchengyideng歡迎關注，每天都給你推送新鮮...
摘要：看看這些驚人的純實驗，也許你自己也可以嘗試一下。項目鏈接疊疊高游戲你可以不用來編寫一個游戲。這個純粹用實現的疊疊高游戲看上去很簡單，但是很有趣，而且圖形也很漂亮。項目鏈接鬼影漸變效果按鈕令人驚訝的是它是只用編寫的。 翻譯：瘋狂的技術宅原文：https://1stwebdesigner.com/12... 本文首發微信公眾號：jingchengyideng歡迎關注，每天都給你推送新鮮...
摘要：翻譯瘋狂的技術宅原文許多前端開發人員都在用為他們的網站設計樣式。一些人喜歡在中添加一些自己偏好的樣式，我也一樣。我認為這是令人難以置信和奇怪的。不同的瀏覽器為表單元素和按鈕設置了不同的邊框樣式。這種風格的問題是它的特異性低。 翻譯：瘋狂的技術宅原文：https://medium.freecodecamp.o... 許多前端開發人員都在用 Normalize 為他們的網站設計樣式。一些...
摘要：經過一番研究，我收集了個最好的庫，你可以用在自己的項目中。該庫于年月首次推出，目前仍有近名參與者開發。超過的，是一個動畫庫，可以處理屬性單個轉換或任何屬性，以及對象。對智能設備的方向作出反應的視差引擎快速創建漂亮的動畫。 翻譯：瘋狂的技術宅原文：https://blog.bitsrc.io/11-jav... 當我想要在網上找一個簡潔的 Javascript 動效庫時，總是發現很多推...
摘要：翻譯瘋狂的技術宅原文在本文中，我們將介紹兩種提取循環內數據的方法內部迭代和外部迭代。它是循環和遞歸的組合遞歸調用在行。 翻譯：瘋狂的技術宅 原文：http://2ality.com/2018/04/ext... 在本文中，我們將介紹兩種提取循環內數據的方法：內部迭代和外部迭代。 循環 舉個例子，假設有一個函數 logFiles()： const fs = require(fs); c...
閱讀 2041·2023-04-25 15:11
閱讀 3461·2021-09-23 11:57
閱讀 1372·2021-07-26 23:38
閱讀 1319·2019-08-30 15:54
閱讀 635·2019-08-30 15:53
閱讀 3245·2019-08-26 13:36
閱讀 986·2019-08-26 12:01
閱讀 2863·2019-08-23 16:21
