css文字滚动

<p class="marquee">cccccccccccccccccccccccccccccccccccccccc</p>

 

.marquee {

  display: block;

  text-decoration: none;

  text-align: center;

  line-height: 1.5;

  margin: 20px 0px;

  background-image: -webkit-linear-gradient(

    left,

    #3498db,

    #f47920 10%,

    #d71345 20%,

    #f7acbc 30%,

    #ffd400 40%,

    #3498db 50%,

    #f47920 60%,

    #d71345 70%,

    #f7acbc 80%,

    #ffd400 90%,

    #3498db

  );

  color: transparent;

  -webkit-background-clip: text;

  background-size: 200% 100%;

  -webkit-animation: slide 2s infinite linear;

  animation: slide 5s infinite linear;

  font-size: 40px;

}

@keyframes slide {
                0%  {
                  background-position: 0 0;
                }
                100% {
                  background-position: -100% 0;
                }
            }