标签归档:HTML5资讯

7款超华丽的HTML5 Canvas文字动画特效

文字是网页中最为常见的元素之一,当然我们使用最多的就是调整文字的颜色、大小等基本属性。有时候我们在一些活动页面上需要展示特别样式的文字效果,这时候我们就可以利用HTML5或者CSS3结合的方式来渲染文字的动画特效。本文就总结了7款超华丽的HTML5 Canvas文字动画特效,可以让你的页面更加的活灵活现,充满梦幻的色彩。

1、HTML5 Canvas幻彩火焰文字特效

之前我们分享过很多基于HTML5 Canvas的火焰渲染动画特效,比如这款HTML5 Canvas炫酷的火焰风暴动画和这个HTML5动感的火焰燃烧动画特效。这次来分享一款很特别的HTML5文字特效,文字同时是利用火焰来渲染的,并且燃烧的文字火焰还可以随时改变颜色,让文字更显幻彩。

html5-canvas-colorful-text

在线演示   源码下载

2、超华丽CSS3 3D五彩发光文字动画

不久前我们已经为大家介绍过一些炫酷的CSS3文字动画和HTML5文字特效,有些都非常不错,比如最近刚分享的CSS3文字跳动旋转动画以及HTML5 Canvas幻彩火焰文字特效。这次我们要来看一款纯CSS3实现的3D五彩发光文字动画,文字呈现3D立体的视觉效果,[......]

阅读全文>>

18个超有趣的SVG绘制动画赏析

SVG作为时下比较新颖的技术标准,已经建立了很多基于SVG的前端项目。由于SVG在绘制路径上非常灵活,我们将很多网页上的元素使用SVG来绘制而成,有各种人物、小图标、小动画等等。今天我们收集了18个非常新奇有趣的SVG绘制动画,这些动画大部分都是使用SVG结合一定的CSS3特性实现而成,效果让人大为震撼,一起来看看吧。

1、HTML5 SVG实现会跳舞的花朵 4种跳舞心情

这又是一款很有趣的HTML5 SVG动画,它是一朵会跳舞的花。首先,花朵和花盆均采用SVG进行绘制,虽然是简单的线条以及单纯的颜色,但是绘制出的效果还是相当逼真的。接下来是给花朵进行跳舞动画的渲染,结合CSS3的动画属性以及JavaScript的动态渲染,让这朵花赋予了4种不同心情下的跳舞动画,点击按钮即可切换当前心情下的跳舞动画,真的是非常可爱。

html5-svg-dancing-flower

在线演示   源码下载

2、jQuery SVG高端圆形菜单导航

这是一款非常富有创意的jQuery菜单导航插件,菜单项的小图标是使用SVG路径绘制而成,简单实用。同时每一个菜单项排列成一个圆圈,菜单项切换时,中间的圆圈也会随着移动,而且中间的大圆圈[......]

阅读全文>>

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焦点图插件,它的特点是支持鼠标拖拽滑动,所以在移动设备上使用更加方便,你只要用手指滑动屏幕即可切[......]

阅读全文>>