这是一款jQuery和CSS3计数器动画特效。该计数器动画特效采用bootstrap进行布局,通过简单的CSS代码和js代码,来完成漂亮的计算器动画效果。
使用方法
在页面中引入jquery和bootstrap/font-awesome文件。
<link rel="stylesheet" href="path/to/bootstra.min.css"> <link rel="stylesheet" href="path/to/font-awesome.min.css"> <script src="js/jquery.min.js"></script>
HTML结构
该计数器动画特效的HMTL结构如下:
<div class="demo"> <div class="container"> <div class="row"> <div class="col-md-3 col-sm-6"> <div class="counter"> <div class="counter-content"> <div class="counter-icon fa fa-globe"></div> <span class="counter-value">89</span> </div> <h3 class="title">Web Design</h3> </div> </div> <div class="col-md-3 col-sm-6"> <div class="counter red"> <div class="counter-content"> <div class="counter-icon fa fa-rocket"></div> <span class="counter-value">68</span> </div> <h3 class="title">Web Development</h3> </div> </div> </div> </div>
CSS样式
然后为该计算器动画特效添加下面的CSS样式。
.counter{ padding: 20px 0; text-align: center; position: relative; } .counter .counter-content{ width: 180px; height: 180px; border-radius: 50%; background: #fff; padding: 30px 0; margin: 0 auto 30px; z-index: 1; position: relative; transition: all 0.3s ease 0s; } .counter .counter-content:before{ content: ""; width: 122%; height: 122%; border-radius: 50%; border: 20px solid #f19f48; border-bottom: 20px solid transparent; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .counter .counter-content:after{ content: ""; border-top: 16px solid #f19f48; border-left: 16px solid transparent; border-right: 16px solid transparent; position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%); } .counter .counter-icon{ display: block; font-size: 50px; color: #f19f48; line-height: 50px; } .counter .counter-value{ font-size: 50px; font-weight: 700; color: rgba(0,0,0,0.7); line-height: 70px; } .counter .title{ display: inline-block; padding: 5px 25px; background: #f19f48; border-radius: 10px; font-size: 20px; font-weight: 600; color: #fff; text-transform: capitalize; margin: 0; } .counter.red .counter-content:before{ border-color: #ef5f61; border-bottom-color: transparent; } .counter.red .counter-content:after{ border-top-color: #ef5f61; } .counter.red .counter-icon{ color: #ef5f61; } .counter.red .title{ background: #ef5f61; } .counter.blue .counter-content:before{ border-color: #4d9fcf; border-bottom-color: transparent; } .counter.blue .counter-content:after{ border-top-color: #4d9fcf; } .counter.blue .counter-icon{ color: #4d9fcf; } .counter.blue .title{ background: #4d9fcf; } .counter.purple .counter-content:before{ border-color: #a98ceb; border-bottom-color: transparent; } .counter.purple .counter-content:after{ border-top-color: #a98ceb; } .counter.purple .counter-icon{ color: #a98ceb; } .counter.purple .title{ background: #a98ceb; }
JavaScript
最后通过下面的jquery代码来完成计算器数字的动画。
$(document).ready(function(){ $('.counter-value').each(function(){ $(this).prop('Counter',0).animate({ Counter: $(this).text() },{ duration: 3500, easing: 'swing', step: function (now){ $(this).text(Math.ceil(now)); } }); }); });
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!