向文本块添加逐渐增加的模糊

Question

我有这样的文字：

<div class"blur-gradient">
 <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aenean et tortor at risus viverra adipiscing at in. Cursus vitae congue mauris rhoncus aenean vel. Tristique nulla aliquet enim tortor at auctor urna nunc id. Nisl tincidunt eget nullam non. Purus sit amet luctus venenatis lectus magna fringilla. Velit scelerisque in dictum non consectetur a erat nam. Vel pretium lectus quam id leo in. Tristique nulla aliquet enim tortor at auctor. In vitae turpis massa sed elementum. Erat imperdiet sed euismod nisi porta lorem mollis. Mattis enim ut tellus elementum sagittis. Convallis tellus id interdum velit laoreet id. Urna condimentum mattis pellentesque id nibh tortor id. Vitae congue mauris rhoncus aenean vel. Aliquet porttitor lacus luctus accumsan tortor posuere ac ut. Nulla porttitor massa id neque aliquam vestibulum morbi. Condimentum mattis pellentesque id nibh tortor id.
 </p>
 <p>
    Volutpat lacus laoreet non curabitur gravida arcu ac. Id aliquet lectus proin nibh nisl condimentum id. Sapien faucibus et molestie ac feugiat sed lectus. Facilisis magna etiam tempor orci eu lobortis elementum nibh. Dui vivamus arcu felis bibendum. Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing elit. Odio pellentesque diam volutpat commodo sed egestas egestas. Adipiscing diam donec adipiscing tristique risus nec feugiat in. Risus nullam eget felis eget nunc lobortis. Accumsan sit amet nulla facilisi morbi. Elit eget gravida cum sociis natoque penatibus et magnis. Morbi tempus iaculis urna id volutpat lacus laoreet. In nibh mauris cursus mattis molestie a iaculis at erat. Fermentum dui faucibus in ornare quam. Duis at tellus at urna condimentum mattis pellentesque id. Est ullamcorper eget nulla facilisi. Sed arcu non odio euismod lacinia. Orci ac auctor augue mauris augue neque gravida in fermentum.
 </p>
 </div>

我希望文字与开始时filter: blur(0px)和结束了filter: blur(4px)。

这可以用 css 实现吗？如果是这样，你建议我怎么做？

Answer 1

生成两个元素:before和:after。他们从属性中获取文本data-text

这个想法是让两个元素具有相反的透明度。作为其中之一，设置模糊值。

该解决方案不存在内容中​​重复文本的 SEO 问题！

例子：

.myText {
    position: relative;
    z-index: 0;
    padding-bottom: 20px;
}

.myText:before {
    content: attr(data-text);
    position: relative;
    background: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-image: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    z-index: 1;
}

.myText:after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    -webkit-mask-image: linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    -webkit-background-clip: text;
    -webkit-filter: blur(4px);
    z-index: -1;
}

.myText span {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    color: rgba(0,0,0,0);
    z-index: 2;
}

<div class="myText" data-text="Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure qui, earum tenetur facilis quod vero, porro, sequi consequuntur inventore id atque modi fugiat soluta iste? Eveniet omnis animi mollitia doloribus? Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odio tenetur et vero placeat eaque harum minus velit, ratione iste
architecto rem dolores cumque officiis perferendis saepe vitae provident mollitia sed! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perferendis libero, dolor officiis vero aspernatur itaque? In obcaecati nobis reprehenderit dolorem autem deserunt. Ratione, reiciendis adipisci. Sed consectetur ipsa tempora! Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure qui, earum tenetur facilis quod vero, porro, sequi consequuntur inventore id atque modi fugiat soluta iste? Eveniet omnis animi mollitia doloribus? Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odio tenetur et vero placeat eaque harum minus velit, ratione iste architecto rem dolores cumque officiis perferendis saepe vitae provident mollitia sed! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perferendis libero, dolor officiis vero aspernatur itaque? In obcaecati nobis reprehenderit dolorem autem deserunt. Ratione, reiciendis adipisci. Sed consectetur ipsa tempora!">
    <span>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure qui, earum tenetur facilis quod vero, porro, sequi consequuntur inventore id atque modi fugiat soluta iste? Eveniet omnis animi mollitia doloribus? Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odio tenetur et vero placeat eaque harum minus velit, ratione iste architecto rem dolores cumque officiis perferendis saepe vitae provident mollitia sed! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perferendis libero, dolor officiis vero aspernatur itaque? In obcaecati nobis reprehenderit dolorem autem deserunt. Ratione, reiciendis adipisci. Sed consectetur ipsa tempora! Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure qui, earum tenetur facilis quod vero, porro, sequi consequuntur inventore id atque modi fugiat soluta iste? Eveniet omnis animi mollitia doloribus? Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odio tenetur et vero placeat eaque harum minus velit, ratione iste architecto rem dolores cumque officiis perferendis saepe vitae provident mollitia sed! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perferendis libero, dolor officiis vero aspernatur itaque? In obcaecati nobis reprehenderit dolorem autem deserunt. Ratione, reiciendis adipisci. Sed consectetur ipsa tempora!
    </span>
</div>