css3字体背景颜色跑马灯

页面效果

CSS

  .title {
            border: 0px;
            font-size: 200%;
            font-weight: bold;
            float: left;
            line-height: 1.5;
            width: 100%;
            padding-left: 5px;
            margin-top:0px;
            background: -webkit-linear-gradient(left,
            #ffffff,
            #ff0000 6.25%,
            #ff7d00 12.5%,
            #ffff00 18.75%,
            #00ff00 25%,
            #00ffff 31.25%,
            #0000ff 37.5%,
            #ff00ff 43.75%,
            #ffff00 50%,
            #ff0000 56.25%,
            #ff7d00 62.5%,
            #ffff00 68.75%,
            #00ff00 75%,
            #00ffff 81.25%,
            #0000ff 87.5%,
            #ff00ff 93.75%,
            #ffff00 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-size: 200% 100%;
            animation: masked-animation 7s infinite linear;
        }
        @keyframes masked-animation {
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: -100%, 0;
            }
        }

来源：oschina

链接：https://my.oschina.net/qinghuo111/blog/4454882