不得不说,HTML5 的时代已经渐渐来临了,很多网页上也都越来越多的应用 HTML5,虽然基于目前浏览器的支持情况 HTML5 还未能在 PC 端普及,但是未来 HTML5 还是看好的。今天我们来分享 8 款强大的 CSS3/HTML5 动画及应用,请用支持 CSS3 的浏览器查看。
1、CSS3 jQuery UI 控制滑杆插件
今天我们要来分享一款基于 CSS3 和 jQuery UI 的控制滑杆插件,这款控制滑杆是在 HTML5 滑杆元素的基础上进行自定义 CSS3 渲染,所以外观更加漂亮。另外,这款控制滑杆插件是纵向的,当然你也可以通过设置让它水平放置。
在线演示 源码下载
2、HTML5 版切水果游戏 HTML5 游戏极品
这是一款由百度 JS 小组提供的 HTML5 版切水果游戏,记得切水果游戏当年非常火,今天我找到了一款基于 HTML5 实现的网页版切水果游戏。虽然和原版的切水果游戏相比功能不怎么完善,但是该 HTML5 切水果游戏也算有声有色,画面也十分华丽。
在线演示 源码下载
3、纯 CSS3 实现 iOS 7 扁平化图标
说实话一开始我并不喜欢 iOS 7 那种扁平化的风格,更加觉得 iOS 7 的那些图标非常烂。但是现在看习惯了 iOS 7 的图标,还是挺清新的。今天我们要用纯 CSS3 来实现 iOS 7 扁平化的图标,没有使用图片,纯 CSS3 绘制而成,工程量是浩大了点,不过相仿度还是挺高的哈。
在线演示 源码下载
4、基于 Bootstrap 的 CSS3 登录表单
这是一款基于 Bootstrap 的 CSS3 登录表单,Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。这款 CSS3 登录表单正是利用了 Bootstrap 来实现漂亮的表单 UI,视觉效果非常不错。另外,表单的输入框左侧还有迷人的小图标衬托。
在线演示 源码下载
5、HTML5 迷你音乐播放器 3D 翻转播放按钮
上一篇我们分享了一款外观很酷的 HTML5 音乐播放器,这次分享的播放器比较小巧迷你,虽然外观没有上一个播放器那么精致,但是功能却是很齐全的。该 HTML5 音乐播放器的特点是有一个 3D 的翻转播放按钮。当然对于 HTML5 播放器的外观,大家可以自己设计定义。
在线演示 源码下载
6、HTML5 播放器神话卡带式古典播放器
这是一款样式非常古典,但又是非常时尚的 HTML5 播放器,说它是古典播放器,是因为这种卡带式的 HTML5 播放器比较古老,说它时尚,是因为现在的 HTML5 播放器很少有这种样式的,非常有创意。如果你想给你的个人主要添加一款个性化的播放器,那么这款 HTML5 卡带式古典播放器可以选择一下,个人认为这是 HTML5 播放器的神话,非常经典。
在线演示 源码下载
7、HTML5/SVG 线性图表可绘制图表区域颜色
今天要分享的这款 HTML5 图表应用是一款线性图表,它主要是有 SVG 构造出来的,这款 SVG 线性图表可以用不同的颜色绘制出图表的数据区域。
在线演示 源码下载
8、CSS3 个性化注册表单
这次我们要来分享一款基于 CSS3 的个性化注册表单,说它个性化,从这几个方面可以看出来,首先,注册表单的性别选择框很特别,是一个滑块应用,其次是输入框,利用 CSS 样式输入框只有一条水平下滑横线,最后,注册表单从整体外观上来看非常清新自然,也很简单。
在线演示 源码下载
以上就是 8 款强大的 CSS3/HTML5 动画及应用源码,欢迎收藏分享。
原文链接:http://www.html5tricks.com/8-html5-css3-animation-apps.html
本文作者:html5tricks – 超人