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