作者归档:sxwgf

jQuery多功能手风琴个人信息菜单面板

这是一款基于jQuery的手风琴个人信息菜单面板,每一个菜单项展开后可以自定义布局,因此可以为每一个菜单项实现多功能。类似这样的多功能菜单还有jQuery/CSS3大屏下拉菜单,非常实用。由于这款手风琴菜单是基于jQuery框架的,因此兼容性和实用性很强。

jquery-accordion-person-info

在线演示源码下载

纯CSS3水平手风琴分享按钮菜单

对于手风琴动画,我们以前分享过很多,有基于jQuery的手风琴菜单,比如jQuery多层级垂直手风琴菜单;也有基于jQuery的手风琴焦点图,比如jQuery实现横向手风琴图片轮播焦点图效果。今天要分享的是一款利用纯CSS3实现的水平手风琴分享按钮菜单,每一个分享按钮展开时会有该平台的简单介绍,非常绚丽实用。

css3-accordion-share-menu

在线演示源码下载

HTML5 WebGL粒子爆炸动画

之前我们分享过几款非常炫酷的HTML5粒子动画,比如这款HTML5像素粉碎图片动画HTML5 Canvas彩色像素进度条动画,都是利用了HTML5的粒子渲染特性实现。今天我们要分享另外一款基于HTML5和WebGL的粒子爆炸动画特效,效果非常令人震撼。

html5-webgl-particle-animation

在线演示源码下载

超酷逼真的CSS3 3D书本翻页动画

之前我们分享过好几款风格各异的jQuery书本翻页插件和HTML5书本翻页动画,有几个还是不错的,比如jQuery书本翻页3D动画特效HTML5 3D书本翻页特效。今天要分享的也是一款基于CSS3的3D书本翻页动画,目前这个动画不支持鼠标交互,只可以自动将页面打开和收拢。

css3-3d-book-flip

在线演示源码下载

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动画在原来四肢模拟的基础上,添加了身体碰撞模拟的动画特效,我们用鼠标模拟一个大铁球,移动鼠标后将大铁球撞击人物的身体[......]

阅读全文>>

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

这是一款基于jQuery和CSS3的焦点图插件,这款焦点图的设计非常简单,仅仅是自动播放一系列相片,相片在切换的时候带有淡入淡出的动画特效,使用起来也十分方便。另外一个特点是,这款jQuery焦点图插件的相片外框呈现3D的效果,配合黑色的背景显得非常立体大气。

jquery-auto-fade-image-play

在线演示源码下载

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

前几天我们刚刚为大家分享过一款基于HTML5的人物四肢关节伸展模拟动画,它可以模拟人物的头部、四肢伸展情况,相当逼真。今天要介绍的这款HTML5 Canvas动画在原来四肢模拟的基础上,添加了身体碰撞模拟的动画特效,我们用鼠标模拟一个大铁球,移动鼠标后将大铁球撞击人物的身体,人物身体受到作用力后就会按一定方向进行翻转活动,因此四肢也随着伸展和摆动。当然这种动画也应用了HTML5的重力感应特性。这种类似的动画以前也介绍过一些,比如HTML5图片相册重力感应特效

html5-canvas-person-collision

在线演示源码下载

HTML5点阵列局部放大镜动画特效

记得以前我们分享过一款很酷的HTML5 3D 粒子波浪动画特效,它由一连串点阵列组成,3D效果非常炫酷。今天要介绍的也是一个基于HTML5的点阵列动画特效,当鼠标滑过阵列时,阵列图的局部将产生放大镜的动画特效,也具有极强的3D立体视觉效果。

html5-dot-outline

在线演示源码下载

纯CSS3实现可感知方向的卡片翻转动画

今天我们要给大家分享一个看似简单但却非常有趣的纯CSS3动画特效,当我们将鼠标滑过一个个卡片时,卡片可以进行翻转,这个应该很容易,而且也很常见,你一定会说,这种翻转动画随便用CSS3特性就可以实现了。但是这款CSS3卡片翻转动画有一个独有的特点,就是它可以感知翻转的方向,也就是说它可以根据用户鼠标滑过的方向来决定翻转的角度,比如鼠标从上往下滑过,那卡片就垂直翻转,如果鼠标从左往右滑过,那卡片就水平翻转。你可以去研究一下它的CSS源码,对你学习CSS3会有很大的帮助。

pure-css-direction-aware-tile

在线演示源码下载

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

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

jquery-svg-image-slider

在线演示源码下载