8个前沿的 HTML5 & CSS3 效果【附源码下载】

作为一个前沿的 Web 开发者,对于 HTML5 和 CSS3 技术或多或少都有掌握。前几年这些新技术刚萌芽的时候,开发者们已经使用它们来小试牛刀了,如今这些先进技术已经遍地开发,特别是在移动端大显身手。这篇文章挑选了8个前沿的 HTML5 & CSS3 效果,记得收藏哦:)

温馨提示:为保证最佳的效果,请在 IE10+、Chrome、Firefox 和 Safari 等现代浏览器中浏览。

HTML5 模拟现实物理效果

Ball Pool 是一个基于 HTML5 技术的实验,模拟现实物理效果,让你在 Web 中感受自然物体的运动。玩法介绍:可以随意拖动圆球、点击页面背景、晃动浏览器、双击页面背景或者按住鼠标左键,有不同的效果,赶紧来体验一下。

源码下载     在线演示

实现各种 CSS3 文本动画效果

这个插件集成了一些非常好的 JavaScript 库,提供一个方便使用的文本动画插件,可以让你为网页中的文字运用各种动画。

源码下载     在线演示

离开你网站时显示模态弹窗

Ouibounce 是一个微小的库,用于实现在用户离开你的网站的时候显示一个模式窗口。这个库可以帮助你增加着陆页的转换率。 Ouibounce 会在当鼠标光标移动到接近(或通过)视口(viewport)的顶部的时候触发。

源码下载      在线演示

实现各种好看的阴影效果

Shine.js 是一个用于实现漂亮阴影的 JavaScript 库。您可以设置动态光的位置,可定制的阴影。不依赖于第三方库,兼容 AMD。能在支持 textShadow 或 boxShadow 的浏览器中正常使用,如果有需要会自动添加前缀。

源码下载      在线演示

表单填写进度提示效果

Fort.js 是一款用于时尚、现代的表单填写进度提示效果的 JavaScript 库,你需要做的就是添加表单,剩下的任务就交给 Fort.js 算法了,使用非常简单。提供了Default、Gradient、Sections 以及 Flash 四种效果,满足开发的各种场合需要。

源码下载      在线演示

HTML5 WebGL 实现逼真的云朵效果

使用 HTML5 WebGL 实现超逼真的云朵效果。WebGL 是一项在网页浏览器呈现3D画面的技术,有别于过去需要安装浏览器插件,通过 WebGL 的技术,只需要编写网页代码即可实现3D图像的展示。

源码下载      在线演示

带有数字显示的加载进度条效果

有的时候,在我们的应用程序中,我们希望能够显示特定任务的百分比进度。这里分享的这款小巧的 JavaScript 插件就是实现这个功能,易于使用和定制,而且是是免费开源的。

立即下载      在线演示

自适应的占位符效果

在早期,我们都是通过使用 JavaScript 来实现占位符功能。而现在,HTML5 原生提供的 placeholder 属性让我们在现代浏览器轻松就能实现这样的功能。这里向大家分享一个自适应的占位符效果(Adaptive Placeholder),当你输入的时候,提示文字不会消失,而是以动画的方式移动到了输入框的上方。

源码下载      在线演示

未经允许不得转载:前端里 » 8个前沿的 HTML5 & CSS3 效果【附源码下载】

