作者归档:sxwgf

SVG/CSS3平滑线性图表 可定义数据选取范围

前段时间给大家分享过很多炫酷实用的HTML5图表应用,比如这款HTML5 Canvas气温折线图表超酷HTML5 Canvas图表应用Chart.js。今天要介绍的是一款基于SVG和CSS3的平滑线性图表,它的特点是可以通过鼠标拖动滑杆来选取需要统计的数据范围,非常实用。

svg-css3-data-scope-chart

在线演示源码下载

jQuery/CSS3简易实用的柱形图表插件

对于柱形图表,我们之前已经分享过很多了,有基于HTML5Canvas酷似冰山的3D柱状图表,也有基于CSS3的3D立体柱状图表演示动画。这次我们要带来的是一款基于jQuery的简易实用柱形图表插件,它可以根据配置数据自动生成图标,并且鼠标滑过图表项时显示当前项的数值。

jquery-css3-easy-bar-chart

在线演示源码下载

纯CSS3背景变幻的分享按钮组合

这是一款相当实用而且美观的纯CSS3分享按钮组合,它的特点是当鼠标滑过按钮时,按钮的背景将会出现多边形变幻的动画效果,同时分享按钮的Logo也会放大显示。类似这种鼠标滑过动画的分享按钮还有很多,比如之前介绍的CSS3社会化分享图标 可旋转和悬停也非常炫酷。

pure-css3-share-button-animate

在线演示源码下载

超炫的SVG/CSS3游乐园动画

这是一款基于SVG和CSS3的游乐园动画,每一个细节都表现得非常不错。游乐园的各项活动设备都采用SVG的路径来描述的,并没有使用任何图片。同时游乐园中的摩天轮动画和气球漂浮动画都采用CSS3实现,看起来非常不错,和之前分享的SVG过山车动画非常类似。

svg-css3-park-animation

在线演示源码下载

纯CSS3下拉菜单导航 多种下拉弹出动画

之前我们分享过非常多的jQuery/CSS3下拉菜单插件,有些非常实用,比如这款HTML5/CSS3水平二级下拉菜单,也有的非常炫酷,比如这款jQuery/CSS3波浪形弹性下拉菜单。今天我们要介绍的是另外一款下拉菜单导航,它是纯CSS3实现,其特点是简单易用,并且支持多种下拉弹出动画,非常不错,大家可以下载源码试试。

pure-css3-dropdown-menu

在线演示源码下载

超简易的SVG/CSS3 Loading加载动画图标

今天我们要为大家分享一组非常简易的SVG/CSS3 Loading加载动画图标,和之前分享的SVG实现的一组超华丽Loading加载动画相比,这组Loading动画更见简单,它主要由圆环形和柱形两种样式组成,可以将这些Loading图标应用在很多种类型的页面中,非常实用。

svg-css3-loading-icons

在线演示源码下载

jQuery左右切换焦点图插件 3D阴影相框

这是一款相对比较简单而实用的jQuery焦点图应用,它的特点是左右切换按钮悬浮在图片右下角,点击切换按钮即可让图片进行左右平移地切换,效果着实是简单,但是个人觉得很实用。另外还有一个特点是,这款jQuery焦点图插件带有3D阴影的相框,从而简单中稍带一点点华丽。

jquery-easy-shade-image-play

在线演示源码下载

jQuery层叠图片细节对比插件

之前我们分享过几款比较实用的图片对比插件,比如这款JavaScript图片拖动对比 实现图片差异定位就非常强大,可以左右滑动。今天我们要介绍的这款jQuery层叠图片细节对比插件功能也比较实用,可以通过鼠标滑动图片上方的滑杆来对比两张图片的细节。

jquery-image-stack-compare

在线演示源码下载

jQuery自定义美化Select下拉框插件

之前我们分享过很多款非常漂亮而且实用的jQuery美化版Select下拉框插件,比如jQuery Select下拉框美化插件 菜单淡如淡出动画漂亮实用的Select下拉框美化插件Tether都非常不错。今天我们要给大家介绍另一款基于jQuery的自定义美化Select下拉框插件,它的配置十分简单,引用插件库后用几行jQuery代码初始化即可。

jquery-custom-select-plugin

在线演示源码下载

纯CSS3实现的蒙娜丽莎画像

蒙娜丽莎画像非常著名,如果告诉你这幅画像我们可以使用纯CSS3绘制而成,你是否会觉得非常惊讶。没错,今天我们要分享的就是这个使用纯CSS3,没有使用任何图片的蒙娜丽莎画像,实现原理是利用CSS3的阴影特性,逐层用不同的颜色渲染,从而形成这幅蒙娜丽莎巨作,当然有点模糊是肯定的,毕竟是通过投影渲染的,是不是觉得非常神奇。

pure-css3-mona-lisa

在线演示源码下载