纯CSS3实现吸附和阴影效果的垂直菜单导航

今天我们要给大家带来一款很别致的纯CSS3垂直菜单导航,它的特点是菜单项带有3D立体阴影的效果,同时当鼠标滑过菜单项时,菜单项便会吸附在页面上,移开鼠标菜单项便又会离开页面呈现3D阴影的视觉效果。这款菜单基于纯CSS3实现,因此使用非常方便。

css3-attach-shadow-menu

在线演示源码下载

jQuery超酷的层叠照片墙 可放大切换预览图片

有一段时间没有更新jQuery插件了,今天开始我们将继续为大家分享一些实用的jQuery插件HTML5应用。今天带来的是一款基于jQuery的层叠样式照片墙,该插件允许一些不同形状的图片层叠无序的摆放在照片墙上,并且点击图片缩略图可以放大图片,并且支持上一张和下一张的图片切换。

jquery-image-wall

在线演示源码下载

基于Vue.js的冒泡排序模拟动画

vue.js是一款轻量级的渐进式JavaScript框架,之前我们也分享过一些基于vue.js的应用,例如这款基于Vue.js的Tooltip用户通知弹出框基于Vue.js的超实用科学型计算器。这次给大家带来了一款基于Vue.js的有趣动画,它主要模拟了冒泡排序的过程,冒泡排序大家应该非常熟悉,这次用vue.js来直观展现冒泡排序的全过程,还是非常富有创意的。

vuejs-bubble-sort-animation

在线演示源码下载

基于Echarts的HTML5 Canvas中国地图

之前我们分享过几个基于HTML5和SVG的地图应用,例如这款HTML5世界地图利用了SVG的path特性,又比如这款jQuery矢量SVG地图插件JVectorMap同样通过SVG和jQuery实现。这次我们要分享一款基于Echarts的中国地图,底层技术是HTML5 Canvas技术,正是利用了Canvas中绘制图形的便利性,这款中国地图应用可以为每一个省添加描述信息。

echarts-html5-canvas-map

在线演示源码下载

jQuery大屏图文切换时间轴 可循环播放

今天要给大家带来一款比较特别的jQuery图片切换播放器,它的特点在于切换的不仅仅是图片,而是图文,另外每一幅图文关联时间轴上的一个节点,时间轴跟随图文切换而移动。同时,这款图文时间轴播放器还可以无缝循环播放。如果你的网站上需要介绍历史信息,那么这款jQuery插件就非常适合你。

jquery-text-image-timeline

在线演示源码下载

CSS3 3D线条变换进度条动画

之前我们分享过很多CSS3进度条动画插件,比如这9款超富有创意的CSS3进度条动画,另外还有很多。今天给大家带来的是一款基于CSS3的3D线条变换进度条动画,它是由一系列排成一行的点通过线条旋转变换形成的3D立体动画来构建一个带有进度条视觉效果的动画特效,特别适合应用在个性化比较强的页面上。

css3-3d-line-progressbar

在线演示源码下载

纯CSS3磁带动画特效

之前我们分享过一些基于HTML5和CSS3的磁带动画,比如这款纯CSS3实现超酷的磁带动画是利用CSS3绘制而成;这款HTML5卡带式古典播放器更是利用HTML5技术实现了磁带播放音乐。今天要带来的是一款纯CSS3绘制而成的磁带特效,它利用CSS3特性绘制了磁带,同时利用CSS3动画属性实现磁带的滚动。

pure-css3-tap-animation

在线演示源码下载

CSS3 3D立方体焦点图动画

之前我们分享过很多基于jQuery和CSS3的焦点图动画插件,大部分都是在平面上通过过渡动画切换不同的图片,例如这里就有10款非常不错的jQuery/CSS3焦点图插件。今天我们要在这里继续分享一款基于CSS3的焦点图插件,它的特点是图片切换容器是一个3D的立方体,点击图片后即可将该图片呈现在立方体的前面。

css3-3d-cube-image-player

在线演示源码下载

HTML5 Canvas带边框的粒子动画进度条

还记得很早以前,我们分享过一款基于HTML5 Canvas的粒子动画进度条,非常富有创意。今天我们要带来的同样是一款基于HTML Canvas的粒子进度条动画,不同的是这款进度条相对是扁平样式的,进度部分带有细边框。

html5-canvas-border-pixel-progressbar

在线演示源码下载

jQuery/CSS3激活动画按钮

今天我们要给大家分享一款基于jQuery和CSS3的状态激活动画按钮。按钮一共有4种状态,第一种状态是按钮默认时的样式,鼠标滑过按钮时就出现待激活的第二种状态,点击按钮后就出现正在激活的第三种状态,最后是激活完成的状态。由于这个按钮动画是基于jQuery的,所以使用时不要忘记引用jQuery库文件。

jquery-css3-active-button

在线演示源码下载