使用HTML CSS JS制作JQuery计数器动画效果cid1140-网页前端设计

作者code
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>counter up animating effect</title>
  6. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
  9. <link rel="stylesheet" href="style.css">
  10. </head>
  11. <body>
  12. <br><br><br>
  13. <div class="container">
  14. <div class="features-heading">
  15. <br>
  16. <h2 class="title">
  17. <b>Why Choose us</b>
  18. </h2>
  19. <br>
  20. <p class="description">
  21. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis minima ullam omnis necessitatibus libero consectetur dolorum, blanditiis, repudiandae! Laudantium iste cumque rerum eveniet. Possimus praesentium ducimus accusantium odit quis, necessitatibus.
  22. </p>
  23. <a href="" class="btn btn-primary">READ MORE</a>
  24. </div>
  26. <br><br><br>
  27. <div class="row">
  28. <div class="col-md-2 col-sm-6">
  29. <div class="feature-list">
  30. <img src="https://code.5g-o.com/wp-content/uploads/2021/01/icon_counter2.png" alt="">
  31. </div>
  32. <br>
  33. <div class="features-description">
  34. <span class="counter">1556</span>
  35. <span>+</span>
  36. <p>
  37. Members
  38. </p>
  39. </div>
  40. </div>
  42. <div class="col-md-2 col-sm-6">
  43. <div class="feature-list">
  44. <img src="https://code.5g-o.com/wp-content/uploads/2021/01/icon_counter3.png" alt="">
  45. </div>
  46. <br>
  47. <div class="features-description">
  48. <span class="counter">1756</span>
  49. <span>+</span>
  50. <p>
  51. Members
  52. </p>
  53. </div>
  54. </div>
  57. <div class="col-md-2 col-sm-6">
  58. <div class="feature-list">
  59. <img src="https://code.5g-o.com/wp-content/uploads/2021/01/icon_counter1.png" alt="">
  60. </div>
  61. <br>
  62. <div class="features-description">
  63. <span class="counter">2055</span>
  64. <span>+</span>
  65. <p>
  66. Members
  67. </p>
  68. </div>
  69. </div>
  71. </div>
  73. </div>
  76. <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
  77. <script src="https://code.5g-o.com/wp-content/uploads/2021/01/jquery.waypoints.min_.js"></script>
  78. <script src="https://code.5g-o.com/wp-content/uploads/2021/01/jquery.counterup.min_.js"></script>
  80. <script>
  82. jQuery(document).ready(function($){
  83. $('.counter').counterUp({
  84. delay: 10,
  85. time: 5000
  86. });
  87. });
  93. </script>
  98. </body>
  99. </html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>counter up animating effect</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
  
 
    <link rel="stylesheet" href="style.css">
</head>
<body>
   <br><br><br>
   <div class="container">
       <div class="features-heading">
           <br>
           <h2 class="title">
               <b>Why Choose us</b>
           </h2>
           <br>
           <p class="description">
               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis minima ullam omnis necessitatibus libero consectetur dolorum, blanditiis, repudiandae! Laudantium iste cumque rerum eveniet. Possimus praesentium ducimus accusantium odit quis, necessitatibus.
           </p>
           <a href="" class="btn btn-primary">READ MORE</a>
       </div>
       
       <br><br><br>
        <div class="row">
            <div class="col-md-2 col-sm-6">
                <div class="feature-list">
                    <img src="https://code.5g-o.com/wp-content/uploads/2021/01/icon_counter2.png" alt="">
                </div>
                <br>
                <div class="features-description">
                    <span class="counter">1556</span>
                    <span>+</span>
                    <p>
                        Members
                    </p>
                </div>
            </div>
            
              <div class="col-md-2 col-sm-6">
                <div class="feature-list">
                    <img src="https://code.5g-o.com/wp-content/uploads/2021/01/icon_counter3.png" alt="">
                </div>
                <br>
                <div class="features-description">
                    <span class="counter">1756</span>
                    <span>+</span>
                    <p>
                        Members
                    </p>
                </div>
            </div>
            
            
              <div class="col-md-2 col-sm-6">
                <div class="feature-list">
                    <img src="https://code.5g-o.com/wp-content/uploads/2021/01/icon_counter1.png" alt="">
                </div>
                <br>
                <div class="features-description">
                    <span class="counter">2055</span>
                    <span>+</span>
                    <p>
                        Members
                    </p>
                </div>
            </div>
          
        </div>        
       
   </div>
   
   
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
   <script src="https://code.5g-o.com/wp-content/uploads/2021/01/jquery.waypoints.min_.js"></script>
   <script src="https://code.5g-o.com/wp-content/uploads/2021/01/jquery.counterup.min_.js"></script>
   
   <script>
    
    jQuery(document).ready(function($){
        $('.counter').counterUp({
            delay: 10,
            time: 5000
        });
    });
    
    
    
    
    
    </script>
   
   
   
    
