diff --git a/packages/base/src/page/Nav/CompanyNoticeBanner/__snapshots__/index.test.tsx.snap b/packages/base/src/page/Nav/CompanyNoticeBanner/__snapshots__/index.test.tsx.snap
index c51c161c90..11a4b50498 100644
--- a/packages/base/src/page/Nav/CompanyNoticeBanner/__snapshots__/index.test.tsx.snap
+++ b/packages/base/src/page/Nav/CompanyNoticeBanner/__snapshots__/index.test.tsx.snap
@@ -1,10 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`base/page/Nav/CompanyNoticeBanner expand button and detail modal should close detail modal when close button is clicked 1`] = `
+exports[`base/page/Nav/CompanyNoticeBanner marquee and detail modal should close detail modal when close button is clicked 1`] = `
 <body>
   <div>
     <div
-      class="css-1ap0jdm"
+      class="css-hot3fa"
     >
       <span
         class="notice-label"
@@ -34,18 +34,19 @@ exports[`base/page/Nav/CompanyNoticeBanner expand button and detail modal should
       </span>
       <div
         class="notice-content-area"
+        role="button"
+        tabindex="0"
       >
         <span
-          class="notice-text"
+          aria-hidden="true"
+          class="notice-measure"
         >
           test notice content
         </span>
         <span
-          class="notice-expand-btn"
-          role="button"
-          tabindex="0"
+          class="notice-text"
         >
-          查看全部
+          test notice content
         </span>
       </div>
     </div>
@@ -54,11 +55,9 @@ exports[`base/page/Nav/CompanyNoticeBanner expand button and detail modal should
     <div
       class="ant-modal-root"
     >
-      <div
-        class="ant-modal-mask"
-      />
       <div
         class="ant-modal-wrap"
+        style="display: none;"
         tabindex="-1"
       >
         <div
@@ -66,7 +65,7 @@ exports[`base/page/Nav/CompanyNoticeBanner expand button and detail modal should
           aria-modal="true"
           class="ant-modal basic-modal-wrapper css-vvpsbb"
           role="dialog"
-          style="width: 560px; transform-origin: NaNpx NaNpx;"
+          style="width: 560px; transform-origin: NaNpx NaNpx; display: none;"
         >
           <div
             aria-hidden="true"
@@ -141,11 +140,11 @@ exports[`base/page/Nav/CompanyNoticeBanner expand button and detail modal should
 </body>
 `;
 
-exports[`base/page/Nav/CompanyNoticeBanner expand button and detail modal should close detail modal when close button is clicked 2`] = `
+exports[`base/page/Nav/CompanyNoticeBanner marquee and detail modal should not show marquee animation when text does not overflow 1`] = `
 <body>
   <div>
     <div
-      class="css-1ap0jdm"
+      class="css-hot3fa"
     >
       <span
         class="notice-label"
@@ -175,18 +174,73 @@ exports[`base/page/Nav/CompanyNoticeBanner expand button and detail modal should
       </span>
       <div
         class="notice-content-area"
+        role="button"
+        tabindex="0"
       >
+        <span
+          aria-hidden="true"
+          class="notice-measure"
+        >
+          notice
+        </span>
         <span
           class="notice-text"
         >
-          test notice content
+          notice
         </span>
+      </div>
+    </div>
+  </div>
+</body>
+`;
+
+exports[`base/page/Nav/CompanyNoticeBanner marquee and detail modal should open detail modal via keyboard Enter on content area 1`] = `
+<body>
+  <div>
+    <div
+      class="css-hot3fa"
+    >
+      <span
+        class="notice-label"
+      >
         <span
-          class="notice-expand-btn"
-          role="button"
-          tabindex="0"
+          aria-label="notification"
+          class="anticon anticon-notification notice-label-icon"
+          role="img"
         >
-          查看全部
+          <svg
+            aria-hidden="true"
+            data-icon="notification"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M880 112c-3.8 0-7.7.7-11.6 2.3L292 345.9H128c-8.8 0-16 7.4-16 16.6v299c0 9.2 7.2 16.6 16 16.6h101.6c-3.7 11.6-5.6 23.9-5.6 36.4 0 65.9 53.8 119.5 120 119.5 55.4 0 102.1-37.6 115.9-88.4l408.6 164.2c3.9 1.5 7.8 2.3 11.6 2.3 16.9 0 32-14.2 32-33.2V145.2C912 126.2 897 112 880 112zM344 762.3c-26.5 0-48-21.4-48-47.8 0-11.2 3.9-21.9 11-30.4l84.9 34.1c-2 24.6-22.7 44.1-47.9 44.1z"
+            />
+          </svg>
+        </span>
+        <span>
+          系统公告
+        </span>
+      </span>
+      <div
+        class="notice-content-area"
+        role="button"
+        tabindex="0"
+      >
+        <span
+          aria-hidden="true"
+          class="notice-measure"
+        >
+          keyboard test notice
+        </span>
+        <span
+          class="notice-text"
+        >
+          keyboard test notice
         </span>
       </div>
     </div>
@@ -195,9 +249,11 @@ exports[`base/page/Nav/CompanyNoticeBanner expand button and detail modal should
     <div
       class="ant-modal-root"
     >
+      <div
+        class="ant-modal-mask"
+      />
       <div
         class="ant-modal-wrap"
-        style="display: none;"
         tabindex="-1"
       >
         <div
@@ -205,7 +261,7 @@ exports[`base/page/Nav/CompanyNoticeBanner expand button and detail modal should
           aria-modal="true"
           class="ant-modal basic-modal-wrapper css-vvpsbb"
           role="dialog"
-          style="width: 560px; transform-origin: NaNpx NaNpx; display: none;"
+          style="width: 560px;"
         >
           <div
             aria-hidden="true"
@@ -252,7 +308,7 @@ exports[`base/page/Nav/CompanyNoticeBanner expand button and detail modal should
               <div
                 class="css-pnl6ml"
               >
-                test notice content
+                keyboard test notice
               </div>
             </div>
             <div
@@ -280,11 +336,11 @@ exports[`base/page/Nav/CompanyNoticeBanner expand button and detail modal should
 </body>
 `;
 
-exports[`base/page/Nav/CompanyNoticeBanner expand button and detail modal should not show expand button when text does not overflow 1`] = `
+exports[`base/page/Nav/CompanyNoticeBanner marquee and detail modal should open detail modal when content area is clicked 1`] = `
 <body>
   <div>
     <div
-      class="css-1ap0jdm"
+      class="css-hot3fa"
     >
       <span
         class="notice-label"
@@ -314,64 +370,19 @@ exports[`base/page/Nav/CompanyNoticeBanner expand button and detail modal should
       </span>
       <div
         class="notice-content-area"
+        role="button"
+        tabindex="0"
       >
         <span
-          class="notice-text"
+          aria-hidden="true"
+          class="notice-measure"
         >
-          notice
-        </span>
-      </div>
-    </div>
-  </div>
-</body>
-`;
-
-exports[`base/page/Nav/CompanyNoticeBanner expand button and detail modal should open detail modal via keyboard Enter on expand button 1`] = `
-<body>
-  <div>
-    <div
-      class="css-1ap0jdm"
-    >
-      <span
-        class="notice-label"
-      >
-        <span
-          aria-label="notification"
-          class="anticon anticon-notification notice-label-icon"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="notification"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M880 112c-3.8 0-7.7.7-11.6 2.3L292 345.9H128c-8.8 0-16 7.4-16 16.6v299c0 9.2 7.2 16.6 16 16.6h101.6c-3.7 11.6-5.6 23.9-5.6 36.4 0 65.9 53.8 119.5 120 119.5 55.4 0 102.1-37.6 115.9-88.4l408.6 164.2c3.9 1.5 7.8 2.3 11.6 2.3 16.9 0 32-14.2 32-33.2V145.2C912 126.2 897 112 880 112zM344 762.3c-26.5 0-48-21.4-48-47.8 0-11.2 3.9-21.9 11-30.4l84.9 34.1c-2 24.6-22.7 44.1-47.9 44.1z"
-            />
-          </svg>
-        </span>
-        <span>
-          系统公告
+          test notice content
         </span>
-      </span>
-      <div
-        class="notice-content-area"
-      >
         <span
           class="notice-text"
         >
-          keyboard test notice
-        </span>
-        <span
-          class="notice-expand-btn"
-          role="button"
-          tabindex="0"
-        >
-          查看全部
+          test notice content
         </span>
       </div>
     </div>
@@ -392,7 +403,7 @@ exports[`base/page/Nav/CompanyNoticeBanner expand button and detail modal should
           aria-modal="true"
           class="ant-modal basic-modal-wrapper css-vvpsbb"
           role="dialog"
-          style="width: 560px;"
+          style="width: 560px; transform-origin: NaNpx NaNpx;"
         >
           <div
             aria-hidden="true"
@@ -439,7 +450,7 @@ exports[`base/page/Nav/CompanyNoticeBanner expand button and detail modal should
               <div
                 class="css-pnl6ml"
               >
-                keyboard test notice
+                test notice content
               </div>
             </div>
             <div
@@ -467,11 +478,11 @@ exports[`base/page/Nav/CompanyNoticeBanner expand button and detail modal should
 </body>
 `;
 
-exports[`base/page/Nav/CompanyNoticeBanner expand button and detail modal should open detail modal when expand button is clicked 1`] = `
+exports[`base/page/Nav/CompanyNoticeBanner marquee and detail modal should show expand button when prefers reduced motion and text overflows 1`] = `
 <body>
   <div>
     <div
-      class="css-1ap0jdm"
+      class="css-hot3fa"
     >
       <span
         class="notice-label"
@@ -501,11 +512,26 @@ exports[`base/page/Nav/CompanyNoticeBanner expand button and detail modal should
       </span>
       <div
         class="notice-content-area"
+        role="button"
+        tabindex="0"
       >
         <span
-          class="notice-text"
+          aria-hidden="true"
+          class="notice-measure"
+        >
+          reduced motion notice content
+        </span>
+        <span
+          class="notice-text is-ellipsis"
+        >
+          reduced motion notice content
+        </span>
+        <span
+          class="notice-expand-btn"
+          role="button"
+          tabindex="0"
         >
-          这是一条非常长的公告内容，需要展开才能查看完整信息，测试展开按钮功能是否正常工作
+          查看全部
         </span>
       </div>
     </div>
@@ -513,11 +539,11 @@ exports[`base/page/Nav/CompanyNoticeBanner expand button and detail modal should
 </body>
 `;
 
-exports[`base/page/Nav/CompanyNoticeBanner expand button and detail modal should show expand button when text overflows and open detail modal on click 1`] = `
+exports[`base/page/Nav/CompanyNoticeBanner marquee and detail modal should show marquee animation when text overflows 1`] = `
 <body>
   <div>
     <div
-      class="css-1ap0jdm"
+      class="css-hot3fa"
     >
       <span
         class="notice-label"
@@ -547,12 +573,31 @@ exports[`base/page/Nav/CompanyNoticeBanner expand button and detail modal should
       </span>
       <div
         class="notice-content-area"
+        role="button"
+        tabindex="0"
       >
         <span
-          class="notice-text"
+          aria-hidden="true"
+          class="notice-measure"
         >
           notice
         </span>
+        <div
+          class="notice-marquee-track notice-marquee-animate"
+          style="--marquee-duration: 20.8s;"
+        >
+          <span
+            class="notice-marquee-text"
+          >
+            notice
+          </span>
+          <span
+            aria-hidden="true"
+            class="notice-marquee-text duplicate"
+          >
+            notice
+          </span>
+        </div>
       </div>
     </div>
   </div>
@@ -569,7 +614,7 @@ exports[`base/page/Nav/CompanyNoticeBanner should render banner when notice data
 <body>
   <div>
     <div
-      class="css-1ap0jdm"
+      class="css-hot3fa"
     >
       <span
         class="notice-label"
@@ -599,7 +644,15 @@ exports[`base/page/Nav/CompanyNoticeBanner should render banner when notice data
       </span>
       <div
         class="notice-content-area"
+        role="button"
+        tabindex="0"
       >
+        <span
+          aria-hidden="true"
+          class="notice-measure"
+        >
+          notice
+        </span>
         <span
           class="notice-text"
         >
diff --git a/packages/base/src/page/Nav/CompanyNoticeBanner/index.test.tsx b/packages/base/src/page/Nav/CompanyNoticeBanner/index.test.tsx
index 0e3081c260..1e092f86ef 100644
--- a/packages/base/src/page/Nav/CompanyNoticeBanner/index.test.tsx
+++ b/packages/base/src/page/Nav/CompanyNoticeBanner/index.test.tsx
@@ -4,15 +4,53 @@ import dms from '@actiontech/shared/lib/testUtil/mockApi/base/global';
 import { createSpySuccessResponse } from '@actiontech/shared/lib/testUtil/mockApi';
 import CompanyNoticeBanner from '.';
 
+const mockMatchMedia = (matches = false) => {
+  Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: jest.fn().mockImplementation((query: string) => ({
+      matches: query === '(prefers-reduced-motion: reduce)' ? matches : false,
+      media: query,
+      onchange: null,
+      addEventListener: jest.fn(),
+      removeEventListener: jest.fn(),
+      dispatchEvent: jest.fn()
+    }))
+  });
+};
+
+const triggerOverflow = (
+  container: HTMLElement,
+  textWidth = 800,
+  containerWidth = 200
+) => {
+  Object.defineProperty(container, 'clientWidth', {
+    configurable: true,
+    get: () => containerWidth
+  });
+
+  const measureEl = container.querySelector('.notice-measure');
+  if (measureEl) {
+    Object.defineProperty(measureEl, 'scrollWidth', {
+      configurable: true,
+      get: () => textWidth
+    });
+  }
+};
+
 describe('base/page/Nav/CompanyNoticeBanner', () => {
   let requestGetCompanyNotice: jest.SpyInstance;
+  let resizeCallback: (() => void) | null = null;
 
   beforeEach(() => {
     jest.useFakeTimers();
+    mockMatchMedia(false);
     requestGetCompanyNotice = dms.getCompanyNotice();
+    resizeCallback = null;
 
-    // Mock ResizeObserver
     global.ResizeObserver = class ResizeObserver {
+      constructor(cb: ResizeObserverCallback) {
+        resizeCallback = () => cb([], this as unknown as ResizeObserver);
+      }
       observe = jest.fn();
       unobserve = jest.fn();
       disconnect = jest.fn();
@@ -40,7 +78,9 @@ describe('base/page/Nav/CompanyNoticeBanner', () => {
     await act(async () => jest.advanceTimersByTime(3300));
 
     expect(screen.getByText('系统公告')).toBeInTheDocument();
-    expect(screen.getByText('notice')).toBeInTheDocument();
+    expect(baseElement.querySelector('.notice-text')?.textContent).toBe(
+      'notice'
+    );
     expect(baseElement).toMatchSnapshot();
   });
 
@@ -56,86 +96,65 @@ describe('base/page/Nav/CompanyNoticeBanner', () => {
 
   it('should poll for notice every 60 seconds', async () => {
     baseSuperRender(<CompanyNoticeBanner />);
-    // Initial request fires after 3000ms timer resolves
     await act(async () => jest.advanceTimersByTime(3300));
     expect(requestGetCompanyNotice).toHaveBeenCalledTimes(1);
 
-    // After response resolves, pollingInterval timer (60s) is registered
-    // Advance 60s to trigger second poll, plus 3s for response to resolve
     await act(async () => jest.advanceTimersByTime(60 * 1000 + 3300));
     expect(requestGetCompanyNotice).toHaveBeenCalledTimes(2);
   });
 
-  describe('expand button and detail modal', () => {
-    it('should not show expand button when text does not overflow', async () => {
+  describe('marquee and detail modal', () => {
+    it('should not show marquee animation when text does not overflow', async () => {
       const { baseElement } = baseSuperRender(<CompanyNoticeBanner />);
       await act(async () => jest.advanceTimersByTime(3300));
 
-      expect(screen.getByText('notice')).toBeInTheDocument();
+      expect(baseElement.querySelector('.notice-text')?.textContent).toBe(
+        'notice'
+      );
+      expect(
+        baseElement.querySelector('.notice-marquee-animate')
+      ).not.toBeInTheDocument();
       expect(screen.queryByText('查看全部')).not.toBeInTheDocument();
       expect(baseElement).toMatchSnapshot();
     });
 
-    it('should show expand button when text overflows and open detail modal on click', async () => {
+    it('should show marquee animation when text overflows', async () => {
       const { baseElement } = baseSuperRender(<CompanyNoticeBanner />);
       await act(async () => jest.advanceTimersByTime(3300));
 
-      // Simulate text overflow by manipulating scrollWidth > clientWidth
-      const textEl = screen.getByText('notice');
-      Object.defineProperty(textEl, 'scrollWidth', {
-        configurable: true,
-        get: () => 500
-      });
-      Object.defineProperty(textEl, 'clientWidth', {
-        configurable: true,
-        get: () => 200
-      });
+      const contentArea = baseElement.querySelector(
+        '.notice-content-area'
+      ) as HTMLElement;
+      triggerOverflow(contentArea);
 
-      // Trigger ResizeObserver callback by firing the checkOverflow again
-      act(() => {
-        window.dispatchEvent(new Event('resize'));
-      });
-
-      // Manually trigger the overflow check via re-render
-      await act(async () => jest.advanceTimersByTime(500));
+      if (resizeCallback) {
+        act(resizeCallback);
+      }
+      await act(async () => jest.advanceTimersByTime(200));
 
+      expect(
+        baseElement.querySelector('.notice-marquee-animate')
+      ).toBeInTheDocument();
+      expect(screen.queryByText('查看全部')).not.toBeInTheDocument();
       expect(baseElement).toMatchSnapshot();
     });
 
-    it('should open detail modal when expand button is clicked', async () => {
-      const longNotice =
-        '这是一条非常长的公告内容，需要展开才能查看完整信息，测试展开按钮功能是否正常工作';
+    it('should open detail modal when content area is clicked', async () => {
       requestGetCompanyNotice.mockImplementation(() =>
-        createSpySuccessResponse({ data: { notice_str: longNotice } })
+        createSpySuccessResponse({
+          data: { notice_str: 'test notice content' }
+        })
       );
 
       const { baseElement } = baseSuperRender(<CompanyNoticeBanner />);
       await act(async () => jest.advanceTimersByTime(3300));
 
-      expect(screen.getByText(longNotice)).toBeInTheDocument();
-
-      // Simulate overflow to show expand button
-      const textEl = screen.getByText(longNotice);
-      Object.defineProperty(textEl, 'scrollWidth', {
-        configurable: true,
-        get: () => 1000
-      });
-      Object.defineProperty(textEl, 'clientWidth', {
-        configurable: true,
-        get: () => 300
-      });
-
-      // Trigger ResizeObserver by dispatching a custom event to the element
-      act(() => {
-        // Force re-check by triggering the observer
-        const resizeObserverCallbacks = (global.ResizeObserver as any).mock
-          ?.instances?.[0]?.observe?.mock?.calls;
-        if (resizeObserverCallbacks) {
-          // observer is already set up, check via checkOverflow
-        }
-      });
-
+      fireEvent.click(baseElement.querySelector('.notice-content-area')!);
       await act(async () => jest.advanceTimersByTime(200));
+
+      expect(
+        screen.getAllByText('test notice content').length
+      ).toBeGreaterThanOrEqual(1);
       expect(baseElement).toMatchSnapshot();
     });
 
@@ -146,95 +165,61 @@ describe('base/page/Nav/CompanyNoticeBanner', () => {
         })
       );
 
-      // Override ResizeObserver to report overflow immediately
-      let resizeCallback: (() => void) | null = null;
-      global.ResizeObserver = class ResizeObserver {
-        constructor(cb: ResizeObserverCallback) {
-          resizeCallback = () => cb([], this as unknown as ResizeObserver);
-        }
-        observe = jest.fn(() => {
-          // Immediately call the callback to simulate overflow detection
-        });
-        unobserve = jest.fn();
-        disconnect = jest.fn();
-      };
-
       const { baseElement } = baseSuperRender(<CompanyNoticeBanner />);
       await act(async () => jest.advanceTimersByTime(3300));
 
-      const textEl = screen.getByText('test notice content');
-      Object.defineProperty(textEl, 'scrollWidth', {
-        configurable: true,
-        get: () => 800
-      });
-      Object.defineProperty(textEl, 'clientWidth', {
-        configurable: true,
-        get: () => 200
-      });
-
-      if (resizeCallback) {
-        act(resizeCallback);
-      }
+      fireEvent.click(baseElement.querySelector('.notice-content-area')!);
+      await act(async () => jest.advanceTimersByTime(200));
 
+      fireEvent.click(screen.getByText('关 闭'));
       await act(async () => jest.advanceTimersByTime(200));
+      expect(baseElement).toMatchSnapshot();
+    });
 
-      const expandBtn = screen.queryByText('查看全部');
-      if (expandBtn) {
-        fireEvent.click(expandBtn);
-        await act(async () => jest.advanceTimersByTime(200));
+    it('should open detail modal via keyboard Enter on content area', async () => {
+      requestGetCompanyNotice.mockImplementation(() =>
+        createSpySuccessResponse({
+          data: { notice_str: 'keyboard test notice' }
+        })
+      );
 
-        expect(
-          screen.getAllByText('test notice content').length
-        ).toBeGreaterThanOrEqual(1);
-        expect(baseElement).toMatchSnapshot();
+      const { baseElement } = baseSuperRender(<CompanyNoticeBanner />);
+      await act(async () => jest.advanceTimersByTime(3300));
 
-        fireEvent.click(screen.getByText('关 闭'));
-        await act(async () => jest.advanceTimersByTime(200));
-        expect(baseElement).toMatchSnapshot();
-      }
+      fireEvent.keyDown(baseElement.querySelector('.notice-content-area')!, {
+        key: 'Enter'
+      });
+      await act(async () => jest.advanceTimersByTime(200));
+      expect(baseElement).toMatchSnapshot();
     });
 
-    it('should open detail modal via keyboard Enter on expand button', async () => {
+    it('should show expand button when prefers reduced motion and text overflows', async () => {
+      mockMatchMedia(true);
+
       requestGetCompanyNotice.mockImplementation(() =>
         createSpySuccessResponse({
-          data: { notice_str: 'keyboard test notice' }
+          data: { notice_str: 'reduced motion notice content' }
         })
       );
 
-      let resizeCallback: (() => void) | null = null;
-      global.ResizeObserver = class ResizeObserver {
-        constructor(cb: ResizeObserverCallback) {
-          resizeCallback = () => cb([], this as unknown as ResizeObserver);
-        }
-        observe = jest.fn();
-        unobserve = jest.fn();
-        disconnect = jest.fn();
-      };
-
       const { baseElement } = baseSuperRender(<CompanyNoticeBanner />);
       await act(async () => jest.advanceTimersByTime(3300));
 
-      const textEl = screen.getByText('keyboard test notice');
-      Object.defineProperty(textEl, 'scrollWidth', {
-        configurable: true,
-        get: () => 800
-      });
-      Object.defineProperty(textEl, 'clientWidth', {
-        configurable: true,
-        get: () => 200
-      });
+      const contentArea = baseElement.querySelector(
+        '.notice-content-area'
+      ) as HTMLElement;
+      triggerOverflow(contentArea);
 
       if (resizeCallback) {
         act(resizeCallback);
       }
       await act(async () => jest.advanceTimersByTime(200));
 
-      const expandBtn = screen.queryByText('查看全部');
-      if (expandBtn) {
-        fireEvent.keyDown(expandBtn, { key: 'Enter' });
-        await act(async () => jest.advanceTimersByTime(200));
-        expect(baseElement).toMatchSnapshot();
-      }
+      expect(
+        baseElement.querySelector('.notice-marquee-animate')
+      ).not.toBeInTheDocument();
+      expect(screen.getByText('查看全部')).toBeInTheDocument();
+      expect(baseElement).toMatchSnapshot();
     });
   });
 });
diff --git a/packages/base/src/page/Nav/CompanyNoticeBanner/index.tsx b/packages/base/src/page/Nav/CompanyNoticeBanner/index.tsx
index 4b527f102b..5ca60ba526 100644
--- a/packages/base/src/page/Nav/CompanyNoticeBanner/index.tsx
+++ b/packages/base/src/page/Nav/CompanyNoticeBanner/index.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useRequest } from 'ahooks';
 import { useTranslation } from 'react-i18next';
 import { NotificationFilled } from '@ant-design/icons';
@@ -10,10 +10,21 @@ import {
   CompanyNoticeDetailContentStyleWrapper
 } from './style';
 
+const MARQUEE_GAP = 32;
+const MARQUEE_MIN_DURATION = 8;
+const MARQUEE_MAX_DURATION = 60;
+const MARQUEE_SPEED = 40;
+
+const clamp = (min: number, max: number, value: number) =>
+  Math.min(max, Math.max(min, value));
+
 const CompanyNoticeBanner: React.FC = () => {
   const { t } = useTranslation();
-  const textRef = useRef<HTMLSpanElement>(null);
-  const [needExpand, setNeedExpand] = useState(false);
+  const contentAreaRef = useRef<HTMLDivElement>(null);
+  const measureRef = useRef<HTMLSpanElement>(null);
+  const [shouldMarquee, setShouldMarquee] = useState(false);
+  const [marqueeDuration, setMarqueeDuration] = useState(MARQUEE_MIN_DURATION);
+  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);
   const [detailModalOpen, setDetailModalOpen] = useState(false);
 
   const { data: noticeStr } = useRequest(
@@ -30,6 +41,11 @@ const CompanyNoticeBanner: React.FC = () => {
     }
   );
 
+  const displayNoticeStr = useMemo(
+    () => (noticeStr ? noticeStr.replace(/\s+/g, ' ').trim() : ''),
+    [noticeStr]
+  );
+
   useEffect(() => {
     document.documentElement.style.setProperty(
       '--notice-banner-height',
@@ -44,24 +60,74 @@ const CompanyNoticeBanner: React.FC = () => {
   }, [noticeStr]);
 
   useEffect(() => {
-    const el = textRef.current;
-    if (!el || !noticeStr) return;
+    const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
+    setPrefersReducedMotion(mq.matches);
+    const handler = (event: MediaQueryListEvent) => {
+      setPrefersReducedMotion(event.matches);
+    };
+    mq.addEventListener('change', handler);
+    return () => mq.removeEventListener('change', handler);
+  }, []);
+
+  useEffect(() => {
+    const container = contentAreaRef.current;
+    const measureEl = measureRef.current;
+    if (!container || !measureEl || !displayNoticeStr) return;
 
     const checkOverflow = () => {
-      setNeedExpand(el.scrollWidth > el.clientWidth);
+      const textWidth = measureEl.scrollWidth;
+      const containerWidth = container.clientWidth;
+      const overflow = textWidth > containerWidth;
+      setShouldMarquee(overflow);
+      if (overflow) {
+        setMarqueeDuration(
+          clamp(
+            MARQUEE_MIN_DURATION,
+            MARQUEE_MAX_DURATION,
+            (textWidth + MARQUEE_GAP) / MARQUEE_SPEED
+          )
+        );
+      }
     };
 
     checkOverflow();
 
     const observer = new ResizeObserver(checkOverflow);
-    observer.observe(el);
+    observer.observe(container);
+    observer.observe(measureEl);
     return () => observer.disconnect();
-  }, [noticeStr]);
+  }, [displayNoticeStr]);
+
+  const openDetailModal = useCallback(() => {
+    setDetailModalOpen(true);
+  }, []);
+
+  const handleContentKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        openDetailModal();
+      }
+    },
+    [openDetailModal]
+  );
+
+  const handleExpandKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLSpanElement>) => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        openDetailModal();
+      }
+    },
+    [openDetailModal]
+  );
 
   if (!noticeStr) {
     return null;
   }
 
+  const useMarquee = shouldMarquee && !prefersReducedMotion;
+
   return (
     <>
       <CompanyNoticeBannerStyleWrapper>
@@ -69,25 +135,56 @@ const CompanyNoticeBanner: React.FC = () => {
           <NotificationFilled className="notice-label-icon" />
           <span>{t('dmsSystem.notification.title')}</span>
         </span>
-        <div className="notice-content-area">
-          <span ref={textRef} className="notice-text">
-            {noticeStr}
+        <div
+          ref={contentAreaRef}
+          className="notice-content-area"
+          role="button"
+          tabIndex={0}
+          onClick={openDetailModal}
+          onKeyDown={handleContentKeyDown}
+        >
+          <span ref={measureRef} className="notice-measure" aria-hidden="true">
+            {displayNoticeStr}
           </span>
-          {needExpand && (
-            <span
-              className="notice-expand-btn"
-              role="button"
-              tabIndex={0}
-              onClick={() => setDetailModalOpen(true)}
-              onKeyDown={(e) => {
-                if (e.key === 'Enter' || e.key === ' ') {
-                  e.preventDefault();
-                  setDetailModalOpen(true);
-                }
-              }}
+          {useMarquee ? (
+            <div
+              className="notice-marquee-track notice-marquee-animate"
+              style={
+                {
+                  '--marquee-duration': `${marqueeDuration}s`
+                } as React.CSSProperties
+              }
             >
-              {t('dmsSystem.notification.viewFullContent')}
-            </span>
+              <span className="notice-marquee-text">{displayNoticeStr}</span>
+              <span
+                className="notice-marquee-text duplicate"
+                aria-hidden="true"
+              >
+                {displayNoticeStr}
+              </span>
+            </div>
+          ) : (
+            <>
+              <span
+                className={`notice-text${shouldMarquee ? ' is-ellipsis' : ''}`}
+              >
+                {displayNoticeStr}
+              </span>
+              {shouldMarquee && prefersReducedMotion && (
+                <span
+                  className="notice-expand-btn"
+                  role="button"
+                  tabIndex={0}
+                  onClick={(event) => {
+                    event.stopPropagation();
+                    openDetailModal();
+                  }}
+                  onKeyDown={handleExpandKeyDown}
+                >
+                  {t('dmsSystem.notification.viewFullContent')}
+                </span>
+              )}
+            </>
           )}
         </div>
       </CompanyNoticeBannerStyleWrapper>
diff --git a/packages/base/src/page/Nav/CompanyNoticeBanner/style.ts b/packages/base/src/page/Nav/CompanyNoticeBanner/style.ts
index 62c8a46370..68ec9b8d9c 100644
--- a/packages/base/src/page/Nav/CompanyNoticeBanner/style.ts
+++ b/packages/base/src/page/Nav/CompanyNoticeBanner/style.ts
@@ -1,4 +1,15 @@
-import { styled } from '@mui/material/styles';
+import { styled, keyframes } from '@mui/material/styles';
+
+const MARQUEE_GAP = 32;
+
+const noticeMarquee = keyframes`
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(calc(-50% - ${MARQUEE_GAP}px / 2));
+  }
+`;
 
 export const CompanyNoticeBannerStyleWrapper = styled('div')`
   position: fixed;
@@ -40,12 +51,24 @@ export const CompanyNoticeBannerStyleWrapper = styled('div')`
   }
 
   .notice-content-area {
+    position: relative;
     flex: 1;
     min-width: 0;
     margin-left: 12px;
     display: flex;
     align-items: center;
     gap: 8px;
+    overflow: hidden;
+    cursor: pointer;
+  }
+
+  .notice-measure {
+    position: absolute;
+    visibility: hidden;
+    white-space: nowrap;
+    pointer-events: none;
+    font-size: 13px;
+    line-height: 1.5;
   }
 
   .notice-text {
@@ -55,8 +78,36 @@ export const CompanyNoticeBannerStyleWrapper = styled('div')`
     font-size: 13px;
     line-height: 1.5;
     overflow: hidden;
-    text-overflow: ellipsis;
     white-space: nowrap;
+
+    &.is-ellipsis {
+      text-overflow: ellipsis;
+    }
+  }
+
+  .notice-marquee-track {
+    display: inline-flex;
+    align-items: center;
+    white-space: nowrap;
+    gap: ${MARQUEE_GAP}px;
+    flex-shrink: 0;
+    will-change: transform;
+  }
+
+  .notice-marquee-animate {
+    animation: ${noticeMarquee} var(--marquee-duration, 10s) linear infinite;
+  }
+
+  .notice-content-area:hover .notice-marquee-animate {
+    animation-play-state: paused;
+  }
+
+  .notice-marquee-text {
+    color: ${({ theme }) => theme.sharedTheme.uiToken.colorTextBase};
+    font-size: 13px;
+    line-height: 1.5;
+    white-space: nowrap;
+    flex-shrink: 0;
   }
 
   .notice-expand-btn {
@@ -71,6 +122,12 @@ export const CompanyNoticeBannerStyleWrapper = styled('div')`
       text-decoration: underline;
     }
   }
+
+  @media (prefers-reduced-motion: reduce) {
+    .notice-marquee-animate {
+      animation: none;
+    }
+  }
 `;
 
 export const CompanyNoticeDetailContentStyleWrapper = styled('div')`
