jQuery环形百分比图表插件

16,625 人浏览

2014-08-22 16:03:55

这次我们要分享一款非常富有创意的jQuery图表插件，这款jQuery环形百分比图表插件有以下特点：1.图表外观是环形的，因此也十分特别。2.图表数据有百分比显示，你可以直截了当地看到当前数据情况。3.鼠标滑过环形时，将突出显示该项数据，并显示百分比。

jquery-circle-chart

在线演示源码下载

CSS3响应式滑动菜单

25,462 人浏览

发表回复

今天我们要来分享一款基于CSS3的响应式滑动菜单，该菜单有两个特点：1.响应式布局，这就意味着随着页面大小的变化，菜单的布局也会发生自适应变化，特别适合在移动设备上使用。2.鼠标滑过动画，鼠标滑过菜单项时可以渐变滑动，动画效果还不错。

在线演示源码演示

CSS3图片倾斜效果可倾斜四个角度

40,221 人浏览

1条回复

2014-08-16 21:46:17

今天我们再来分享一款CSS3图片特效，它可以让网页上的图片倾斜任意的角度，其实在CSS3中实现图片的倾斜非常简单，我们并不需要利用复杂的JS计算各种角度，只要用CSS3的transition属性即可完成图片的倾斜效果，非常简单，具体实现大家可以看DEMO演示。

css3-image-tilt-effect

在线演示源码下载

CSS3 3D折叠展开动画菜单

17,538 人浏览

发表回复

今天我们要继续为大家分享一款CSS3菜单，和上面几款不同的是，这款CSS3菜单有3D的动画效果，当下拉菜单展开和折叠时，将会出现3D的效果，当然这种3D的效果非常简单，我们只需要设置一些简单的CSS3样式就可以了。

在线演示源码下载

HTML5动感的火焰燃烧动画特效

46,117 人浏览

1条回复

这又是一款基于HTML5的超炫动画特效，是一款动感的火焰燃烧动画效果。这款HTML5动画火焰燃烧非常逼真，之前我们也分享过一些其他的HTML5火焰燃烧动画，比如：HTML5 Canvas火焰燃烧动画和纯CSS3实现打火机火焰动画。一般像这样的HTML5动画都是基于Canvas的，今天的这款也不例外。

html5-cool-fire-effect

接下来我们要简单分析一下实现这款HTML5火焰燃烧动画的具体步骤和代码，主要由HTML代码、CSS代码和Javascript代码组成。

HTML代码：

<div>
<canvas id="surface"></canvas>
</div>

这里我们仅仅是定义了一个canvas容器，我们的火焰效果就是在canvas上绘制而成的。

接下来是CSS代码，也非常简单。

CSS代码：

.wrapper {
  margin: 20px auto;
  text-align: center;
}
canvas {
  width: 100%;
  height: 100%;
}

只是用CSS定义了画布ca[......]

阅读全文>>

jQuery抽奖动画特效

15,696 人浏览

1条回复

之前我们分享过一款jQuery抽奖圆盘旋转插件，动画效果也是不错的。今天我们要再来分享一款基于jQuery的抽奖动画特效。点击抽奖按钮，即可开始运行抽奖程序，抽奖形式有点像以前的老虎机，一个方框在各个奖品间转动，最后停止在你抽中的奖品上。

jquery-choujiang-animation

在线演示源码下载

jQuery/CSS3可折叠侧边栏菜单

27,079 人浏览

1条回复

这次我们要分享的一款很棒的jQuery菜单插件，这款菜单插件是可折叠的侧边栏菜单，菜单的特点是点击按钮可以展开和折叠菜单，并伴随动画效果。而且每一个菜单项都有一个小图标，非常清新漂亮。当然折叠的效果需要CSS3的支持。

在线演示源码下载

纯CSS3实现宽屏二级下拉菜单

22,364 人浏览

1条回复

今天我们要来分享一款基于纯CSS3的宽屏二级下拉菜单，这款菜单的子菜单在展开的时候是很宽敞的，菜单项中可以自定义格式的内容，非常实用，也很大气。由于是用纯CSS3实现，所以这款下拉菜单不用运行Javascript，展示速度当然是非常快的。

下面我们一起来看看实现这款CSS3下拉菜单的过程和源码，代码比较简单，主要由HTML和CSS实现，并不需要JavaScript。

HTML代码：

<div class="container">
    <div class="menu style-1">
        <ul class="menu">    
            <li><a href="#">Home</a></li>
            <li><a href="#" class="arrow">Categories</a>
                <div class="mega-menu full-wid[......]

阅读全文>>