Rumah > hujung hadapan web > html tutorial > 10款基于HTML5+CSS3实现的超酷源码动画_html/css_WEB-ITnose

10款基于HTML5+CSS3实现的超酷源码动画_html/css_WEB-ITnose

WBOY
Lepaskan: 2016-06-24 11:32:11
asal
1265 orang telah melayarinya

1.基于Bootstrap的jQuery登录表单

这是一款基于Bootstrap的登录表单,表单的外观自然不用说,沿用了Bootstrap的风格,非常漂亮。这款登录表单有一个经过CSS3处理过的头像图片,同时还有HTML5表单字段的简单验证,CSS3的使用,让整个登录表单的投影显得更加立体。

在线演示

源码下载

2.很酷的CSS3多窗口邮件阅读器

这是一款非常炫酷华丽的CSS3邮件阅读器界面,它的特点是你可以同时点开多个邮件,而不必跳转页面。当你阅读完后可以点击关闭按钮关闭当前邮件的窗口。对于这种交互式的窗口,之前也分享过一个CSS3聊天窗口,大家也可以关注一下。

在线演示

源码下载

3.jQuery图片抖动插件

这是一款简易的jQuery图片抖动动画,当我们将鼠标滑过图片时,图片会产生一系列抖动动画。还记得以前分享过一个更高级的图片抖动动画,可以有很多种抖动方式,可以参看jQuery/CSS3实现网页元素抖动特效这篇文章。

在线演示

源码下载

4.HTML5笑脸样式的音乐播放器 非常有爱

今天要来分享一款非常有爱的HTML5音乐播放器,它的外观酷似一张笑脸,其实笑脸的样式也是通过对播放器的各项按钮进行布局而产生的。同时这款播放器的功能也是比较完整的,播放、暂停、音量控制、播放进度等。

在线演示

源码下载

5.CSS3超酷弹出对话框 兼容移动端

这是一款基于HTML5和CSS3的弹出对话框,一共有4种类型,每种对话框弹出的时候均带有一定的动画特效,比如成功时候的动画和加载时候的动画,都非常不错,和之前分享的jQuery弹出层对话框 外观优雅带遮罩相比,虽然没有强大的回调功能,但是非常简单,更适合在移动端使用。

在线演示

源码下载

6.jQuery放大镜商品图片预览插件 支持相册浏览

还记得之前介绍的一款jQuery球状放大镜特效插件么,可以将很小的文字放大浏览。今天要分享的也是一款jQuery放大镜插件,可以应用在商品图片浏览上。鼠标滑过缩略图时,即可浏览大图的特定部分。这款插件最大的特点是支持图片相册浏览,是一款再好不过的商品图片浏览插件。

在线演示

源码下载

7.14款CSS3图片层叠切换动画

之前刚分享过一款jQuery层叠式翻页焦点图插件,非常不错。现在的这款CSS3图片层叠切换动画更加强大,拥有14种不同的图片切换动画,而且动画效果更加炫酷。这14种动画,每一种都有一点差异,你可以根据自己的需要来选择一种即可。

在线演示

源码下载

8.jQuery超级个性化的单线框和复选框

记得以前给大家分享过一些美化版的单选框和复选框,比如这款纯CSS3美化Checkbox和Radiobox按钮和CSS3自定义发光radiobox单选框。今天要分享的也是一个非常个性化的单选框和复选框插件,颜色你可以自己定义。

在线演示

源码下载

9.JavaScript鼠标跟随星星飘落动画

今天我们要来分享一款有趣的JavaScript动画,这种鼠标跟随动画应该也是很早就有的东西,特别是应用在一些个性化的个人博客中。这款JavaScript鼠标跟随动画是一些飘落的星星,星星的形状和颜色也是随机变化的,非常可爱。

在线演示

源码下载

10.HTML5/CSS3实现图片多种滤镜特效

这是一款基于HTML5和CSS3的图片滤镜特效应用,每一张图片应用不同的滤镜效果都会有不一样的视觉特效。另外,你也可以切换图片,特别是应用在相册应用中,你不仅可以浏览不同的图片,而且对同一张图片可以有多种特效。

在线演示

源码下载

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

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan