LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

数字滚动效果实现

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


搭建基本结构

<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协同办公管理系统。
Copyright 2010-2024 ClickSun All Rights Reserved