jquery实现动态数字变动动画效果代码
代码语言:html
所属分类:动画
代码描述:jquery实现动态数字变动动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css"> <style> body { font-family: Arial; padding: 25px; background-color: #f5f5f5; color: #808080; text-align: center; } /*-=-=-=-=-=-=-=-=-=-=-=- */ /* Column Grids */ /*-=-=-=-=-=-=-=-=-=-=-=- */ .col_half { width: 49%; } .col_third { width: 32%; } .col_fourth { width: 23.5%; } .col_fifth { width: 18.4%; } .col_sixth { width: 15%; } .col_three_fourth { width: 74.5%; } .col_twothird { width: 66%; } .col_half, .col_third, .col_twothird, .col_fourth, .col_three_fourth, .col_fifth { position: relative; display: inline; display: inline-block; float: left; margin-right: 2%; margin-bottom: 20px; } .end { margin-right: 0 !important; } /* Column Grids End */ .wrapper { width: 980px; margin: 30px auto; position: relative; } .counter { background-color: #ffffff; padding: 20px 0; border-radius: 5px; } .count-title { font-size: 40px; font-weight: normal; margin-top: 10px; margin-bottom: 0; text-align: center; } .count-text { font-size: 13px; font-weight: normal; margin-top: 10px; margin-bottom: 0; text-align: center; } .fa-2x { margin: 0 auto; float: none; display: table; color: #4ad1e5; } </style> </head> <body> <div class="wrapper"> <div class="counter col_fourth"> <i class="fa fa-code fa-2x"></i> <h2 class="timer count-title" id="count-number" data-to="300" data-speed="1500"></h2> <p class="count-text "> bfw.wiki </p> </div> <div class="counter col_fourth"> <i class="fa fa-coffee fa-2x"></i> <h2 class="timer count-title" id="count-number" data-to="17870" data-speed="1500"></h2> <p class="count-text "> bfw.wiki </p> </div> <div class="counter col_fourth"> <i class="fa fa-lightbulb-o fa-2x"></i> <h2 class="timer count-title" id="count-number" data-to="847" data-speed="1500"></h2> <p class="count-text "> bfw.wiki </p> </div> <div class="counter col_fourth end"> <i class="fa fa-bug fa-2x"></i> <h2 class="timer count-title" id="count-number" data-to="157" data-speed="1500"></h2> <p class="count-text "> bfw.wiki </p> </div> </div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <script> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0