960px.cn
分享国外优秀设计教程

源自codepen的25个最受欢迎的HTML/CSS 代码

Codepen是一个非常了不起的网页应用。只要电脑能够上网,你就可以创建HTML, CSS和Javascript。如果你想选择性加入PRO版本,你会得到一些非常酷的效果诸如:世界范围内的成对编程(在线合作编码),给学生授课(学生可以通过网络观看你实时工作情况),轻松上传工作所需文件,等等。
我搜索了一些时下最好最流行的大家可能会感兴趣的codepen(仅限于HTML和CSS)。如果你想把它们融入到你的设计中去,那会大大节省你很多时间。或者你可以考虑下从别人那里学习一些新东西。
在下面的例子中你会看到各种各样的片段,HTML 陈列,登录方式,垂直菜单,甚至时下最流行的主题:扁平化设计(扁平化图像,扁平化按钮形状,扁平化用户界面要素,等)。好好欣赏这些精选的代码片段吧,如果现在没时间看完所有的代码例子,那就保存下来以备不时之需吧。

CSS3 Working Clock

这是一个纯css3时钟。它使用css动画还有图形,没有使用任何图片或者是js.

clock-codepen

CSS3 Pricing Table

pricing-table-codepen

CSS Loader

loader-css-codepen

Pure CSS3 MacBook Air with Thunderbird Display and Keyboard

flat-devices-codepen

Twitter Button Concept

twitter-button-codepen

CSS3 Loading Animation

css3-preloader-codepen

Pure CSS3 Vertical Menu with Hover Effect

vertical-menu-codepen

CSS3 Stamp effect using radial gradients

stamp-effect-codepen

I Love Blur

blur-effect-codepen

Social Navigation

social-navigation-codepen

Login

login-form-codepen

Calendar

calendar-codepen

Social Footer

social-footer-codepen

Parallax Landscape

parallax-landscape-codepen

CSS3 Thermometer

thermometer-codepen

CSS-Only Responsive Layout with Smooth Transitions

responsive-layout-codepen

Flat CSS3 Weather Widget

weather-widget-codepen

Flat Responsive Sliding Boxes

flat-boxes-codepen

Tiny CSS3 Round Breadcrumb

round-breadcrumb-codepen

CSS3 Hover Effect using :after Psuedo Element

flat-menu-codepen

Flat UI Elements

flat-ui-elements-codepen

CSS Flat Button Shapes

flat-button-shapes-codepen

Email UI

flat-email-ui-codepen

Flat Icons CSS

flat-icons-codepen

翻译于http://www.flashuser.net/25-html-css-code-snippets-codepen

 

转载请加连接:960px » 源自codepen的25个最受欢迎的HTML/CSS 代码

分享到:更多 ()

评论 9

评论前必须登录!

  1. #5

    很不错的代码。

    Ace6年前 (2013-10-28)
  2. #4

    不错的我正需要

    lennon4年前 (2015-03-30)
  3. #3

    不错的网站,很喜欢,期待互访

    最励志官网4年前 (2015-08-21)
  4. #2

    不错,值得收藏分享!

    最励志官网4年前 (2015-08-22)
  5. #1

    分享一下我的网站,http://www.iqiqu.net/? 爱奇趣网

    爱奇趣分享网4年前 (2015-08-23)