html - 向文本 block 添加逐渐增加的模糊

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

所以我们绝对不能在css中的一个元素中应用双重样式。
例如，这是 css 中的错误方法。

p{
filter:blur(0px);
...
filter:blur(4px);   // will set this style instead of 0px. ignoring above one.

font-size: 10px;
...
font-size: 13px;    // will set font-size to 13px instead of 10px; ignoring above one.
}

你可以接近的唯一方法是你应该把你的文本分成几个部分
然后将 css 应用于每个 p。

.blur-gradient p:nth-child(1){
  filter: blur(1px);
}
.blur-gradient p:nth-child(2){
  filter: blur(2px);
}
...

为了更流畅，你应该越来越多地分割文本。这只是一种方式。您可以制作 javascript 代码，但不推荐。