评论 90

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. Tekken魁这个云朵这个东西下载本地之后不能显示回复
    • 可以显示呀回复
      • Tekken魁难道我的浏览器还是路径有问题么?回复
      • Tekken魁我看不到云啊!!!!!!只能看到蓝天!!!回复
        • 梧雨里面有脚本代码,部署到服务器上(IIS)打开就OK了回复
          • A罩未满不行呀! 我用服务器也是打不开呀!?lunix的
          • 小希要Chrome或者Safari浏览器才可以额。
          • 小希嗯,Web服务器上都可以。
        • 真诚在听众那只能证明你慧根不够得找个和尚点化点化才行 回复
          • ddd王林,我推荐王大师,会空盆抓蛇的那个
          • hgjjgjg gj
          • ooohhh
    • 小希放到服务器上跑才可以额。回复
      • Tekken魁 为什么?回复
      • 弦上的梦灬Think You. 我部署到tomcat 里就可以了.回复
    • 七夏浏览器版本比较低 我的360浏览器看不到 但是火狐能回复
    • 12313213回复
  2. 爱问问很好玩的例子回复
  3. virgo感觉实现起来好难啊,看不懂源代码啊,⊙﹏⊙b汗回复
  4. 杨雨-IT博客挺实在的东西回复
  5. yoyo.zhou学习了回复
  6. xiaoxiong希望版主在实例中加写注释,要不一些出学者会看不懂代码,谢谢!回复
    • Tekken魁你想多了,小李怎么可能这么老实…… 回复
      • 小希时间有限,只能分享,还得自己专研。回复
        • 曾文泉能不能告诉我,怎么把上面的广告去掉啊回复
          • 小希去掉init.js啊
          • yygoood
          • 宋mm删除页面结构 div class="top-banner clearfix"
          • 任泽生
    • 小希效果太多了,没那么多精力额。回复
  7. 哈哈不错哦回复
  8. 小天使非常不错,创意很不错,学习留用,谢谢!~回复
  9. Xoris.不错的呢。很喜欢回复
  10. 陈曾进云朵那效果在安卓上显示不出来 只有IOS可以显示 求怎么解决啊?回复
    • 小希这个木有办法额,要支持WebGL才行。回复
      • 陈曾进有没有办法写代码加载插件然后支持呢?回复
        • 小希木有办法啊,不支持的浏览器除非用Flash了。回复
          • 陈曾进哎 安卓上用不了 电脑上也只有火狐可以用 这样的话这个就很鸡肋了啊
  11. www.html5zhijia.com很强大,学习了,以后会常来的回复
  12. 学习学习了,楼主的博客真强大回复
  13. 路人悄悄问:整个天空和云彩能做背景用吗?回复
    • 小希可以啊,不过不是CSS的背景,而是通过设置z-index这样的的方式。回复
  14. 09;klj;8990909 回复
  15. 撒蓝ljklhklhj回复
  16. KfCalf够牛,如果能当作动态背景,真是酷呆了回复
  17. ruby云朵太炫了。。。。回复
  18. 小小花还蛮好玩的,我也觉得顺便带一嘴注释比较好哦,欣喜若狂看到这个网站回复
  19. 小小花你就是梦想天空吗????这么强悍,关注你那个博客园了哦,赞,你好腻害回复
  20. 姚志大大的赞回复
  21. 小君真强大,长见识了回复
  22. pokay酷〜 学习了回复
  23. ChanneW很炫很有趣回复
  24. 爱旅游爱分享真好看回复
  25. se7en好玩!回复
  26. 贺慧很炫。。但是有部分不太兼容,白云的那个360不兼容,表单的那个不兼容ie9以下的浏览器。。不过还是好强大。。必须下载,攒着抽空学习学习。。回复
  27. 最励志官网不错,值得收藏分享!回复
  28. 歪妖内涵网路过看一下!回复
  29. 爱奇趣分享网过来支持一下 值得收藏分享回复
  30. 凡大大云朵的那个真的是太赞回复
  31. yyhfhfd请问怎么下载源码?我下载不下来回复
    • 小希进入源码下载页面就可以下载的。回复
  32. 内涵段子过来支持一下 值得收藏分享回复
  33. 韩美女车模谢谢博主,博主太好人了回复
  34. 真的太棒了!真的太棒了。 回复
  35. 00bbbbbbbbbbbbbbbbbbb回复
  36. 发射点发生是[兔子]回复
  37. 但是222222222222222回复
  38. sssccccc回复
  39. 好设之徒沙发沙发沙发999999999999999999回复
  40. 沐浴清澄感谢大牛 长见识了回复
  41. 牛奶12138云朵那个上面可以写其他的代码吗?回复
  42. 自适应占位符,label 当中不是没有placeholder属性吗?回复
  43. 李氏你好怎么在你的这个云朵里加一个登陆框并且不影响云朵的显示 我加完后就覆盖了 我的邮箱是lijiaming724582205@163.com / lijiaming724582205@gmail.com/ 希望您能指点一下 回复
  44. 小阳哇!好炫酷啊!回复
  45. 赵小如1013炫酷到爆回复
  46. 弦上的梦灬think you.回复
  47. sss回复
  48. 胡嘉俊还是three.js,效果很惊艳,好好学WEBGL吧回复
  49. 男孩资源网(www.bittyboy.com)不错学习了,谢谢分享!回复
  50. 小易分享网文章很好~!赞回复