【特別推薦】小夥伴們驚呆了!8個超炫的Web效果
CodePen 是一個線上的 HTML、CSS 和 JavaScript 程式碼編輯器,能夠編寫程式碼並即時預覽效果。你在上面可以線上展示自己的作品,也可以看到其他人在網頁中實現的各種令人驚奇的效果。
今天這篇文章就為大家挑選出8個超炫的 Web 效果演示,這些 Demo 可以說都是藝術品,讓小夥伴們都驚呆了!(為保證最佳的效果,請在 Chrome、Firefox 和 Safari 等現代瀏覽器中瀏覽)
Light Loader
閃亮的進度條效果。我喜歡粒子演示作品,特別是那些能夠應用於實際的,例如這個由 Jack Rugile 編寫的進度條效果。看著這麼炫的效果,即使讓我多等一會也無妨:)
Whale
跟隨滑鼠移動的鯨魚。你會好奇這個效果是怎樣做出來的,事實上它只是一些簡單的形狀相互疊加,而且會跟著滑鼠移動。
Avgrund
立體彈窗效果。這個作品的作者是 Hakim,他在 CodePen 上面有很多很多的好作品,很難選擇出最好的一個。我挑選這個的原因是因為這個效果很實用。模態視窗配合深度的視覺效果讓整個介面特別有立體感。
Tearable Cloth
這是一個流暢的模擬可撕裂布料效果的演示。你會看到,藉助 Canvas 的強大繪圖和動畫功能,只需很少的程式碼就能實現讓您屏息凝神的效果。我相信這是 CodePen 最受歡迎的作品了,超過150萬的瀏覽量。讓人驚歎的互動,重力和搖曳的感覺——足以以假亂真。
Ribbon
動感的絲帶效果,作者是 Justin Windle。當你看到如此平滑的效果的時候,可以想象未來的 Web 平臺有很多的驚喜令人期待。
Mechanical Grass
機械草效果,作者是 Tim Holman。看著這個作品,我彷彿置身與一個遠離世俗的地,比如蒸汽朋克的作品《愛麗絲夢遊仙境》。
Twitter Button Concept
Twitter 立體按鈕效果,類似翻蓋的動作。藉助 CSS3 技術,可以創造出各種很酷的視覺效果。
Triangle Optical Illusion
三角形視覺效果,作者是 Ana Tudor,她擅長教學方面的程式設計,通過視覺演示本身來解釋一些理論。這是我最喜歡的一個有趣的例子。
原文連結:Chris Coyier’s Favorite CodePen Demos
編譯來源:夢想天空 ◆ 關注前端開發技術 ◆ 分享網頁設計資源
作者:山邊小溪
主站:yyyweb.com 記住啦:)
歡迎任何形式的轉載,但請務必註明出處。
相關文章
- 小夥伴們驚呆了!10行 JavaScript 實現文字編輯器JavaScript
- 分享5款小夥伴們推薦的好用軟體
- 給小夥伴們推薦幾個用來學習的公眾號
- 重磅!Google推出了AI人體影象分割工具,驚呆了小夥伴.....GoAI
- 8個最佳Web開發資源推薦Web
- 推薦8個超棒的學習 jQuery 的網站jQuery網站
- 老外被中國App驚呆了!APP
- 推薦個超好玩的專案
- 超級驚豔 10款HTML5動畫特效推薦HTML動畫特效
- 【Android珍藏】推薦10個炫酷的開源庫Android
- 震驚小夥伴的單行程式碼(Python篇)行程Python
- [小夥伴們]知識管理藝術
- 奢華炫光小鋼炮 遊戲玩家必備配置推薦遊戲
- 推薦 7 個超棒的監控工具
- 8個超炫酷仿蘋果應用的HTML5動畫蘋果HTML動畫
- 8個超炫酷的HTML5動畫演示及原始碼HTML動畫原始碼
- [小夥伴們]找工作這件事(背景篇)
- 2018年最全的23個阿里架構師面試題(特別推薦)阿里架構面試題
- 8 個超炫酷的純 CSS3 動畫及原始碼分享CSSS3動畫原始碼
- 回應小夥伴們的諮詢,5款好用的小軟體
- 小夥伴說VuePress太簡潔了,還有沒有其他部落格推薦?Vue
- 超炫!HTML5 粒子效果進度條HTML
- Python做web開發,推薦幾個能立馬上手的小專案PythonWeb
- HTML5超炫酷粒子效果的進度條HTML
- [小夥伴們]找工作這件事(實戰篇)
- 【推薦】7個超好用的Python開發工具!Python
- 含淚推薦5款小體積,超實用的工具
- 初入職場的小夥伴請注意,這 8 個坑不要再踩了
- 面試官看完我手寫的單例直接驚呆了!面試單例
- 【特別推薦】12款最佳的網站速度和效能測試工具網站
- 推薦 5 個 yyds 的開源 Python Web 框架PythonWeb框架
- 【小驚喜】總算一個小驚喜,Oracle ACEAOracle
- 5個介面效果很炫的JavaScript UI 框架JavaScriptUI框架
- 5 個介面效果很炫的 JavaScript UI 框架JavaScriptUI框架
- 組播推流工具有接單的小夥伴不?
- 13個超棒的程式碼資源網站推薦網站
- 【FastDFS】小夥伴們說在CentOS 8伺服器上搭建FastDFS環境總報錯?ASTCentOS伺服器
- 超好用的API介面集合推薦API