作者归档:sxwgf

CSS3鼠标滑过图片3D旋转动画

这是一款非常实用的CSS3鼠标滑过图片3D旋转动画,当鼠标滑过图片时,图片就会出现具有立体感的旋转动画,为什么说它实用,因为它不仅仅时视觉上的炫酷效果,而且旋转后出现文字介绍,因此很多场景都可以用到这款CSS3图片旋转插件。

css3-3d-image-rotate

在线演示源码下载

超漂亮的jQuery和Bootstrap进度条插件

这又是一款非常漂亮的网页进度条插件,它是基于jQuery脚本和Bootstrap样式的,形式和之前分享的CSS3彩色进度条加载动画 带进度百分比类似,但是外观有所不同。同样的这款进度条也有数字百分比显示在上方,因此可以很清楚地了解当前进度情况。

jquery-bootstrap-progressbar

在线演示源码下载

jQuery瀑布流布局 可拖拽交换元素

现在瀑布流布局形式非常流行,之前我们也分享过一款JavaScript结合CSS实现图片瀑布流布局,还是比较实用的。这次我们依然要为大家分享一款基于jQuery的瀑布流布局插件,不同的是,我们可以用鼠标拖拽瀑布流中的元素互相交换。

jquery-waterfalls-exchange

在线演示源码下载

jQuery雪人和下雪动画

今天我们要来分享一款非常欢乐的jQuery雪人和下雪动画,雪人是由一张图片形成,非常可爱。下雪的动画是由jQuery的动画特性来完成,随机大小和随机透明度的雪花从空中飘落,环绕在小雪人的四周显得格外宁静。

jquery-snow-animation

在线演示源码下载

HTML5文本输入框粒子动画特效

这次我们要为大家来分享一个非常炫酷的HTML5动画特效,它是一个输入框,当您在输入框输入文字的时候,输入框中就会出现很漂亮的粒子动画特效,并且输入框的四周边框将会出现发光的效果,效果很不错。

html5-text-input-animation

在线演示源码下载

CSS3 3D环形百分比进度条图表

这是一款基于JavaScript和CSS3的3D环形百分比进度条图表,它可以展示当前数据的百分比情况,与之前分享过的一款HTML5 SVG环形图表应用相比,这款环形图表应用的特点是它的外观呈现3D立体的视觉效果,而且实用性也是不错的。

css3-3d-circle-progress-chart

在线演示源码下载

jQuery多动画自动切换焦点图插件

之前我们有分享过很多炫酷和实用的jQuery焦点图插件,他们中的很多都拥有华丽的切换动画和播放方式,可以手动点击按钮切换,也可以自动切换。今天我们要介绍的这款jQuery多动画切换焦点图插件是自动播放的,它的切换动画由多种格子组成,有不同的方向和显示方式。

jquery-mult-animation-slider

在线演示源码下载

JavaScript结合CSS实现图片瀑布流布局

今天我们要来介绍一个很实用的布局方式:瀑布流布局。整个瀑布流布局用到了CSS和JavaScript,首先我们将不同尺寸的图片设置成宽度一致,然后一列列地分布,同时我们还可以将图片放大浏览,这种图片的瀑布流排列方式在现代相册应用中使用十分广发,特别是移动端的显示更为实用。

css-javascript-waterfalls-flow

在线演示源码下载

别具创意的CSS3鼠标悬停翻转按钮

这是一款非常具有创意的CSS3按钮应用,当我们将鼠标悬停在按钮上时,按钮会出现翻转的动画特效,而且按钮的外观也十分别具一格,一共有3种不同的颜色风格,当然你也可以自定义按钮的颜色,总之使用起来还是比较灵活的。

css3-hover-rotate-button

在线演示源码下载

CSS3彩色进度条加载动画 带进度百分比

前面我们刚分享过一些超炫酷的CSS3 Loading加载动画,这些Loading动画可以在很多地方帮助我们提示用户等待。这次要分享的也是加载动画,不过是进度条加载动画,这款进度条应用的特点是进度条呈现彩色的外观,而且进度条上方显示当前进度的百分比,非常实用。

css3-colorful-progressbar

在线演示源码下载