返回 登录
0

分享10款优雅动人的HTML5教程及源码

今天我们要来分享10款优雅动人的HTML5教程及源码,这些HTML5教程都是我们这几天收集过来的,经过我们的挑选,希望能给大家带来帮助。

1、HTML5/CSS3仿Facebook登录表单

利用CSS3制作的登录表单的确很漂亮,我们在html5tricks网站上也分享过几款了,比如CSS3密码强度验证表单可以显示密码的强度,这款纯CSS3发光登录表单更是绚丽多彩。今天我们要分享一款仿Facebook的登录表单,无论从外观还是功能上说,这款登录表单还是挺接近Facebook登录表单的。

html5-css3-facebook-login-form

在线演示 / 源码下载

2、HTML5/CSS3超酷进度条 不同进度多种颜色

这是一款线条状的CSS3进度条,这款进度条有两个特点:一是随着进度条的进度更新,都会有数字百分比实时显示,让数据更加直观;二是在不同的进度阶段,进度条的颜色会有所变化,这样能更好的反应当前的进度状态。加上黑色的背景,让这款CSS3进度条更加鲜亮起来。

css3-progress-bar-line

在线演示 / 源码下载

3、CSS3 3D发光切换按钮 模拟效果很逼真

刚刚我们发布过一款CSS3开关切换滑动按钮,应该说出了有点3D立体的效果外,其他都很普通。现在我们要来分享一款更酷的CSS3开关切换按钮,它不仅具有3D的效果,而且可以发光,当开关处于打开状态时,旁边的小灯就会亮起来,然后灯光投射到开关上,效果挺逼真的。

css3-shine-switch-button

在线演示 / 源码下载

4、CSS3/SVG质感背景小图标 镂空效果图标按钮

之前我们分享过很多利用CSS3制作的图标小按钮,比如一些分享按钮,如纯CSS3社会化分享按钮,还有一些带小图标的CSS3菜单,如HTML5/CSS3滑块动画菜单 图标动画很酷。今天我们来分享一款用CSS3和SVG实现的质感背景小图标,鼠标滑过图标时出现镂空的效果,并且有质感背景的描边,效果非常不错。

svg-icons-with-patterns

在线演示 / 源码下载

5、纯CSS3实现美国金门大桥 霸气十足

金门大桥位于美国加利福尼亚州旧金山,看起来这座大桥非常宏伟大气。今天我们要用纯CSS3来绘制金门大桥,线条的勾勒非常逼真,个人认为除了颜色没有照片真实外,大桥的外形已经非常接近真实的金门大桥,CSS3真实霸气啊。

pure-css3-bridge

在线演示 / 源码下载

6、HTML5/CSS3弹出提示框 内置功能按钮

之前我们分享过一款很不错的自定义提示框插件CSS3带图标提示插件 多主题颜色,今天我们再分享一款多功能的HTML5/CSS3弹出提示框。和上一款提示框一样,带有小图标,而且可以关闭提示框。不同的是,这款CSS3提示框功能更加完善,可以内置一些功能按钮,比如“确定”和“取消”。

html5-css3-notification

在线演示 / 源码下载

7、HTML5线性图表 图表数据区域可着色

利用HTML5制作图表插件也比较常见,我们也收集过几款很实用的HTML5图表插件,它们确实可以帮助我们在网页上直观地展示数据。今天我们要再来分享一款实用的HTML5线性图表插件,这款线性图表可以在不同的数据区域内绘制不同的颜色,让每一个数据区域都非常明显可见。

html5-line-chart

在线演示 / 源码下载

8、HTML5柱状图表 可合并多张图表的数据

之前我们分享过好几款不错的HTML5柱状图表了,像这款HTML5/CSS3水平柱状图表,非常简单实用的图表。今天我们要再来分享一款HTML5柱状图表,这款图表插件可以将多张图表的数据合并成一张图表显示,在图表数据合并过程中产生融入的动画,挺不错的。

html5-bar-chart-d3

在线演示 / 源码下载

9、HTML5/CSS3提示框Tooltip动画

之前我们已经分享过一款HTML5/CSS3分步提示框Tooltip ,不过这款提示框主要是用来分步操作提示的,不是真正的Tooltip。今天我们要分享一款利用CSS3实现的提示框Tooltip动画。当鼠标移到图标按钮上时,就会在按钮正上方弹出一个Tooltip提示框,并且伴有淡入淡出的效果。

css3-icon-tooltip

在线演示 / 源码下载

10、HTML5/CSS3图片分割遮罩滑块动画

之前我们推荐过一款HTML5/CSS3原图对比查看特效 HTML5图片特效,效果非常酷。今天我们再来分享一款类似的HTML5应用,图片上有另外一张图片作为遮罩,滑动鼠标即可移动遮罩,将部分原图显示出来,效果没有上一款好,不过参考学习可以。

html5-css3-image-slider-divide

在线演示 / 源码下载

以上就是10款优雅动人的HTML5教程及源码,欢迎收藏分享。

评论