jQuery/CSS3 3D旋转盒子动画 可自定义封面图片

在没有CSS3之前,我们只能在网页上实现2D平面动画,但是随着CSS3技术的普及,我们可以很方便的在网页上实现一个3D立方体。今天给大家带来的便是一个基于jQuery和CSS3的3D立方体盒子,我们可以通过鼠标拖拽浏览盒子的每一个面,另外,3D盒子的面都可以自定义封面图片,你可以为每一个面选择不同的图片,并还可以自定义盒子的尺寸大小。

jquery-css3-3d-image-box

在线演示源码下载

HTML5 Canvas弹性文字动画

HTML5中,Canvas上不仅可以绘制图形和动画,还可以实现各种炫酷的文字动画特效。之前分享过一篇文章7款超华丽的HTML5 Canvas文字动画特效,其中就有不少令人惊叹的HTML5文字特效。这次我们给大家分享的也是一款基于HTML5 Canvas的文字动画,这款文字动画是将文字悬挂在富有弹性的细线上,用鼠标拖动文字即可让其在各个方向弹动。

html5-canvas-elasticity-text

在线演示源码下载

CSS3卡片折叠样式3D文字标题特效

在网页上,文字是信息描述的主要手段,我们可以设置文字的字体、大小、颜色等基本属性 。CSS3标准的出现,可以让文字拥有更多的样式甚至是一些复杂的动画。今天我们要分享给大家的是一款基于CSS3的卡片折叠样式的文字特效,每一个字母之间像是折叠的卡片连接在一起一样,鼠标滑过后文字卡片也上下凹凸浮动,具有3D立体的视觉效果。

css3-card-fold-text-title

在线演示源码下载

Frappe Charts图表应用 不依赖第三方插件库

之前我们分享过很多基于jQuery和HTML5的图表插件,但是很多都是基于第三方的插件实现,比如依赖jQuery库等等,例如10款绚丽实用的HTML5图表动画应用。今天我们要为大家分享的这款Frappe Charts图表应用并没有依赖第三方的脚本库,但是Frappe Charts依然实现了非常实用的图表应用,包括折线图、饼图和柱形图等。不依赖第三方库的好处在于很多不需要使用的功能并不会包含进来,从而减少应用的大小。

frappe-charts

在线演示源码下载

JavaScript和CSS3色彩对比度可视化实现

如果你使用过类似PS的图形处理软件,应该不会对色彩对比度感到陌生,对比度指的是一幅图像中明暗区域最亮的白和最暗的黑之间不同亮度层级的测量。今天我们用JavaScript和CSS3来实现色彩对比度。首先载入两幅相同的图片,然后通过一个水平滑杆来改变其中一幅图片的色彩对比度。这个应用的特点是可以改变图片初始的色彩。类似的jQuery图片对比应用大家还可以看看这款jQuery原始图片对比插件JavaScript图片拖动对比 实现图片差异定位

javascript-css3-color-contrast

在线演示源码下载

SVG螺旋式扩散的Loading加载动画

SVG在绘制网页矢量图方面非常强大,甚至是一些矢量动画也是相当不错。之前我们分享过一些比较实用的SVG Loading动画,比如这个HTML5 SVG Loading 动画加载特效和这款富有创意的CSS3/SVG沙漏式Loading加载动画。这次我们要给大家分享的是另外一款基于SVG和JavaScript的螺旋式扩散的Loading加载动画,这个Loading动画非常适合页面加载时的等待动画。

svg-spiral-loading

在线演示源码下载

CSS3带小图标的手风琴下拉菜单

对于网页菜单来说,我们用得最多的虽然还是横向主菜单,但是在系统后台中,手风琴下拉菜单还是用得十分广泛的。之前我们也介绍过一些使用的jQuery和CSS3垂直手风琴菜单,比如这款炫酷实用的CSS3 3D垂直手风琴菜单和这款jQuery带小图标手风琴垂直菜单。这次要分享的也是一款基于CSS和JavaScript的手风琴菜单,同时这款菜单左侧也同样带有漂亮的小图标。

css3-accordion-menu-icon

在线演示源码下载

5组炫酷的纯CSS3 Loading加载动画

之前我们为大家分享过很多基于纯CSS3的Loading加载动画,你可以在10组蓝色风格的纯CSS3 Loading动画图标这篇文章中找到许多实用的CSS3 Loading动画。这次我们再给大家分享5组炫酷的纯CSS3 Loading加载动画,这些Loading动画都非常快速,是一款快进版的CSS3 Loading动画。

5-cool-css3-loading-animation

在线演示源码下载

jQuery实现的Mac样式消息提示框 可自动消失

在平时的前端开发中,我们经常需要通过一个提示框提示用户正在进行什么操作,或者已经完成什么操作。然而我们用的最多的是使用alert方法弹出浏览器默认的提示框,并且也是在浏览器中居中显示。这次我们分享给大家一款Mac样式的jQuery消息提示框插件,这款插件可以让消息框在不同的位置显示,而且为不同的消息级别分别定制了不同的外观,消息提示框会在一定的时间内淡出消失。

jquery-mac-message-tips

在线演示源码下载

纯CSS3抽屉打开关闭动画

这是一款基于纯CSS3的抽屉打开关闭动画,抽屉一共有3层,每一层都标识一个名称,只有打开抽屉才可以看到。当你用鼠标点击某一个抽屉时,该抽屉便会打开,再点击一次便会关闭。当然也许这款动画对你的实际应用并不会有太大帮助,但是它可以让你学习到很多关于CSS3的动画特性。

pure-css3-drawer-animation

在线演示源码下载