创建一个淡入淡出列表

时间：2016-05-21 00:12:17

标签： html css3

我的目标是创建一个列表，其中第一个<li>的文本几乎为白色（#CCC），而每个<li>后的文本变暗。 最后一个<li>应该几乎是黑色的（或几乎0％的不透明度）。

我们的想法是在没有Javascript 的情况下创建一种淡化文字效果。

我尝试使用不透明度添加带渐变背景的叠加div以逐步隐藏文本，但这些问题发生了：

  • 渐变在主div内未达到0％不透明度。这是因为它的高度与主要div的高度不同。由于主div可以改变高度（我打算动态添加一些<li>），我无法将叠加的高度设置为固定大小。
  • 由于渐变位于<ul>之上，我无法选择<li>内的文字。

此外，<li>的填充使<li>溢出右侧。由于主<div>的宽度将以百分比而不是最后的像素，因此我无法将宽度设置为固定大小。

以下是我的代码（代码段未显示渐变）以及有关问题的一些解释：

<html>
    <head>
        <meta charset="UTF-8">
        <title>Fading overlay test</title>
        <style>
body{
    background-color: black;
    color: #ccc;
    font-family: sans-serif;
    font-size: 16px;
}

.fade_test{
    border: 1px solid #ccc;
    width: 300px;
    max-height: 570px;
    overflow: hidden;
    padding: 0;
}

.fade_test ul{
    float: left;
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.fade_test li{
    display: inline-block;
    border: 2px solid #0000FF;
    width: 100%;
    padding: .61em;
}

.fading_overlay{
    position: relative;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
}
        </style>
    </head>
    <body>
        <div class="fade_test">
            <ul>
                <li>Line n°1. Because of the padding, we can't see the blue right border. &#8594;</li>
                <li>Line n°2. The overlay is on top of this text. Therefore, we cannot select this text.</li>
                <li>Line n°3</li>
                <li>Line n°4</li>
                <li>Line n°5</li>
                <li>Line n°6</li>
                <li>Line n°7</li>
                <li>Line n°8</li>
                <li>Line n°9</li>
                <li>Line n°10</li>
                <li>Line n°11</li>
                <li>Line n°12. This is at the bottom of the ".fade_test". This should be almost 100% black (we shouldn't be able to read this).</li>
                <li>Line n°13. This one is invisible (it overflows), it's a desired behaviour.</li>
            </ul>
            <div class="fading_overlay"></div>
        </div>
        <p>
    </body>
</html>

我曾尝试使用颜色淡化文字，但无法想办法淡化部分。我也试图弄乱高度，宽度，位置，浮点数，不透明度甚至calc（）但没有效果。 代码是我到目前为止最接近的代码。

代码不需要与IE兼容，并且可以使用最新的CSS技术。我只是不想使用Javascript（如果可能的话）。

1 个答案:

答案 0 :(得分：2)

要解决覆盖div高度的第一个问题，您可以将position: relative;添加到.fade_test并将position: relative; width: 100%; height: 100%更改为position: absolute; top: 0; left: 0; right: 0; bottom: 0;类中的.fading_overlay

要解决叠加层阻止与列表项的交互问题，您可以将pointer-events: none;添加到叠加层。这将使所有指针事件（例如鼠标点击等）通过。

要使用li填充修复问题，只需将box-sizing: border-box;添加到.fade_test li

请参阅JSFiddle

相关问题
最新问题