8款强大的CSS3/HTML5动画及应用源码

jopen 10年前

        不得不说,HTML5 的时代已经渐渐来临了,很多网页上也都越来越多的应用 HTML5,虽然基于目前浏览器的支持情况 HTML5 还未能在 PC 端普及,但是未来 HTML5 还是看好的。今天我们来分享 8 款强大的 CSS3/HTML5 动画及应用,请用支持 CSS3 的浏览器查看。

        1、CSS3 jQuery UI 控制滑杆插件

        今天我们要来分享一款基于 CSS3 和 jQuery UI 的控制滑杆插件,这款控制滑杆是在 HTML5 滑杆元素的基础上进行自定义 CSS3 渲染,所以外观更加漂亮。另外,这款控制滑杆插件是纵向的,当然你也可以通过设置让它水平放置。

8款强大的CSS3/HTML5动画及应用源码

        在线演示        源码下载

        2、HTML5 版切水果游戏 HTML5 游戏极品

        这是一款由百度 JS 小组提供的 HTML5 版切水果游戏,记得切水果游戏当年非常火,今天我找到了一款基于 HTML5 实现的网页版切水果游戏。虽然和原版的切水果游戏相比功能不怎么完善,但是该 HTML5 切水果游戏也算有声有色,画面也十分华丽。

8款强大的CSS3/HTML5动画及应用源码

        在线演示         源码下载

        3、纯 CSS3 实现 iOS 7 扁平化图标

        说实话一开始我并不喜欢 iOS 7 那种扁平化的风格,更加觉得 iOS 7 的那些图标非常烂。但是现在看习惯了 iOS 7 的图标,还是挺清新的。今天我们要用纯 CSS3 来实现 iOS 7 扁平化的图标,没有使用图片,纯 CSS3 绘制而成,工程量是浩大了点,不过相仿度还是挺高的哈。

8款强大的CSS3/HTML5动画及应用源码

        在线演示        源码下载

        4、基于 Bootstrap 的 CSS3 登录表单

        这是一款基于 Bootstrap 的 CSS3 登录表单,Bootstrap 是 推ter 推出的一个用于前端开发的开源工具包。这款 CSS3 登录表单正是利用了 Bootstrap 来实现漂亮的表单 UI,视觉效果非常不错。另外,表单的输入框左侧还有迷人的小图标衬托。

8款强大的CSS3/HTML5动画及应用源码

        在线演示        源码下载

        5、HTML5 迷你音乐播放器 3D 翻转播放按钮

        上一篇我们分享了一款外观很酷的 HTML5 音乐播放器,这次分享的播放器比较小巧迷你,虽然外观没有上一个播放器那么精致,但是功能却是很齐全的。该 HTML5 音乐播放器的特点是有一个 3D 的翻转播放按钮。当然对于 HTML5 播放器的外观,大家可以自己设计定义。

8款强大的CSS3/HTML5动画及应用源码

        在线演示        源码下载

        6、HTML5 播放器神话卡带式古典播放器

        这是一款样式非常古典,但又是非常时尚的 HTML5 播放器,说它是古典播放器,是因为这种卡带式的 HTML5 播放器比较古老,说它时尚,是因为现在的 HTML5 播放器很少有这种样式的,非常有创意。如果你想给你的个人主要添加一款个性化的播放器,那么这款 HTML5 卡带式古典播放器可以选择一下,个人认为这是 HTML5 播放器的神话,非常经典。

8款强大的CSS3/HTML5动画及应用源码

        在线演示        源码下载

        7、HTML5/SVG 线性图表可绘制图表区域颜色

        今天要分享的这款 HTML5 图表应用是一款线性图表,它主要是有 SVG 构造出来的,这款 SVG 线性图表可以用不同的颜色绘制出图表的数据区域。

8款强大的CSS3/HTML5动画及应用源码

        在线演示        源码下载

        8、CSS3 个性化注册表单

        这次我们要来分享一款基于 CSS3 的个性化注册表单,说它个性化,从这几个方面可以看出来,首先,注册表单的性别选择框很特别,是一个滑块应用,其次是输入框,利用 CSS 样式输入框只有一条水平下滑横线,最后,注册表单从整体外观上来看非常清新自然,也很简单。

8款强大的CSS3/HTML5动画及应用源码

        在线演示        源码下载

        以上就是 8 款强大的 CSS3/HTML5 动画及应用源码,欢迎收藏分享。

        原文链接:http://www.html5tricks.com/8-html5-css3-animation-apps.html

        本文作者:html5tricks – 超人