css3文字向上走动

CSS3的文字向上走动效果非常炫酷，可以让网页内容显得生动有趣。下面我们来学习一下实现此效果的方法。

html {
    height: 100%;
}
body {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Arial,sans-serif;
    font-weight: bold;
    font-size: 3em;
}
h1 {
    background: linear-gradient(to top,#00FFCC 50%,white 50%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    animation: slide-up 5s linear infinite;
    -webkit-animation: slide-up 5s linear infinite;
}
@keyframes slide-up {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-100%);
    }
}
@-webkit-keyframes slide-up {
    0% {
        -webkit-transform: translateY(0);
    }
    100% {
        -webkit-transform: translateY(-100%);
    }
}

以上是实现文字向上走动效果的代码。其中，我们使用了CSS3的渐变背景色，通过设置颜色透明并将背景色设为渐变，使得文字显示在半透明的渐变背景中。使用动画效果来实现文字的上移，设置transform: translateY(-100%)即可。可以调整动画的时间和速度，修改animation属性的值即可。