CSS 动态渐变色字体、渐变背景

.ys{
    font-weight: 600;
    font-size: 16px;
    font-family: "黑体";
    color: #8c888b;
    background: -webkit-linear-gradient(45deg, #70f7fe, #fbd7c6, #fdefac, #bfb5dd, #bed5f5);

    color: transparent;
    /*设置字体颜色透明*/
    -webkit-background-clip: text;
    /*背景裁剪为文本形式*/
    animation: ran 10s linear infinite;
    /*动态10s展示*/
}

@keyframes ran {
    from {
        backgroud-position: 0 0;
    }
    to {
        background-position: 2000px 0;
    }
}

 背景色渐变

.gradient{ 
background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%); 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#ffffff)); 
background: -webkit-linear-gradient(top, #000000 0%,#ffffff 100%); 
background: -o-linear-gradient(top, #000000 0%,#ffffff 100%); 
background: -ms-linear-gradient(top, #000000 0%,#ffffff 100%); 
background: linear-gradient(to bottom, #000000 0%,#ffffff 100%); 
} 

ie中使用 滤镜：filter （linear-gradient 在 ie9 以下是不支持的，所以对于 ie6 - ie8 我们可以使用滤镜来解决，代码如下： ）

.gradient{ 
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff',GradientType=0 ); 
} 
//GradientType=0垂直渐变GradientType=1横向渐变