100个惊人的CSS、JS代码技术

标签: HTML & CSS CSS3 HTML5 | 发表时间:2014-01-20 09:09 | 作者:设计 达人
分享到:
出处:http://www.shejidaren.com

css top-2013

最近在Codepen看到Top Pens of 2013这个专题,专题内容为2013年上最优秀的前100个CSS、HTML5和Javascript Pens,在惊叹技术人员的创造力同时我们还能学习这些技术,对交互设计师而言还能获取灵感哦!

Top Pens of 2013专题地址: http://codepen.io/2013/popular

这里我们选出排名前10名的Pens,无论是前端人员还是设计师,我觉得还是值得一看的。PS:在浏览这些技术记得使用兼容CSS3/ HTML5的浏览器哦,否则有些效果你看不出来。

TOP 10: CSS 绝对居中(水平垂直居中)

一个CSS居中的新写法,这个我觉得比较实用,因为兼容IE8呢,IE6就不说了,一边去吧。

css top-10
在看演示

TOP 9: 跟随移动鼠标HOVER特效

这个中文有点难解释,大家自己看案例才知道是什么效果…挺新鲜的效果。

css top-09
在看演示

TOP 8: 拟实化倒计时实例

这个倒计时设计图出来的时候,第一眼就很喜欢了,现在代码版了,些DEMO由CSS+JS写的。

css top-08
在看演示

TOP 7: CSS 3D效果

这个在实际项目中没什么有,但可以用来学习研究,看看能否在其它项目上使用。

css top-07
在看演示

TOP 6: CSS+jQuery实现WIN8风格的效果切换

效果确实真的不错,动画也流畅,如果用在个人博客还是挺个性化的。

css top-06
在看演示

TOP 5: 创意CSS菜单

这个CSS写的菜单真的很有创新,点击后会以动画形式改变成形状的图标,NICE!

css top-05
在看演示

TOP 4: 拟实化CSS按钮

使用 CSS3编写,效果不错。

css top-04
在看演示

TOP 3: 创新CSS按钮

鼠标移到按钮上的打开面板效果很不错,带3D感,还有阴影啊,做得真细节。

css top-03
在看演示

TOP 2: 触摸设备菜单概念设计

设计可爱,动画效果也很棒,赞!

css top-02
在看演示

TOP 1: Tearable Cloth

十分强大的js技术特效,PS: 用右键可以把网切开哦!

css top-01
在看演示


Copyright ©2010-2013 ¦ RSS订阅 ¦ 新浪微博 ¦ 本文链接 ¦ 添加评论

相关 [css js 代码] 推荐:

100个惊人的CSS、JS代码技术

- - 设计达人
最近在Codepen看到Top Pens of 2013这个专题,专题内容为2013年上最优秀的前100个CSS、HTML5和Javascript Pens,在惊叹技术人员的创造力同时我们还能学习这些技术,对交互设计师而言还能获取灵感哦. Top Pens of 2013专题地址: http://codepen.io/2013/popular.

在线调试并共享HTML,CSS,JS

- Albert - [米随随] s5s5
如题,以后同人讲代码时可以用到. 2004年04月9日 -- MSN中文专业站 (0). 2006年06月5日 -- 读“疲倦的博客们”有感 (9). 2005年07月20日 -- 基于web2.0的网站创意 (33).

js和css的顺序关系

- - Kejun's Blog
head里的顺序如下,考虑会对请求有何影响:. a,b – head里出现外联js,无论如何放,css文件都不能和body里的请求并行 (图1). c – head里的内联js只要在所有外联css前面,css文件可以和body里的请求并行(图2). d – head里的内联js只要在任一外联css后面,css文件就不能和body里的请求并行(图1).

[html/css/js]搜索建议提示

- - CSDN博客推荐文章
// 根据id获取dom元素. // 将label绑定到input上作为输入提示. // 获取输入焦点时,隐藏提示标签. // 失去输入焦点时,判断输入框的是否有值,有则显示提示标签. // 窗口加载完dom结构时. <label for="txt-search" id="lbl-search" class="lbl-default">请输入要搜索的内容</label>.

ajax核心js代码

- - ITeye博客
                         //针对firefox,mozillar,opera,safari,IE7,IE8.                          //针对某些特定版本的mozillar浏览器的bug进行修正.                          //针对IE6,IE5.5,IE5.

用javascript预加载图片、css、js的方法研究

- - 博客园_Ruby's Louvre
预加载的好处可以让网页更快的呈现给用户,缺点就是可能会增加无用的请求(但图片、css、js这些静态文件可以被缓存),如果用户访问的页面里面的 css、js、图片被预加载了,用户打开页面的速度会快很多,提升用户体验. 在用到一些大图片展示的时候,预加载大图是很不错的方法,图片更快的被呈现给用户. 不多说了,作为一个前端攻城师都懂的,下面分享我做的测试和得到的结果.

Ratchet:使用 HTML,JS,CSS 创建 iPhone App 原型

- - 我爱水煮鱼
Ratchet 是一个免费的开源的工具,它主要的功能就是可以使用最简单的 HTML,CSS,JavaScript 这些 Web 技术就能很容易创建 iPhone 应用原型. Ratchet 使用非常简单,只需要简单的几行代码就能创建绝大部分 iOS 的组件,如:Bars, Lists, Buttons, Segmented controllers, Counts, Forms, Toggles, Popovers, Sliders, Push 等等.

收集免费的HTML/CSS/JS UI工具包

- - Jackchen Design 1984
随着HTML5和CSS3以及网页设计布局的全面翻新创新改革. 让很多网页设计者和界面设计师都知道一个道理. 这不仅仅是未来提高工作的效率,还能更好的去处理网页整体视觉效果. 优秀的工具包可以让您的工作事半功倍是肯定. 重要的是可以让流程更加清晰快速的呈现出来. 所以对于很多好的网站(比如Facebook,twitter,YaHOO等)你看第一眼就能知道他们所属的风格指向.

支付宝下拉菜单JS代码

- - 网页素材大全_网页素材大全
支付宝下拉菜单JS代码是一款来自支付宝首页的JS下拉菜单特效代码. jQuery火箭图标返回顶部代码. JS淘宝网产品图片局部放大代码. 文字阴影插件shine.js.

【Web 开发必备】 史上最全的浏览器 CSS & JS Hack 手册

- - 博客园_首页
  浏览器渲染页面的方式各不相同,甚至同一浏览器的不同版本(“杰出代表”是 IE)也有差异. 因此,浏览器兼容成为前端开发人员的必备技能. 如果有一份浏览器 Hack 手册,那查询起来就方便多了. 这篇文章就向大家分享 Browserhacks 帮我们从网络上收集的各个浏览器特定的 CSS & JavaScript Hack,记得推荐和分享啊.