/* 自定义属性，带有过度效果 */
 @property --a {
     syntax: '<angle>';
     inherits: false;
     initial-value: 0deg;
 }

 ::-webkit-scrollbar {
     width: 0;
 }

 * {
     margin: 0;
     padding: 0;
 }

 main {
     width: 100vw;
     height: 100vh;
     background-color: #cecece;
     position: relative;
 }

 .box {
     width: 100%;
     height: 250px;
     background-color: #000000;
     overflow: hidden;
 }

 /*背景不参与旋转，就只能为纯色*/
 .bg-box {
     width: 100%;
     height: 100%;
     background-color: transparent;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 /* 环绕可以考虑全屏还是跟随字体 */
 .surround-box {
     width: 100%;
     height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     border-radius: 3px;
     animation: surroundAnimate 5s linear 0s infinite normal none;
     animation-name: xiaomaomi-empty;
 }

 @keyframes surroundAnimate {
     0% {
         --a: 0deg;
     }

     100% {
         --a: 360deg;
     }
 }


 .surround-mask-box {
     width: calc(100% - 12px);
     height: calc(100% - 12px);
     background-color: #000;
     overflow: hidden;
 }

 .rotate-box {
     width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
 }

 /* 字体大小必须在行级控制 */
 .text-box {
     display: inline-flex;
     justify-content: flex-end;
     align-items: center;
     white-space: nowrap;
     transform: translateX(100vw);
     color: #fff;
     animation: marquee 10s linear 0s infinite normal none;
 }

 @keyframes colorChange {
     0% {
         color: white;
         filter: blur(1px) hue-rotate(0deg);
         text-shadow:
             0 0 10px #00b3ff,
             0 0 20px #00b3ff,
             0 0 40px #00b3ff,
             0 0 80px #00b3ff,
             0 0 120px #00b3ff,
             0 0 200px #00b3ff;
     }

     25% {
         color: white;
         filter: blur(1px) hue-rotate(0deg);
         text-shadow:
             0 0 10px #00b3ff,
             0 0 20px #00b3ff,
             0 0 40px #00b3ff,
             0 0 80px #00b3ff,
             0 0 120px #00b3ff;
     }


     50% {
         color: white;
         filter: blur(1px) hue-rotate(120deg);
         text-shadow:
             0 0 10px #00b3ff,
             0 0 20px #00b3ff,
             0 0 40px #00b3ff,
             0 0 80px #00b3ff,
             0 0 120px #00b3ff,
             0 0 200px #00b3ff;
     }

     75% {
         color: white;
         filter: blur(1px) hue-rotate(240deg);
         text-shadow:
             0 0 10px #00b3ff,
             0 0 20px #00b3ff,
             0 0 40px #00b3ff,
             0 0 80px #00b3ff,
             0 0 120px #00b3ff;
     }

     100% {
         color: white;
         filter: blur(1px) hue-rotate(360deg);
         text-shadow:
             0 0 10px #00b3ff,
             0 0 20px #00b3ff,
             0 0 40px #00b3ff,
             0 0 80px #00b3ff,
             0 0 120px #00b3ff,
             0 0 200px #00b3ff;
     }
 }

 .bold {
     font-weight: bolder;
 }

 @keyframes color-polling {
     from {
         background-position: 0 0;
     }

     to {
         background-position: -200%, 0;
     }
 }