,,

數字滾動效果實現

freeflydom

2023年8月18日 10:8 本文熱度 960

搭建基本結構

<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協同辦公管理系統。

公交车上荫蒂添的好舒服的电影-公用玩物(np双xing总受)-公用小荡货芊芊-公与妇仑乱hd-攻把受做哭边走边肉楼梯play-古装一级淫片a免费播放口

數字滾動效果實現