淡入`<；ul>；`随着它在页面上的移动-CSS3

我有一个

，我想在它进入页面时淡出。我一直在试验线性梯度，但没能成功。有可能吗

我在这里举了一个JSFIDLE示例：

我正试图让文字在页面向下延伸时褪色。。也就是说，“六”这个词是可以看见的，五个稍微可以看见一些，四个稍微不能看见三个。。。等

另一种方法是针对每个

并赋予其自身的不透明度，但我希望不透明度在整个单词中呈梯度分布，即，单词六的底部比单词六的顶部更不可见

也可以在上方放置一个div，但这不允许单击，并且此页面上有图像背景，因此div会影响此页面的外观。

尝试此操作

    background: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(1, rgba(0,0,0,0.0)), /* Top */
        color-stop(0, rgba(0,0,0,1.0)) /* Bottom */
    );

    background: -moz-linear-gradient(
    center bottom,
    rgba(0,0,0,1.0) 0%, /* Bottom */
    rgba(0,0,0,0.0) 100% /* Top */
    );

---

不，不可能有你设定的限制。你需要JS，即使那样，它也会相当混乱。