分类目录归档:资讯

12个炫酷实用的HTML5带发光动画

在网页设计中,很多元素都可以实现发光的动画效果,比如输入框、文字、进度条等等。这些简单的元素加上炫酷的发光动画就会让整个页面戴上一层绚丽的色彩。今天我们就要为大家分享12款炫酷实用的HTML5带发光动画,这里的很多应用都是可以在不少项目中使用,可以为你节省很多前端开发时间。

1、纯CSS3实现超炫酷的萤火虫动画

今天要为大家带来一款很有意思的纯CSS3动画,这次我们要利用CSS3的一些动画属性来绘制一只闪闪发光的萤火虫,和之前分享的纯CSS3蚱蜢纯CSS3打火机类似,这只萤火虫也是用CSS3绘制,并且点击萤火虫可以关闭和打开它的翅膀,同时萤火虫的闪闪发光也可以控制。

css3-firefly

在线演示   源码下载

2、HTML5 Canvas五彩缤纷的3D发光水晶球动画

这是一款基于HTML5 Canvas的超绚丽发光水晶球动画,就像是酒吧里的那种水晶球射灯一样,不停地随机变换射出光线的颜色,给人一种非常动感的视觉效果。整个水晶球是在Canvas画布上绘制而成,利用CSS3的相关特性使其能够出现五彩缤纷的发光动画,而且可以通过鼠标滚轮来放大缩小这个水晶球,不得不说HTML5真的是非常强[......]

阅读全文>>

11款几近完美的CSS3进度条插件

进度条在网页中的使用非常广泛,特别是现在基于jQuery和CSS3技术实现的进度条插件,外观上都非常完美,很多甚至都相当炫酷。这次我们来总结一些个人认为几近完美的CSS3进度条插件,这些都是以前我们分享过的,希望通过这次总结可以让更多的人了解和使用这些超有用的CSS3进度条。

1、jQuery五彩火焰背景的3D进度条插件

基于jQuery和CSS3的进度条插件五花八门,非常繁多,我们之前也介绍过一些,像超富创意的CSS3飞机跑道进度条动画在外观上就非常有创意,像CSS3发光进度条动还可以自定义控制进度条的百分比。今天我们再要介绍另外一款基于jQuery的五彩火焰背景3D进度条插件,它的背景就像燃烧的火焰一样,而且也有多种颜色选择,进度条整体看上去有3D立体的视觉效果。

jquery-sparkle-3d-progressbar

在线演示   源码下载

2、CSS3发光进度条动画 超炫酷的样式

这次我们要来分享一款非常炫酷的CSS3进度条动画,其样式风格类似于星球大战里面的那些激光剑效果。页面初始化时,可以设定进度条的值,但是我们也可以利用其配套的借口来动态改变进度条的值,使用起来比较方便。另外以前介绍过一款CSS3 3D进[......]

阅读全文>>

15个超强的jQuery/HTML5图片轮播插件

最近我们为大家分享过不少基于jQuery的图片轮播插件,当然也有很多使用了HTML5和CSS3的相关技术,让整个图片播放器显得更加美观,动画效果显得更加炫酷。这次我们特意为大家筛选了一些最新的jQuery/HTML5图片轮播插件,每一个的功能都比较强大,当然可能不是每一个都适合你,但你也可以从中学到不少用jQuery和HTML5编写图片轮播插件的知识。下面我们一起来看看这15个强大的图片播放器吧。

1、jQuery SVG左右弹性切换全屏焦点图动画

这款焦点图插件的特点有2个,一个是焦点图整体以全屏的方式呈现,显得非常大气,而且图片四周也有3D阴影,立体视觉效果非常独特。第二是焦点图在图片切换的时候以弹性淡入淡出的动画方式,显得相当时尚。动画采用SVG相关特性,扩展十分灵活。

jquery-svg-image-slider

在线演示   源码下载

2、超实用的jQuery淡入淡出焦点图插件 带3D相框

这是一款基于jQuery和CSS3的焦点图插件,这款焦点图的设计非常简单,仅仅是自动播放一系列相片,相片在切换的时候带有淡入淡出的动画特效,使用起来也十分方便。另外一个特点是,这款jQuery焦点图插件的相片外框[......]

阅读全文>>

8个超震撼的HTML5和纯CSS3动画源码

HTML5和CSS3之所以强大,不仅因为现在大量的浏览器的支持,更是因为它们已经越来越能满足现代开发的需要。Flash在几年之后肯定会消亡,那么HTML5和CSS3将会替代Flash。今天我们要给大家分享8个最新的HTML5和纯CSS3动画及其源码,这些动画非常让人震撼,你也可以学习一下HTML5源码。