</body>
</html>

css

  1. body{
  2. font-family: sans-serif;
  3. background-image: url(https://code.5g-o.com/wp-content/uploads/2021/01/one.png);
  4. background-size: cover;
  5. background-position: center;
  6. height: 100vh;
  7. color: white;
  8. }
  11. .features-list .features-description span{
  12. font-size: 50px;
  13. font-weight: bold;
  14. line-height: 38px;
  15. }
  18. .features-description p{
  19. font-weight: bold;
  20. color: white;
  22. }
  25. .features-heading:before{
  26. content: "";
  27. position: absolute;
  28. width: 100px;
  29. height: 8px;
  30. background: white;
  31. }
  34. h2{
  35. font-size: 46px;
  36. font-weight: 400;
  37. color: white;
  38. letter-spacing: 2px;
  39. }
  42. .features-heading p{
  43. width: 70%;
  44. }
  47. .btn{
  48. background: deepskyblue;
  49. padding: 13px 35px;
  50. border: 0px;
  51. border-radius: 50px;
  52. margin-top: 30px;
  53. }
  55. .features-description p{
  56. background: white;
  57. padding: 5px;
  58. width: 99px;
  59. margin-top: 10px;
  60. text-transform: capitalize;
  61. color: black;
  62. border-radius: 50px;
  63. text-align: center;
  64. letter-spacing: 2px;
  65. }
  69. .features-description span{
  70. font-size: 37px;
  71. }
  74. span.counter{
  75. font-size: 55px;
  76. color: white;
  77. }
body{
    font-family: sans-serif;
    background-image: url(https://code.5g-o.com/wp-content/uploads/2021/01/one.png);
    background-size: cover;
    background-position: center;
    height: 100vh;
    color: white;
}


.features-list .features-description span{
    font-size: 50px;
    font-weight: bold;
    line-height: 38px;
}


.features-description p{
    font-weight: bold;
    color: white;
    
}


.features-heading:before{
    content: "";
    position: absolute;
    width: 100px;
    height: 8px;
    background: white;
}


h2{
    font-size: 46px;
    font-weight: 400;
    color: white;
    letter-spacing: 2px;
}


.features-heading p{
    width: 70%;
}


.btn{
    background: deepskyblue;
    padding: 13px 35px;
    border: 0px;
    border-radius: 50px;
    margin-top: 30px;
}

.features-description p{
    background: white;
    padding: 5px;
    width: 99px;
    margin-top: 10px;
    text-transform: capitalize;
    color: black;
    border-radius: 50px;
    text-align: center;
    letter-spacing: 2px;
}



.features-description span{
    font-size: 37px;
}


span.counter{
    font-size: 55px;
    color: white;
}

在线演示

让链接同时具备两种打开方式

获取源码: 使用HTML CSS JS制作JQuery计数器动画效果cid1140
下载数:76人次, 文件大小: 1.1 MB, 上传日期: 2021年-1 月-13日

公众号回复:gcode  获取解压密码

qrcode_for_gh_6ea2c28a1709_258 (1)

2,599 人查阅

类似文章