diff --git a/packages/vant/src/rolling-text/README.md b/packages/vant/src/rolling-text/README.md
index 62ba97c86..ef07650f7 100644
--- a/packages/vant/src/rolling-text/README.md
+++ b/packages/vant/src/rolling-text/README.md
@@ -107,15 +107,12 @@ export default {
 
 ```css
 .my-rolling-text {
-  gap: 6px;
-}
-
-.my-rolling-text .van-roll-single {
-  color: white;
-  background: deepskyblue;
-  border-radius: 5px;
-  width: 25px;
-  font-size: 20px;
+  --van-rolling-text-background: deepskyblue;
+  --van-rolling-text-color: white;
+  --van-rolling-text-font-size: 20px;
+  --van-rolling-text-gap: 6px;
+  --van-rolling-text-single-border-radius: 5px;
+  --van-rolling-text-single-width: 25px;
 }
 ```
 
@@ -211,8 +208,9 @@ The component provides the following CSS variables, which can be used to customi
 
 | Name | Default Value | Description |
 | --- | --- | --- |
-| --van-rolling-text-bg-color | _inherit_ | Background color of a single digit |
-| --van-rolling-text-color | _white_ | Color of the number |
+| --van-rolling-text-background | _inherit_ | Background color of a single digit |
+| --van-rolling-text-color | _var(--van-text-color)_ | Color of the number |
+| --van-rolling-text-font-size | _var(--van-font-size-md)_ | Font size of the number |
 | --van-rolling-text-gap | _0px_ | Spacing between digits |
 | --van-rolling-text-single-width | _15px_ | Width of a single digit |
-| --van-rolling-text-single-border-r | _0px_ | Border radius of a single digit |
+| --van-rolling-text-single-border-radius | _0px_ | Border radius of a single digit |
diff --git a/packages/vant/src/rolling-text/README.zh-CN.md b/packages/vant/src/rolling-text/README.zh-CN.md
index 98cbb6f00..99ab60514 100644
--- a/packages/vant/src/rolling-text/README.zh-CN.md
+++ b/packages/vant/src/rolling-text/README.zh-CN.md
@@ -107,15 +107,12 @@ export default {
 
 ```css
 .my-rolling-text {
-  gap: 6px;
-}
-
-.my-rolling-text .van-roll-single {
-  color: white;
-  background: deepskyblue;
-  border-radius: 5px;
-  width: 25px;
-  font-size: 20px;
+  --van-rolling-text-background: deepskyblue;
+  --van-rolling-text-color: white;
+  --van-rolling-text-font-size: 20px;
+  --van-rolling-text-gap: 6px;
+  --van-rolling-text-single-border-radius: 5px;
+  --van-rolling-text-single-width: 25px;
 }
 ```
 
@@ -209,10 +206,11 @@ rollingTextRef.value?.start();
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
 
-| 名称                               | 默认值    | 描述             |
-| ---------------------------------- | --------- | ---------------- |
-| --van-rolling-text-bg-color        | _inherit_ | 单个数位背景色   |
-| --van-rolling-text-color           | _white_   | 数字颜色         |
-| --van-rolling-text-gap             | _0px_     | 数位之间的间隔   |
-| --van-rolling-text-single-width    | _15px_    | 单个数位宽度     |
-| --van-rolling-text-single-border-r | _0px_     | 单个数位边框圆角 |
+| 名称 | 默认值 | 描述 |
+| --- | --- | --- |
+| --van-rolling-text-background | _inherit_ | 单个数位背景色 |
+| --van-rolling-text-color | _var(--van-text-color)_ | 数字颜色 |
+| --van-rolling-text-font-size | _var(--van-font-size-md)_ | 字体大小 |
+| --van-rolling-text-gap | _0px_ | 数位之间的间隔 |
+| --van-rolling-text-single-width | _15px_ | 单个数位宽度 |
+| --van-rolling-text-single-border-radius | _0px_ | 单个数位边框圆角 |
diff --git a/packages/vant/src/rolling-text/demo/index.vue b/packages/vant/src/rolling-text/demo/index.vue
index 496f5c7f6..f92e6b7b4 100644
--- a/packages/vant/src/rolling-text/demo/index.vue
+++ b/packages/vant/src/rolling-text/demo/index.vue
@@ -176,14 +176,11 @@ const reset = () => {
 }
 
 .my-rolling-text {
-  gap: 6px;
-
-  .van-roll-single {
-    color: white;
-    background: deepskyblue;
-    border-radius: 5px;
-    width: 25px;
-    font-size: 20px;
-  }
+  --van-rolling-text-background: deepskyblue;
+  --van-rolling-text-color: white;
+  --van-rolling-text-font-size: 20px;
+  --van-rolling-text-gap: 6px;
+  --van-rolling-text-single-border-radius: 5px;
+  --van-rolling-text-single-width: 25px;
 }
 </style>
diff --git a/packages/vant/src/rolling-text/index.less b/packages/vant/src/rolling-text/index.less
index b02164089..e15d7c677 100644
--- a/packages/vant/src/rolling-text/index.less
+++ b/packages/vant/src/rolling-text/index.less
@@ -1,68 +1,30 @@
 :root {
-  --van-rolling-text-bg-color: inherit;
-  --van-rolling-text-color: black;
+  --van-rolling-text-background: inherit;
+  --van-rolling-text-color: var(--van-text-color);
+  --van-rolling-text-font-size: var(--van-font-size-md);
   --van-rolling-text-gap: 0px;
   --van-rolling-text-single-width: 15px;
-  --van-rolling-text-single-border-r: 0px;
+  --van-rolling-text-single-border-radius: 0px;
 }
 
 .van-rolling-text {
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  gap: var(--van-rolling-text-gap);
-}
-
-.van-roll-single-down {
-  width: var(--van-rolling-text-single-width);
-  border-radius: var(--van-rolling-text-single-border-r);
-  background-color: var(--van-rolling-text-bg-color);
+  font-size: var(--van-rolling-text-font-size);
   color: var(--van-rolling-text-color);
-  overflow: hidden;
-  // 如果向下滚动，则起始是translate负值，到0
-  @keyframes van-down {
-    0% {
-      transform: translateY(var(--van-translate));
-    }
-    100% {
-      transform: translateY(0);
-    }
-  }
-
-  &__box {
-    overflow: hidden;
-    transform: translateY(var(--van-translate));
-  }
-
-  &__ani {
-    animation: van-down var(--van-duration) ease-in-out var(--van-delay);
-    animation-name: van-down;
-    animation-timing-function: ease-in-out;
-    animation-iteration-count: 1;
-    animation-duration: var(--van-duration);
-    animation-fill-mode: both;
-    animation-delay: var(--van-delay);
-  }
-
-  &__item {
-    text-align: center;
-  }
 }
 
+.van-roll-single-down,
 .van-roll-single-up {
+  margin-right: var(--van-rolling-text-gap);
   width: var(--van-rolling-text-single-width);
-  border-radius: var(--van-rolling-text-single-border-r);
-  background-color: var(--van-rolling-text-bg-color);
-  color: var(--van-rolling-text-color);
+  border-radius: var(--van-rolling-text-single-border-radius);
+  background: var(--van-rolling-text-background);
   overflow: hidden;
-  // 如果是向上翻滚，则起始是0，到translate负值
-  @keyframes van-up {
-    0% {
-      transform: translateY(0);
-    }
-    100% {
-      transform: translateY(var(--van-translate));
-    }
+
+  &:last-child {
+    margin-right: 0;
   }
 
   &__box {
@@ -73,13 +35,39 @@
     animation: van-up var(--van-duration) ease-in-out var(--van-delay);
     animation-iteration-count: 1;
     animation-fill-mode: both;
-    //animation-name: van-up;
-    //animation-timing-function: ease-in-out;
-    //animation-duration: var(--van-duration);
-    //animation-delay: var(--van-delay);
   }
 
   &__item {
     text-align: center;
   }
 }
+
+.van-roll-single-down {
+  &__box {
+    transform: translateY(var(--van-translate));
+  }
+
+  &__ani {
+    animation-name: van-down;
+  }
+}
+
+@keyframes van-down {
+  0% {
+    transform: translateY(var(--van-translate));
+  }
+
+  100% {
+    transform: translateY(0);
+  }
+}
+
+@keyframes van-up {
+  0% {
+    transform: translateY(0);
+  }
+
+  100% {
+    transform: translateY(var(--van-translate));
+  }
+}