阅读更多

13顶
0踩

Web前端

原创新闻 8个前沿的 HTML5 & CSS3 效果(附源码)

2014-07-21 10:49 by 见习记者 webgeeker 评论(21) 有35031人浏览
作为一个前沿的 Web 开发者,对于 HTML5 和 CSS3 技术或多或少都有掌握。前几年这些新技术刚萌芽的时候,开发者们已经使用它们来小试牛刀了,如今这些先进技术已经遍地开发,特别是在移动端大显身手。这篇文章挑选了8个前沿的 HTML5 & CSS3 效果,希望对你有所帮助。

1.  HTML5 模拟现实物理效果

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



源码下载  /  在线演示

2.  实现各种 CSS3 文本动画效果

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



在线演示   源码下载

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

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



源码下载  /   在线演示

4.  实现各种好看的阴影效果

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



源码下载  /   在线演示

5.  表单填写进度提示效果

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



源码下载  /   在线演示

6.  HTML5 WebGL 实现逼真的云朵效果

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



源码下载  /   在线演示

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

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



立即下载  /   在线演示

8.  自适应的占位符效果

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



源码下载  /   在线演示
  • 大小: 65.4 KB
  • 大小: 32.8 KB
  • 大小: 65.3 KB
  • 大小: 21.4 KB
  • 大小: 9.1 KB
  • 大小: 103.7 KB
  • 大小: 20.7 KB
  • 大小: 15.8 KB
