2015年度 CodePen Top 100 代码片段_html/css_WEB-ITnose-html教學-PHP中文網

Top 1: Chill the lion

Top 2: pen#PwLXXP

Top 3: #DaftPunKonsole

Top 4: Elastic SVG Sidebar Material Design

Top 5: 10 stylish hover effects with less

Top 6: Gooey Menu

Top 7: ·● MOTION for the web ●·

Top 8: 10 stunning hover effects with scss

Top 9: Bubble • Layout

Top 10: Flipside

首頁

web前端

html教學

2015年度 CodePen Top 100 代码片段_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 08:58 AM

代码笔（CodePen）有很多出众的前代码片段，设计师或喜欢前端的人员可以都可能常去那边寻找灵感或学习一些代码的运用。最近CodePen放出2015年度最热门的100个代码片段，很多代码确实很赞，大家不要错过哦，下面我们筛选几个给大家欣赏。

截图画自 Top18

注：以下代码内容以iframe形式嵌入，RSS订阅用户可能无法正常查看真实效果，请到设计达人网站查看。

加载稍慢，想看好东西，请耐心等待。

Top 1: Chill the lion

很可爱的筛子，按住鼠标左键风车会转动哦。

Top 2: pen#PwLXXP

用代码写的一个教学视频教程，一边code，一边绘制一个心形图案。

Top 3: #DaftPunKonsole

一个小游戏，但没研究出怎么玩？连成一个句子吗？

一个SVG侧边栏，那个弹性动画很NICE.

Top 5: 10 stylish hover effects with less

10个文字HOVER特效，那个像游览一样的效果场景很适当。

菜单效果

Top 7: ·● MOTION for the web ●·

文字动画，字好看，动画也好看。

Top 8: 10 stunning hover effects with scss

10个文字应用特效

Top 9: Bubble • Layout

Top 10: Flipside

这个弹窗的交互很赞呢。

小编觉得TOP10并不是最好的，在其它代码片段中也有很多惊艳或者实用的案例，请前往Codepen网站查看。

网站名称：The most hearted of 2015

网站地址： http://codepen.io/2015/popular/pens/

你也可以查看2014年的TOP100代码：「 2014年Codepen上最热门的100个code&CSS片段代码」

交流：想结交更多有才华的设计师？请到（UI设计QQ群）列表，与50000名设计师交流设计。

设计导航：小盆友和大神都值得拥有的设计师网址导航： http://hao.shejidaren.com

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7801

Java教學

1644

CakePHP 教程

1402

Laravel 教程

1299

PHP教程

1236

Related knowledge

HTML容易為初學者學習嗎？ Apr 07, 2025 am 12:11 AM

HTML適合初學者學習，因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩，易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高，可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

HTML，CSS和JavaScript的角色：核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

了解HTML，CSS和JavaScript：初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML中起始標籤的示例是什麼？ Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。