这是一款jquery计数器动画特效。该jquery计数器动画特效使用bootstrap网格系统进行布局，然后通过jQuery animate方法来制作炫酷的计数器动画特效。

使用方法

在页面中引入jquery，bootstrap.min.css和font-awsome.min.css文件。

HTML结构

计数器的HTML结构如下：

    

        

            

                

                    
                    75
                    
Web Design
                
            
        
        

            

                

                    
                    100
                    
Web Development
                
            
        
    

                

CSS样式

为计数器添加下面的CSS样式：

.counter{
    background: #7a7fb6;
    text-align: center;
    position: relative;
}
.counter .counter-content{
    padding: 30px 20px 50px;
    color: #fff;
    position: relative;
}
.counter:before,
.counter:after,
.counter .counter-content:before,
.counter .counter-content:after{
    content: "";
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    box-shadow: inset 0 2px 2px #000;
    top: 15px;
    left: 15px;
}
.counter:after{
    left: auto;
    right: 15px;
}
.counter .counter-content:before,
.counter .counter-content:after{
    box-shadow: inset 0 -2px 2px #000;
    top: auto;
    bottom: 15px;
}
.counter .counter-content:after{
    left: auto;
    bottom: 15px;
    right: 15px;
}
.counter .counter-icon{
    display: inline-block;
    font-size: 40px;
    margin-bottom: 15px;
}
.counter .counter-value{
    display: block;
    font-size: 50px;
    margin-bottom: 15px;
}
.counter .title{
    font-size: 20px;
    text-transform: uppercase;
    text-shadow: 3px 3px 2px rgba(0, 0, 0, 0.71);
}
@media only screen and (max-width: 990px){
    .counter{ margin-bottom: 20px; }
}                  
                

Javascript

在页面DOM元素加载完毕之后，通过下面的方法来初始化该jquery计数器。

$('.counter-value').each(function(){
    $(this).prop('Counter',0).animate({
        Counter: $(this).text()
    },{
        duration: 3500,
        easing: 'swing',
        step: function (now){
            $(this).text(Math.ceil(now));
        }
    });
});