1、HTML5 Canvas水波纹动画特效

HTML5的Canvas特性非常实用,我们不仅可以在Canvas画布上绘制各种图形,也可以制作绚丽的动画,比如这次介绍的水波纹动画特效。以前我们也分享过一款基于HTML5 WebGL的水波荡漾动画,让人惊叹不已,这次分享的HTML5 Canvas水波纹动画同样非常震撼人心。

html5-canvas-water-ripples

在线演示  源码下载

2、HTML5 Canvas人物四肢模拟及身体碰撞动画

前几天我们刚刚为大家分享过一款基于HTML5的人物四肢关节伸展模拟动画,它可以模拟人物的头部、四肢伸展情况,相当逼真。今天要介绍的这款HTML5 Canvas动画在原来四肢模拟的基础上,添加了身体碰撞模拟的动画特效,我们用鼠标模拟一个大铁球,移动鼠标后将大铁球撞击人物的身体[......]

阅读全文>>

8个精美的jQuery相册插件赏析

在网页中,相册应用十分常见,如果你经常逛一些社交网站,那么你应该会注意到很多各式各样的网页相册应用。今天我们要来分享一些最新收集的jQuery相册插件,这些精美的jQuery相册插件可以帮助你快速搭建自己的相册浏览系统,对那些JS功底不怎么好的同学应该会有不少帮助。

1、jQuery幻灯片播放器插件 可自动播放图片

之前我们分享过很多炫酷和实用的jQuery焦点图插件,比如jQuery仿Flash横向切换焦点图插件。今天我们要再介绍一个jQuery幻灯片播放器插件,它的功能很齐全,不仅可以手动切换图片,而且可以开启和关闭自动播放图片功能。另外,还可以展开缩略图列表迅速预览所有图片。

jquery-auto-image-player

在线演示        源码下载

2、HTML5/CSS3图片左右切换弹性动画

这是一款很有特点的HTML5图片切换动画,点击左右按钮即可将图片进行弹性切换,图片在被切换时,都会产生一定的弹性缓冲动画效果。这款HTML5图片应用非常适合在产品宣传页面上使用,看上起十分大气。

html5-css3-elasticity

在线演示        源码下载

3、HTML5 3D相册浏览 震撼人心

前几天我刚刚分享过一[......]

阅读全文>>

炫酷实用的10个HTML5动画应用

本文将一起来总结一下最近分享收藏的HTML5动画应用,其中有些利用了jQuery和CSS3技术,内容涵盖焦点图、菜单导航、纯CSS3动画、文字特效、CSS3进度条等,希望对大家有所帮助。

1、超炫酷的CSS3进度条动画 背景色渐变

这次要给大家分享的是一款效果很酷的CSS3进度条动画应用,之前也有介绍过不少jQuery/CSS3/HTML5的进度条插件,比如HTML5 Canvas彩色像素进度条动画jQuery动画进度条 实时显示进度百分比等。今天介绍的这款CSS3进度条的背景色是渐变的,非常具有立体的视觉效果,并且进度在滚动时可以实时显示当前进度百分比。

css3-progress-bar-linear-color

在线演示        源码下载

2、超酷的jQuery跟随鼠标气泡动画

这次我们要给大家介绍一个超酷的jQuery动画特效,当你移动或者点击鼠标时,鼠标周围即会出现许多大小不一的气泡,并且这些气泡跟随鼠标一起滑动,气泡模拟非常真实,一段时间内气泡就会逐渐破灭。另外,你也可以通过鼠标右键来控制背景图案以及选择是否开启气泡动画。

jquery-bubble-animation

在线演示        源码下载

3、纯CSS3浮雕质感的立体文字[......]

阅读全文>>

纯CSS3动画系列精选(一)

今天开始我们要陆续为大家整理一些纯CSS3实现的动画特效,这里的大部分案例都是用CSS3实现,很少使用JavaScript。特别是在网页中绘制一些人物、动物等,CSS3还是绰绰有余的,你缺少的只是想像力,本文及接下来的系列文章将带你领略CSS3的无限风采。

1、CSS3按钮发光动画

今天分享一款基于纯CSS3的发光按钮,多种色彩的按钮排列在网页上,伴随着闪闪发光的效果,CSS3的强大肯定会让你叹为观止。该CSS3按钮发光动画主要是利用了webkit的动画属性,让各种颜色规律性的发生变化。也许这么绚丽的CSS3按钮应用不那么广泛,但是在一些需要特效的网页中用来做提交表单按钮或者菜单项,那就非常方便了。

