作者归档:sxwgf

jQuery带缩略图焦点图插件 淡入淡出切换效果

今天我们要给大家介绍一款相对比较实用的jQuery焦点图插件,这款焦点图插件的特点有2个,一个是每一张图片都有一个同比例尺寸的缩略图,所有缩略图都排列在下方,点击缩略图即可切换到对应的图片;另外一个特点是图片切换时出现淡入淡出的动画效果,播放十分流畅。

css3-image-slider-thumbnail

在线演示源码下载

超酷的jQuery/CSS3五彩环形弹出菜单

今天我们要为大家分享一款非常漂亮的jQuery/CSS3五彩环形弹出菜单,一开始菜单项都聚集在一起,并且每个菜单项都微微错开,就像一个彩色团子。点击团子后,菜单项就会以弹出的形式展开,并形成一个环形,再点击Close按钮后,菜单项又会收拢,动画效果非常酷。类似的菜单我们之前也有分享过,比如这款jQuery简易时尚的圆形展开菜单jQuery SVG高端圆形菜单导航

jquery-css3-circle-pop-menu

在线演示源码下载

jQuery宽屏左右切换焦点图 支持鼠标拖拽切换

这是一款很实用的jQuery宽屏左右切换焦点图,该焦点图左右两侧均有一个切换箭头按钮,点击按钮可以逐一切换图片。另外,图片下方有一排圆形切换按钮,可以跳转到任意图片。这款jQuery焦点图还有一个特点是支持鼠标拖拽切换,因此适合移动设备上使用。

jquery-drag-slider

在线演示源码下载

CSS3液体形态的Loading动画

这是一款比较特别的CSS3 Loading加载动画特效,它是一个小正方形,正方形内会产生类似液体形态的各种花样,同时花样的背景颜色也会不断变化,从而产生Loading的效果。当然我们可以在正方形内部定义其他的液体流动动画,那同样会产生另外一种Loading加载动画。

css3-liquid-loading

在线演示源码下载

HTML5 Canvas 3D立方体波浪动画

之前我们分享过很多基于CSS3和HTML5 Cavans的3D立方体动画,有几款还是比较炫酷的,比如这款HTML5/CSS3 3D立方体拼图和这款CSS3 3D立方体图片墙 可拖拽360度旋转。这次我们要介绍的是一款基于HTML5 Canvas的3D立方体波浪动画,一个个小立方体组成一个立体面,立方体按一定数学规则上下浮动,形成了炫酷的波浪动画效果。

html5-canvas-3d-cube-wave

在线演示源码下载

HTML5 Canvas 2D文字与3D图像粒子转换动画

今天我们要给大家分享一款基于HTML5的3D粒子动画,该动画主要在Canvas画布上绘制粒子形的文字和3D模型,并且实现2D粒子文字与3D粒子模型之间的转换动画。在转换过程中,粒子从被打散到重新组合,动画效果非常炫酷,并且我们可以通过鼠标滚轮来缩放3D模型。

html5-canvas-2d-to-3d

在线演示源码下载

CSS3士兵队伍整齐的步伐模拟动画

这是一款比较有趣的CSS3动画,动画中有一支士兵队伍迈着整齐的步伐,举着枪,一起向前进。这里每一个士兵人物都是通过CSS3绘制而成,当然这里每一个士兵都是一样的,因此使用同一套CSS3代码即可复制N个士兵人物。

css3-soldiers-walking

在线演示源码下载

纯CSS3绘制的可爱雪人 附雪花飘落动画

今天我们要给大家带来一款非常可爱的纯CSS3雪人动画,首先映入眼帘的是一场迷人的雪景,这里利用了CSS3的动画属性模拟了下雪的场景。同时我们又通过CSS3特性绘制了一个可爱的小雪人,胖乎乎的身体,还有双手和双脚、面部五官等都利用CSS3绘制而成。

pure-css3-snowman

在线演示源码下载

纯CSS3实现的多层嵌套圆环Loading动画

之前我们为大家分享过一些炫酷实用的CSS3圆环形Loading加载动画,很多都是纯CSS3实现的。今天我们要分享另外一款CSS3圆环Loading动画,不同的是,这款Loading动画是多层嵌套圆环形的,每一层都有不同的样式,看上去更加华丽,由于是纯CSS3实现,因此整个Loading动画表现得非常流畅,使用也比较简单。

pure-css3-neste-ring-loading

在线演示源码下载

多组超具创意的CSS3开关切换按钮

前不久我们刚刚为大家分享过一款超清新的纯CSS3自定义Checkbox开关,非常简洁美观。今天我们要继续为大家介绍多组超具创意的CSS3开关切换按钮,一共有8款漂亮的样式。这种纯CSS3开关切换按钮非常适合一些个性化比较强的表单页面中使用。

css3-creative-switch-button

在线演示源码下载