css3实现数字上下跳动

最新推荐文章于 2024-04-10 17:59:06 发布

芝芝龙

最新推荐文章于 2024-04-10 17:59:06 发布

阅读量671

点赞数

分类专栏：技巧 css 文章标签： css3 html css

本文链接：https://blog.csdn.net/weixin_44752723/article/details/125511051

版权

技巧同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

css

3 篇文章 0 订阅

订阅专栏

在工作中遇到了一个需求，就是指标性质的数字需要上下跳动，ok！打开百度，搜索，copy！
在这里插入图片描述

html：

<div class="home-monitoring-real-time-item">
              <div class="home-monitoring-real-time-text">
                巡检中
                <div class="home-monitoring-real-time-num">
                  <countTo :startVal="monSVal" :endVal="monEVal" :duration="3000"></countTo> 
                  // 这里使用了countTo的插件
                </div>
              </div>
              <img src="../../assets/dataView/u330.png" alt="" />
            </div>

css3：这里我是写less

.home-monitoring-real-time-item {
   position: relative;
   text-align: center;
   .home-monitoring-real-time-text {
     -webkit-animation: bounce-up 1.4s linear infinite;
     animation: bounce-up 1.4s linear infinite;
     font-size: 18px;
     position: absolute;
     left: 29%;
     top: 15px;
     // height:20px;
     .home-monitoring-real-time-num {
       font-family: 'numFont';
       font-weight: 700;
       font-size: 48px;
     }
   }
   img {
     margin-top: 30px;
   }
 }

@keyframes bounce-up {
  25% {
    transform: translateY(10px);
  }
  50%,
  100% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(-10px);
  }
}