css3-shine-buttons

在线演示        源码下载

2、纯CSS3发光登录表单

我们见过很多CSS3表单,制作都非常精美,今天介绍的这款CSS3表单不但外观华丽,而且伴有颜色发光动画。当鼠标激活表单时,表单周围就会出现颜色渐变的发光动画,配合黑色的背景,整个CSS3表单显得格外亮丽。更重要的是,这个CSS3发光表单基本用CSS3实现,很少的JS代码,在CSS3引擎上优化非常明显。[......]

阅读全文>>

超赞!8个jQuery焦点图动画赏析

jQuery焦点图插件的应用非常广泛,插件类型也很多,特别是图片切换的动画效果有简单的,也有超级炫酷的,有些甚至还有3D的动画特效。本文要分享一些效果超赞的jQuery焦点图动画插件,这些插件也许可以在你平时的工作中起到一定的协助作用。

1、宽屏可左右切换的jQuery焦点图插件

今天要继续为大家分享一款很不错的jQuery焦点图插件,它是宽屏展示的,而且有两个大气的按钮用来左右切换图片。

jquery-full-image-slider-switch

在线演示        源码下载

2、jQuery自动轮播图片焦点图插件

今天我们要继续来分享一款非常实用的jQuery焦点图插件,和其他的jQuery焦点图插件一样,它同样支持多张图片的任意跳转切换,同时,焦点图切换方式是水平的,而且相当流畅,因为这款jQuery焦点图实现很简单。

jquery-auto-image-slider

在线演示        源码下载

3、支持鼠标拖拽滑动的jQuery焦点图

记得之前我们分享过一款jQuery全屏广告图片焦点图,图片切换效果还不错。今天我们要分享另外一款jQuery焦点图插件,它的特点是支持鼠标拖拽滑动,所以在移动设备上使用更加方便,你只要用手指滑动屏幕即可切[......]

阅读全文>>

分享8个超酷的HTML5相册动画应用

HTML5、CSS3和jQuery这3大前端开发技术已经越来越成熟,而且这三者的紧密结合使得开发者可以有越来越丰富的想象空间。今天我们要来分享一些非常炫酷的HTML5相册动画应用,这些应用同时也结合了CSS3和jQuery,特别是第一个,非常具有创意,一起来看看吧。

1、HTML5 3D立体美女墙相册

HTML5非常强大,尤其是和CSS3结合,有时候能达到非同凡响的网页动画效果。今天要分享的这款HTML5应用就是一款很酷的3D立体图片相册应用,它可以用鼠标多拽从多个角度浏览相册图片,点击图片,就可以放大图片,相册图片都是美女,千万别让女朋友看到。

html5-3d-image-gallery

在线演示        源码下载

2、jQuery/HTML5响应式焦点图动画应用

之前我们分享过不少基于jQuery和HTML5的焦点图动画了,比如这里10款精美实用的jQuery焦点图动画推荐就有不少收集的jQuery焦点图插件,效果非常棒。今天要继续为大家介绍一款jQuery/HTML5响应式焦点图动画插件,它的响应式特性可以让焦点图在移动设备上也有不错的效果。

jquery-html5-responsive-slider

在线演示        源码下载

3[......]

阅读全文>>

10个HTML5美化版复选框和单选框

单选框Radiobox和复选框checkbox在网页中也十分常见,虽然它没有按钮的交互性强,但是如果能把它们像按钮那样美化一下,那也是非常不错的。本文收集了10个相对比较漂亮的美化版单选框和复选框,希望你会喜欢。

1、CSS3漂亮的自定义checkbox复选框 9款迷人样式

之前我们分享过一款非常不错的CSS3自定义checkbox复选框纯CSS3美化Checkbox和Radiobox按钮,外观非常时尚。今天我们来分享一款9款样式迷人的CSS3漂亮的自定义checkbox复选框。这几款复选框样式很丰富,使用起来也比较方便。

html5-css3-checkbox-styles

在线演示        源码下载

2、CSS3自定义发光radiobox单选框

之前我们分享过一些CSS3和HTML5实现的自定义checkbox和Radiobox,比如纯CSS3美化Checkbox和Radiobox按钮,不仅外观唯美,而且Radiobox选中时还有动画效果。今天我们要来分享一款CSS3实现的自定义发光radiobox单选框插件,该radiobox选中时也有滑块的动画特效。

css3-shine-radiobox

在线演示        源码下载

3[......]

阅读全文>>