[分享]css3文字渐变滚动

CSS3文字渐变滚动是一种让文字在页面中渐变滚动的效果。这种效果可以为网页增加一些动态感，让页面更具有视觉冲击力。要实现CSS3文字渐变滚动，我们需要用到CSS3中的渐变（Gradient）和动画（A...

CSS3文字渐变滚动是一种让文字在页面中渐变滚动的效果。这种效果可以为网页增加一些动态感，让页面更具有视觉冲击力。

要实现CSS3文字渐变滚动，我们需要用到CSS3中的渐变（Gradient）和动画（Animation）属性。

.gradient{
    background: -webkit-linear-gradient(left, #f00, #00f); /* Safari 5.1-6.0 */
    background: -moz-linear-gradient(left, #f00, #00f); /* Firefox 3.6-15 */
    background: linear-gradient(to right, #f00, #00f); /* 标准语法 */
}

@keyframes scroll{
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-100%);
    }
}

.scroll{
    animation: scroll 5s linear infinite;
} 

在上面的代码中，我们首先定义了一个线性渐变，将红色渐变到蓝色。然后定义了一个keyframes动画，将文字向上移动100%的距离，达到滚动的效果。

最后，我们将两个效果结合在一起，将渐变应用于文字上，并将动画应用于文字所在的元素上，实现文字的渐变滚动。