数字滚动效果实现

freeflydom

2023年8月18日 10:8 本文热度 376

搭建基本结构

<div class="box">
  <span class="num">0123456789</span>
</div>

.box {
  height: 82px;
  width: 54px;
  line-height: 82px;
  text-align: center;
  background-color: #149373;
  border-radius: 10px;
  margin-right: 5px;
}
.num {
  font-size: 62px;
}

此时，出来的效果为

若是想要滚动效果的话，就需要将数字变成竖向排布，这样才能加上下移动效果。这时需要加两个css属性

writing-mode: vertical-lr; text-orientation: upright;

此时已经有点接近目标了，而后需要做的就是要改变字符串的位置，让相应的数字出现在框中。改变位置我们可以让span变成绝对定位，然后通过transform来操作

.box {
  height: 82px;
  width: 54px;
  line-height: 82px;
  text-align: center;
  background-color: #149373;
  border-radius: 10px;
  margin-right: 5px;

  position: relative;
  writing-mode: vertical-lr;
  text-orientation: upright;
}
.num {
  position: absolute;
  left: 50%;
  top: 10px;
  font-size: 62px;
  transform: translate(-50%, 0);
}

此时设置translate(-50%, 0)时，正好0在框中，若设置translate(-50%, -50%)时，应该是5在框中

后续只需要我们改变transform中translate设置，就可以实现框中出现不同的数字，我们要封装成通用的组件，就是接收外部传入的数字，然后设置translate来达到通用的效果，此时我们可以将transform放置在我们的style中。再增加一个动画，transition: all 0.5s;

<template>
  <div>
    <span :style="`transform: translate(-50%, -${number * 10}%)`">0123456789</span>
  </div>
</template>

<script setup>
defineProps({
  number: {
    type: Number,
    default: 5,
    required: true,
  },
});
</script>

这时候差不多达成了文字滚动的效果了，此时只需要在box类下增加一个overflow: hidden，将超出部分隐藏那么数字滚动效果就达成了。效果就如同

这就是简单的一个封装，以下是完整代码。借此做简单的做一个记录，也希望大家可以来探讨分享一下其它的实现方案。

<template>
  <div>
    <span :style="`transform: translate(-50%, -${number * 10}%)`">0123456789</span>
  </div>
</template>

<script setup>
defineProps({
  number: {
    type: Number,
    default: 5,
    required: true,
  },
});
</script>

<style scoped>
.box {
  height: 82px;
  width: 54px;
  line-height: 82px;
  text-align: center;
  background-color: #149373;
  border-radius: 10px;
  overflow: hidden;
  margin-right: 5px;

  position: relative;
  writing-mode: vertical-lr;
  text-orientation: upright;
}
.num {
  position: absolute;
  left: 50%;
  top: 10px;
  font-size: 62px;
  color: #ffffff;
  transition: all 1.5s;
}
</style>

原文链接

该文章在 2023/8/18 10:09:02 编辑过

关键字查询

实现

数字

滚动

正在查询...

点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。

点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理，结合码头的业务特点，围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体，是物流码头及其他港口类企业的高效ERP管理信息系统。

点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。

点晴免费OA是一款软件和通用服务都免费，不限功能、不限时间、不限用户的免费OA协同办公管理系统。