jQuery滑块动画菜单 点击带发光动画

之前我们分享过很多功能和外观都不同的jQuery菜单和CSS3菜单,比如最近介绍的个性化jQuery/CSS3气泡圆形菜单,也比如以前分享的CSS3 3D动画菜单 4种颜色主题也非常不错。今天要分享的是一款基于jQuery的滑块动画菜单,点击菜单项时下面会有一个线条随之滑动,并且菜单项会出现发光的动画特效。

jquery-slider-menu-shining

在线演示源码下载

jQuery模拟iPhone X的Notch下拉滚动条菜单

iPhone X刚发布不久,今天我们要分享一个基于jQuery的Notch下拉滚动菜单,当我们滚动鼠标滚轮时,菜单也随机会跟着上下滚动,与一般滚动条不同的是,每次菜单滚动时,菜单内容会自动缩进,就像是流体从突出的墙面流过一样,效果非常不错。

jquery-iphone-x-notch

在线演示源码下载

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

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

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

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

css3-firefly

在线演示   源码下载

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

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

阅读全文>>

简易实用的jQuery自动播放焦点图插件

这次我们要为大家分享一款很实用的jQuery焦点图插件,它并没有非常华丽的切换动画,仅仅是简单的左右滑入滑出动画。也正是它的简单,这款jQuery焦点图插件的使用也就非常方便,我们只需要引入脚步库后进行简单的设置即可集成到你的网页中去了。

jquery-easy-auto-image-player

在线演示源码下载

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

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

html5-canvas-crystal-ball

在线演示源码下载

可自定义色块的JavaScript颜色选择器

这是一款基于JavaScript的颜色选择器插件,对于颜色选择器来说,这款插件的功能已经十分完善,我们不仅可以从色谱中选取任意的颜色,而且还可以从自定义色块中快速选取常用的颜色。同时这款颜色选择器还可以输入十六进制值来定位对应的颜色,非常实用。

js-wheel-colorpicker

在线演示源码下载

HTML5 SVG实现老爷爷拄拐杖行走动画

这是一款基于HTML5和SVG的人物行走动画,图中使用SVG绘制出了一个拄着拐杖的老爷爷,描绘的活灵活现,可见目前SVG对绘图方面支持得也十分完美。另外我们又使用HTML5技术让这个老爷爷能够拄着拐杖一步步行走,这和之前我们分享的CSS3人物行走动画非常类似,怎么样,是不是很酷?

html5-svg-old-man-walking

在线演示源码下载

jQuery/CSS3多种鼠标滑过动画按钮集合

这是一款比较实用而且美观的CSS3按钮组合,它的特点是按钮上实现了多种鼠标滑过的动画特效,比如上下左右滑块动画、百叶窗动画等。而且这款按钮的这些动画实现均采用CSS3,jQuery仅仅在鼠标滑过事件处理上起到一定作用。

css3-hover-animation-button

在线演示源码下载

jQuery实现的二进制数字时钟 一个烧脑的时钟

今天要来分享一款让你脑洞大开的jQuery时钟插件,它的时分秒都是用二进制来表示,绿色表示该位值是1,灰色则表示0。其实实现原理也是很简单,无非是将时钟的时分秒分别实时转换成二进制,然后随着本地时间的更新而实时刷新。试想如果家里的时钟用这样的二进制表示,会不会很烧脑?

jquery-binary-clock

在线演示源码下载

HTML5 Canvas酷似冰山的3D柱状图表

今天我们要为大家分享一个外观很不一样的HTML5柱状图表应用,它的外观就像一座座冰山矗立在海面上,通过海面的高低来表示柱形图数据的高低,非常形象和直观。同时我们还利用HTML5 Canvas技术模拟海面波浪起伏的动画特效,也可以同时展示多组数据。

html5-canvas-iceberg-chart

在线演示源码下载