来自: 前端里
13
0
评论 共 21 条 请登录后发表评论
21 楼 小小与大大 2014-09-03 16:03
mark.
20 楼 huoquan 2014-08-21 13:40
高效美观的UI框架点这里
19 楼 zhangkehbg 2014-08-10 00:20
顶  好好学习一下
18 楼 shadowhonter 2014-08-09 09:31
mark.
17 楼 gbwl_cgl 2014-08-08 09:24
不错   
16 楼 gavenbeyond 2014-08-07 15:04
mark,好东东
15 楼 luotitan 2014-08-05 15:36
mark.
14 楼 mistake 2014-08-04 15:23
markd
13 楼 wendysunday 2014-08-04 09:54
我也mark一下吧
12 楼 jiabaoyu114 2014-08-01 16:52
效果还 行
11 楼 过路人2014 2014-08-01 11:47
效果很不错
10 楼 lin_zy 2014-08-01 10:53
mark...
9 楼 leijuanjuan 2014-07-29 12:33
8.  自适应的占位符效果 。很不错,解决了手机端的页面展示问题
8 楼 pardozz 2014-07-29 09:48
mark!
7 楼 linginfanta 2014-07-25 23:21
不错,网站想改版,有没有人接招?秘鲁玛卡
6 楼 1927105 2014-07-24 15:26
mark.
5 楼 long_ltoy 2014-07-24 09:17
是很炫但是还是不实用,CPU占用50%+
4 楼 hongtoushizi 2014-07-23 10:33
mark
3 楼 caizhilin2010 2014-07-22 14:18
mark.
2 楼 Finishx 2014-07-22 10:57
mark.

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • .Net获取URL中文参数值的乱码问题解决方法总结

    本文总结分析了.Net获取URL中文参数值的乱码问题解决方法。分享给大家供大家参考,具体如下: 解决方法: 1.设置web.config文件 2.传递中文之前,将要传递的中文参数进行编码,在接收时再进行解码。 string ...

  • SpringMVC redirect中文乱码

    用spring redirect中文会乱码:如下示例 public String redirectTest(){ redirect:/payment/alipay?body="中文"; } 浏览器会出现 body=??中文乱码 解决方案 1、spring mvc 有自定义的org.springframework.ui....

  • redirect重定向的url中的中文乱码问题

    通过url传参之前  searchParamsStr = java.net.URLEncoder.encode(searchParamsStr,"UTF-8");  

  • url 编码 js url传参中文乱码解决方案

    ”GB2312″ requestEncoding=”GB2312″ responseEncoding=”GB2312″/> 这样参数就以gb2312的中文编码方式传输了。而一般默认是utf-8. 2.在传参是先编码在传输,接受时先编码,在接收。 string mm=Server....

  • java url 参数 编码_java下URL参数带中文的编码问题

    最近用springmvc的时候纠结某些问题,原因是controller可以通过刷新重复提交,为了防止重复提交,我使用了重定向方法,返回一个新的...URL中文参数的纠结问题的发现还是源于不同的测试环境,本地容器tomcat的se...

  • 重定向URL中文乱码问题

    今天在使用重定向的时候,URL中的传参还有中文,导致出现了中文乱码,最后发现,是因为在重定向使用的是response,response 缓冲区的默认编码是 iso8859-1,此码表中没有中文。所以我们需要借助URLEncoder这个工具类...

  • redirect重定向的url中存在中文字符转码

    我在做fastdfs下载的时候用到下载链接重定向,为了让文件原名称显示...一步一步跟踪可发现在接收的request中,该值被转义为类似”%85%45%151”形式的字符,然后接收url值时未将汉字字符转义回来。给出如下解决方法:...

  • SpringBoot解决redirect参数中文乱码问题

    代码如下:&name=" + new URLEncoder()....只需要将中文参数encode一下就ok了。当然,知其然更要知其所以然。URLEncoder和URLDecoder的作用如下: 1.URLEncoder.encode(String s, String enc)使用指定的编码机...

  • 解决重定向后,URL中文乱码问题

    目录原因1原因2原因3(问题解决) 原因1 服务端获取数据时,获取到的就是乱码(通过debugger排除了) 原因2 前后端字符编码不一致 解决思路 ...服务端使用ModelAndView进行重定向时,发现URL中文未乱

  • asp.net url传递后地址栏乱码(中文超过两个汉字)

    编码编好的url是正确的,可传到另一个页面 就会出错,在地址栏就已经乱码了 1.设置web.config文件 代码如下: <system> ”gb2312″ responseEncoding=”gb2312″ culture=”zh-CN” fileEncoding=”gb2312″> ...

  • url_for函数与redirect重定向

    一般我们通过一个 URL 就可以执行到某一个函数。如果反过来,我们知道一个函数,怎么去获得 这个 URL 呢? url_for 函数就可以帮我们实现这个功能。 url_for() :函数接收两个及以上的参数,他接收函数名作为第一个...

  • 解决 redirect 跳转中文乱码问题

    代码 return "redirect:/dzzz.htm?snType=sfzxq&zjlx=sfzxx&real_name=" + URLEncoder.encode(userInfo.getReal_name(),"UTF-8") + "&cert_no=" + userInfo.getCert_no();

  • redirect重定向的url中存在中文字符转码的解决方法

    一步一步跟踪可发现在接收的request中,该值被转义为类似”%85%45%151”形式的字符,然后接收url值时未将汉字字符转义回来。给出如下解决方法: @RequestMapping(value = "saveData" ) public String save...

  • 阿里云URL转发类问题排查

    URL转发包含URL隐性转发和URL显性转发,主要是指将一个域名指向另外一个已经存在的站点时,可以通过URL转发实现。隐性URL转发是用的是iframe框架技术,显性URL转发采用的是301(也称之为永久性转移)或302重定向技术...

  • asp.net下url传递中文的解决方案

    1.设置web.config文件。...传递中文之前,将要传递的中文参数进行编码,在接收时再进行解码。 >> 进行传递 string Name = ‘中文参数’; Response.Redirect(‘B.aspx?Name=’+Server.UrlEncode(Name)); 

  • c# 接收网络汉字乱码_C# asp.net页面通过URL参数传值中文乱码问题解决办法

    1.编码string state=Server.UrlEncode(stateName....Response.Redirect("aaa.aspx?state="+state+"");2.解码(aaa.aspx)string state= Server.UrlDecode(Request.QueryString["state"].ToString());是GB2312编码的,...

  • SpringMVC redirect中文乱码问题

    用spring redirect中文会乱码:如下示例 public String redirectTest(){ redirect:/payment/alipay?body="中文"; } 浏览器会出现 body=??中文乱码 解决方案 spring mvc 有自定义的org.springframework.ui.Model类...

  • 如何用Response.Redirect方法传递汉字

    使用Response.Redirect方法传递汉字,有时会发现所传递的值和接收到的内容不符,接受的值丢失了几个字或者变成了一堆乱码.那么如何才能保证所传递的汉字被正确接收呢? 页面A传递值的代码如下: string Message=Server...

  • html传递汉字参数转换,url中如何传递中文信息呢?

    摘要:下文讲述url中传递中文的几种方法分享,如下所示;我们都知道,url中传递中文会乱码,那么我们如何避免这种情况发生呢?通过查阅资料,我得知,在url传递时,需对其进行中文编码,才能避免url传递中文乱码的...

  • 对url里面的中文进行编码

    对url进行中文编码 有时候需要访问一些带有中文字符的网站,但是如果直接重定向的话会导致中文在浏览器的地址栏显示为???? 此时使用正则表达式找出所有的中文字符,然后使用urlEncoder进行编码,然后拼接处最后...

Global site tag (gtag.js) - Google Analytics