微件:轮播文字条css

<style> .scroll {

 position: relative;
 display: flex;
 width: 100%;
 overflow: hidden;
 background-image: linear-gradient(90deg, transparent, #fff 20%, #fff 80%, transparent),
                   radial-gradient(circle at center, transparent, #fff 0.1, transparent 0.5);
 -webkit-background-image: linear-gradient(90deg, transparent, #fff 20%, #fff 80%, transparent),
                           radial-gradient(circle at center, transparent, #fff 0.1, transparent 0.5);
 background-opacity: 0.7;
 -webkit-background-opacity: 0.7;

}

.scroll div {

 white-space: nowrap;
 animation: animate var(--t) linear infinite;
 animation-delay: calc(var(--t) * -1);

}

.scroll div:nth-child(2) {

 animation: animate2 var(--t) linear infinite;
 animation-delay: calc(var(--t) / -2);

}

@keyframes animate {

 0% {
   transform: translateX(100%);
 }
 100% {
   transform: translateX(-100%);
 }

}

@keyframes animate2 {

 0% {
   transform: translateX(0);
 }
 100% {
   transform: translateX(-200%);
 }

}

.scroll div span {

 display: inline-flex;
 margin: 10px;
 background-color: #333;
 color: #fff;
 padding: 5px 10px;
 border-radius: 5px;
 cursor: pointer;
 letter-spacing: .2em;
 text-transform: uppercase;
 transition: .5s;

}

.scroll div span:hover {

 background-color: #4caf50;

}

/* 链接颜色 */ a {

   color: #ffffff; /* 白色 */

} </style>