这里集合的这组 HTML5 & CSS3 效果,有的是网站开发中常用的、实用的功能,有的是先进的 Web 技术的应用演示。不管哪一种,这些案例中的技术都值得我们去探究和学习。

1、超炫的 HTML5 粒子效果进度条

我喜欢粒子效果作品,特别是那些能够应用于实际的,例如这个由 Jack Rugile 基于 HTML5Cavnas 编写的进度条效果。看着这么炫的 Loading 效果,即使让我多等一会也无妨:)

在线演示

源码下载

2、使用 CSS3 打造一组质感细腻丝滑的按钮

CSS3 引入了众多供功能强大的新特性,让设计和开发人员能够轻松的创作出各种精美的界面效果。下面这些发出闪亮光泽的按钮,很漂亮吧?把鼠标悬停在按钮上,还有动感的光泽移动效果。

在线演示

源码下载

3、纯 CSS 绘制《辛普森一家》人物头像

一组纯CSS绘制的《辛普森一家》人物头像。《辛普森一家》(The Simpsons)是马特·格勒宁为美国福克斯广播公司创作的一部动画情景喜剧。

在线演示

源码下载

4、CSS & jQuery 制作一款漂亮的多彩时钟

大家可能见过各种各样的时钟效果,比如多年前非常流行的 Flash 制作的各种新奇的动画时钟,现在的 Web开发者们又开始应用 CSS3 和 Canvas 等最新技术来实现。

在线演示

源码下载

5、傻眼了!竟然有如此逼真的雨滴效果

Rainyday.js 是一个轻量的 JavaScript库,利用 HTML5 Canvas 实现雨滴下落在玻璃表面的动画效果。Rainyday.js尽可能的模拟现实的雨滴效果,几乎可以以假乱真了。

在线演示

源码下载

6、HTML5 Canvas 模拟可撕裂布料效果

这是一个模拟可撕裂布料效果的 HTML5 Canvas 应用演示,效果逼真。你会看到,借助 Canvas的强大绘图和动画功能,只需很少的代码就能实现让您屏息凝神的效果。

在线演示

源码下载

7、SVG 实现一个漂亮的页面预加载效果

展示如何使用 CSS 动画, SVG 和 JavaScript创建一个简单的页面预加载效果。对于网站来说,这些预载入得画面提供了一种创造性的方法,使用户在等待内容加载的时候不会那么无聊。

在线演示

源码下载

结合 CSS3 & Canvas 模拟人行走的效果

HTML5 和 CSS3 技术给 Web 带来了新的利器,点燃了Web开发人员的激情。所谓只有想不到,没有做不到,的确如此。下面给大家分享一个结合 CSS3 & Canvas 模拟人行走的动画效果。

在线演示

源码下载

8、HTML5 高仿逼真 3D 布料图案效果

HTML5 规范引进了很多新特性,其中最令人期待的之一就是 Canvas 元素,HTML5 Canvas 提供了通过JavaScript绘制图形的方法,非常强大。下面给大家分享一个 HTML5 Canvas 绘制的 3D 布料图案效果。

在线演示

源码下载

9、带有 CSS3 闪亮特效的缩略图相册

ShineTime 是一个效果非常精致的缩略图相册,鼠标悬停到缩略图的时候有很炫的闪光效果,基于CSS3实现,另外缩略图也会有立体移动的效果。

在线演示

源码下载

10、实现超炫的 Loading(加载)动画效果

SpinKit 是一套网页动画效果,包含8种基于 CSS3实现的很炫的加载动画。借助 CSS3 Animation 的强大功能来创建平滑,易于定制的动画。

在线演示

源码下载

本文固定链接: http://www.i7758.com/archives/1567.html

10款让你心动的 HTML5 & CSS3 效果的更多相关文章

  1. 让你心动的 HTML5 & CSS3 效果【附源码下载】

    这里集合的这组 HTML5 & CSS3 效果,有的是网站开发中常用的.实用的功能,有的是先进的 Web 技术的应用演示.不管哪一种,这些案例中的技术都值得我们去探究和学习. 超炫的 HTML ...

  2. 分享10款激发灵感的最新HTML5/CSS3应用

    1.HTML5/CSS3实现iOS Path菜单 菜单动画很酷 Path菜单相信大家都不陌生吧,它在iOS中非常流行,今天我们要分享的菜单就是利用HTML5和CSS3技术来模拟实现这款iOS Path ...

  3. 10 款提高开发效率的 jQuery/CSS3 组件

    前端开发是一项十分繁琐而又耗体力的工作,如何更有效率的开发我们的应用,很多人会选择适当地使用一些jQuery插件.今天就要给大家分享10款可以提高开发效率的jQuery/CSS3组件.部分插件可以下载 ...

  4. 8款最受欢迎的HTML5/CSS3应用及源码

    新的一周开始,小编也将继续为大家分享精彩的HTML5应用,还有CSS3和jQuery方面的东西.今天给大家带来的是8款最受欢迎的HTML5/CSS3应用及代码,一起来看看吧. 1.基于HTML5 Ca ...

  5. 9款极具创意的HTML5/CSS3进度条动画(免积分下载)

    尊重原创,原文地址:http://www.cnblogs.com/html5tricks/p/3622918.html 免积分打包下载地址:http://download.csdn.net/detai ...

  6. 9款极具创意的HTML5/CSS3进度条动画

    今天我们要分享9款极具创意的HTML5/CSS3进度条动画,这些进度条也许可以帮你增强用户交互和提高用户体验,喜欢的朋友就收藏了吧. 1.HTML5/CSS3图片加载进度条 可切换多主题 今天要分享的 ...

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

    作为一个前沿的 Web 开发者,对于 HTML5 和 CSS3 技术或多或少都有掌握.前几年这些新技术刚萌芽的时候,开发者们已经使用它们来小试牛刀了,如今这些先进技术已经遍地开发,特别是在移动端大显身 ...

  8. 12款非常精致的免费 HTML5 & CSS3 网站模板

    01. Joefrey Mahusay 很炫的单页网站模板,基于 HTML5 & CSS3 制作,适合用于设计师个人简历.摄影师和平面设计师的个人作品展示. 演示  下载 02. Folder ...

  9. 10款让人惊叹的HTML5/jQuery图片动画特效

    1.HTML5相册照片浏览器 可连接Flickr照片服务 以前我们经常会分享一些jQuery相册浏览插件,效果不错,实用性也很强.不过如果能利用HTML5来实现相册浏览器,那么相册浏览效果肯定会更加炫 ...

随机推荐

  1. SQL Server复制入门(一)----复制简介【转】

    SQL Server复制入门(一)----复制简介 简介 SQL Server中的复制(Replication)是SQL Server高可用性的核心功能之一,在我看来,复制指的并不仅仅是一项技术,而是 ...

  2. iOS开发——多线程OC篇&多线程详解

    多线程详解 前面介绍了多线程的各种方式及其使用,这里补一点关于多线程的概念及相关技巧与使用,相信前面不懂的地方看了这里之后你就对多线程基本上没有什么问题了! 1——首先ios开发多线程中必须了解的概念 ...

  3. 【UML】具体解释六种关系

    UML中包括六中关系.各自是:关联(Association).聚合(Aggregation).组合(Composition).泛化(Generalization).依赖(Dependency).实现( ...

  4. javascript实现单例模式

    1.简单实现单例模式: var singleTon = function(){ var _pria = 'private value'; var show_pria = function(){ con ...

  5. MySQL高可用之MHA的搭建 转

     http://www.cnblogs.com/muhu/p/4045780.html http://www.cnblogs.com/gomysql/p/3675429.html http://www ...

  6. 适用于各浏览器支持图片预览,无刷新异步上传js插件

    文件上传无疑是web应用中一个非常常用的功能,不管是PHP.jsp还是aspx.mvc等都会需要文件上传,但是众所周知当使用自带的文件上传功能时总会出现页面刷新的情况.当然现在有了html5这个好东西 ...

  7. 微信js接口自定义分享内容

    最近客户有个要求,需要给网页添加微信分享功能,当然指的是用微信自带浏览器的时候,希望用户在最后一页点击分享的时候是分享的首页.曾经无意中看到过微信公众开发者平台提供了js接口,所以试着做了做,果然,跌 ...

  8. git 修改commit信息

    可以使用 git commit --amend 修改上一次的提交信息. 操作示例 如下: git commit --amend 后会出现编辑界面,如下 可以在最上面红框的地方,修改要提交的信息,然后按 ...

  9. 小白日记47:kali渗透测试之Web渗透-XSS(一)

    XSS [推荐书籍:XSS跨站脚本攻击剖析与防御] xss表示Cross Site Scripting(跨站脚本攻击),它与SQL注入攻击类似,SQL注入攻击中以SQL语句作为用户输入,从而达到查询/ ...

  10. ScrollView嵌套ListView的滑动冲突问题,是看大神的方法的,作为学习以后用的到

    在工作中,曾多次碰到ScrollView嵌套ListView的问题,网上的解决方法有很多种,但是杂而不全.我试过很多种方法,它们各有利弊. 在这里我将会从使用ScrollView嵌套ListView结 ...