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

Question

Answer 1

实现此效果的一种方法是将文本分成

<span>

，并对每个

filter: blur()

应用逐渐增强的

<span>

。

工作示例：

const blurGradient = document.getElementsByClassName('blur-gradient')[0];

// COUNT PARAGRAPHS
let blurGradientParagraphs = [...blurGradient.getElementsByTagName('p')];


// CALCULATE BLUR INCREMENT
let textLength = 0;

blurGradientParagraphs.forEach((blurGradientParagraph) => {
  
  textLength += blurGradientParagraph.textContent.length
});

const blurIncrement = (4 / textLength);


// SPLIT EACH PARAGRAPH INTO SPANS
blurGradientParagraphs.forEach((blurGradientParagraph) => {

  let blurGradientParagraphArray = blurGradientParagraph.textContent.split('');
  
  blurGradientParagraph.innerHTML = '<span>' + blurGradientParagraphArray.join('</span><span>') + '</span>';
  
});


// APPLY INCREMENTAL BLUR TO EACH SPAN, IN ORDER

let spans = [... blurGradient.getElementsByTagName('span')];

for (let i = 0; i < spans.length; i++) {

  spans[i].style.filter = 'blur(' + (blurIncrement * i) + 'px)';
}

<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>

Answer 2

您可以在任何过滤器上使用

mask

（

filter

和

backdrop-filter

）。这将使您逐渐模糊内容（文本或非文本）。

例如。 https://codepen.io/QuiteQuinn/pen/jOBxGjr

在这种特定情况下，我将使用以下 css 在您的内容顶部添加一个元素。

mask: linear-gradient(black, black, transparent);
backdrop-filter: blur(8px);

自 2021 年 6 月 5 日起，除 Firefox 外，均支持“背景过滤器”。

https://caniuse.com/css-backdrop-filter

Answer 3

所以我们绝对不能在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 代码，但不推荐。

Answer 4

可以使用现代 WebKit 方法来完成，但您需要复制文本层

<div style="
    width: 400px;
    position: relative;
">
<p style="
    width: 100%;
    position: absolute;
    -webkit-mask-image: -webkit-gradient(linear, left 10%, left 70%, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
">test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test</p>
<p style="
    -webkit-mask-image: -webkit-gradient(linear, left 10%, left bottom, from(rgba(0,0,0,0)), to(rgba(0,0,0,1)));
    filter: blur(4px);
">test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test</p>
</div>

Answer 5

到目前为止的答案，都有同样的问题。他们都提出了一种降低模糊层不透明度的方法，但不降低模糊本身。

使用遮罩降低模糊的不透明度并不是一个完美的解决方案，因为它不会改变模糊的强度，而且还会暴露模糊层下方的未模糊内容，导致比 iOS 等设备上看到的模糊效果更差。

这种效果被称为“渐进模糊”。到目前为止，它只能通过将具有不同模糊值的图层堆叠在一起来完成，并且可以使用或不使用 JavaScript 来实现。使用 javascript 将允许您以编程方式创建图层，并利用时间来配置效果。这是代码：

const progressiveBlurYs = document.querySelectorAll(".progressive-blur-y");

const applyProgressiveBlur = (container) => {
  
  const config = {
    layers: 40,
    blurFactor: 0.5
  }
  
  const generateLayer = (index) => {
    const layer = document.createElement("div");
    layer.classList.add("progressive-blur-y-layer");
    layer.style.setProperty("--index", index);
    return layer;
  }
  const addLayers = () => {
    const layerGroup = document.createElement("div");
    layerGroup.classList.add("progressive-blur-y-layer-group");
    layerGroup.style.setProperty("--layers", config.layers);
    layerGroup.style.setProperty("--blur-factor", config.blurFactor);
    for (let i = 0; i < config.layers; i++) {
      const layer = generateLayer(i);
      layerGroup.appendChild(layer);
    }
    container.appendChild(layerGroup);
  }
  addLayers();
}

progressiveBlurYs.forEach(el => {
  applyProgressiveBlur(el);
})

.progressive-blur-y {
  border: 1px solid black;
  height: min-content;
  width: min-content;
  position: relative;
}

.stick {
  position: absolute;
  height: 100px;
  background: red;
  width: 8px;
  top: 0;
  right: 12px;
}

.content {
  padding: 8px;
  height: 300px;
  width: 300px;
  overflow-y: auto;
}

.progressive-blur-y-layer-group {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.progressive-blur-y-layer {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  backdrop-filter: blur(
    calc(
      0.5px + 
      (
        sin(
          (var(--index) / var(--layers)) * 90deg
        ) * 
        var(--blur-factor) * 1px    
      )
    )
  );
  height: calc((var(--layers) - var(--index)) * 1px);
}

<div class="progressive-blur-y">
  <div class="content">
  <p>
    Lorem ipsum dolor sit, amet consectetur adipisicing, elit. Non, earum omnis nihil, atque labore fugit provident minus voluptas a laboriosam amet quidem minima molestias ipsum eos ea dicta quod corrupti.
  </p>
  <p>
    Lorem ipsum dolor sit, amet consectetur adipisicing, elit. Non, earum omnis nihil, atque labore fugit provident minus voluptas a laboriosam amet quidem minima molestias ipsum eos ea dicta quod corrupti.
  </p>
  <p>
    Lorem ipsum dolor sit, amet consectetur adipisicing, elit. Non, earum omnis nihil, atque labore fugit provident minus voluptas a laboriosam amet quidem minima molestias ipsum eos ea dicta quod corrupti.
  </p>
  <p>
    Lorem ipsum dolor sit, amet consectetur adipisicing, elit. Non, earum omnis nihil, atque labore fugit provident minus voluptas a laboriosam amet quidem minima molestias ipsum eos ea dicta quod corrupti.
  </p>
  </div>
</div>

著名开发者也有类似的方法。它根本不使用 JS，并且在较少的 DOM 元素中实现相同的效果。不过对于初学者来说有点难以理解。

这是链接：https://codepen.io/jh3y/pen/eYqyzmM

默认情况下，它还有亮度和对比度效果，可以通过输出区域右上角的“配置”按钮将其删除。只需将亮度和对比度滑块设置为 1.0

快乐编码。

Answer 6

我也想知道这一点，但今天就是我要知道的一天。经过大量在互联网上搜索并学习更多CSS之后，我找到了做到这一点的最佳方法。我们不应该通过模糊来实现这一点，因为模糊作为渐变很难控制。

p {
  font-size: 12px;
  color: black;
  -webkit-mask-image: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
}

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Cras interdum purus sed felis accumsan, sit amet laoreet orci
  sodales. Nunc pretium ante vitae orci ultricies, id luctus arcu
  volutpat. Nulla ornare tellus et turpis pretium ullamcorper.
  Maecenas eget nunc at erat imperdiet auctor. Nulla eros ante,
  porta vitae semper rhoncus, dapibus non ligula. Proin cursus
  convallis tortor, sed molestie erat. Nullam mauris urna, varius
  et efficitur eu, porttitor et augue. Mauris condimentum egestas
  condimentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Cras interdum purus sed felis accumsan, sit amet laoreet orci
  sodales. Nunc pretium ante vitae orci ultricies, id luctus arcu
  volutpat. Nulla ornare tellus et turpis pretium ullamcorper.
  Maecenas eget nunc at erat imperdiet auctor. Nulla eros ante,
  porta vitae semper rhoncus, dapibus non ligula. Proin cursus
  convallis tortor, sed molestie erat. Nullam mauris urna, varius
  et efficitur eu, porttitor et augue. Mauris condimentum egestas
  condimentum.
</p>

我在很多网站上都看到这是“仅限高级会员”访问数据的一种方式。现在，我终于知道该怎么做了！显然，这种方式可以根据您的需要进行调整，但这是基本且通用的解决方案。

编辑：我找到了另一种方法。

p {
  font-size: 12px;
  background: linear-gradient(to bottom, black, rgba(255, 255, 255, 0));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<p> 
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Cras interdum purus sed felis accumsan, sit amet laoreet orci
  sodales. Nunc pretium ante vitae orci ultricies, id luctus arcu
  volutpat. Nulla ornare tellus et turpis pretium ullamcorper.
  Maecenas eget nunc at erat imperdiet auctor. Nulla eros ante,
  porta vitae semper rhoncus, dapibus non ligula. Proin cursus
  convallis tortor, sed molestie erat. Nullam mauris urna, varius
  et efficitur eu, porttitor et augue. Mauris condimentum egestas
  condimentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Cras interdum purus sed felis accumsan, sit amet laoreet orci
  sodales. Nunc pretium ante vitae orci ultricies, id luctus arcu
  volutpat. Nulla ornare tellus et turpis pretium ullamcorper.
  Maecenas eget nunc at erat imperdiet auctor. Nulla eros ante,
  porta vitae semper rhoncus, dapibus non ligula. Proin cursus
  convallis tortor, sed molestie erat. Nullam mauris urna, varius
  et efficitur eu, porttitor et augue. Mauris condimentum egestas
  condimentum.
 </p>

Answer 7

backdrop-filter 与 mask 相结合可以近似这一点。唯一的缺点是支持度低

.box {
  font-size:25px;
  margin:0 10%;
  position:relative;
}
.box::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  backdrop-filter:blur(5px);
  -webkit-mask:linear-gradient(transparent,#fff);
  pointer-events:none;
}

<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas rhoncus lobortis justo sed interdum. Ut quis purus lacinia, gravida justo eu, auctor mauris. Phasellus imperdiet, elit in lobortis fermentum, lacus diam sollicitudin lectus, in suscipit eros dui vitae sem. Integer commodo et nibh ut vulputate. Duis vel mauris pharetra, venenatis libero eu, malesuada elit. In rhoncus mi tellus, a lacinia orci vehicula id. Aliquam ultricies dolor leo lectus, in suscipit eros dui vitae sem. Integer commodo et nibh ut vulputate. Duis vel mauris pharetra, venenatis libero eu, malesuada elit. In rhoncus mi tellus, a lacinia orci vehicula id. Aliquam ultricies dolor leo
</div>

Answer 8

这个问题引起了我足够的兴趣，尝试制定一个“体面”的解决方案，我认为该解决方案会以视觉上令人愉悦的方式逐渐模糊最后几行，而不会出现重复内容的黑客行为，例如这里的其他答案.

将

backdrop-filter

与mask-image
（带有渐变）混合，这是可以实现的，但仅适用于Chrome浏览器和FF，当标志（

layout.css.backdrop-filter.enabled

）在

中设置为

true时
about:config
.

查看 Codepen 演示

下面的代码是我的 Codepen 演示的 SCSS 的编译版本，它使用自动前缀。由于 Stackoverflow 缺乏支持 SCSS 语法，我建议在 Codepen 中使用源代码的参数......

html{
  --blur: 6px;
}

p{
  font: calc(.5vw + 11px) Arial;
  width: 50%;
  position: relative;
}

p::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: calc(var(--blur) * -1);
  right: calc(var(--blur) * -2);
  left: calc(var(--blur) * -2);
  -webkit-backdrop-filter: blur(var(--blur)) brightness(1.1);
          backdrop-filter: blur(var(--blur)) brightness(1.1);
          
  -webkit-mask-image: -webkit-gradient(linear, left bottom, left top, 
                      color-stop(1em, red), 
                      color-stop(2.5em, transparent)), 
                      -webkit-gradient(linear, left bottom, left top, 
                      color-stop(2.5em, rgba(0, 0, 0, 0.88)), 
                      color-stop(5em, transparent));
  -webkit-mask-image: linear-gradient(to top, red 1em, transparent 2.5em), 
                      linear-gradient(to top, rgba(0, 0, 0, 0.88) 2.5em, transparent 5em);

}

/* Non-supported browsers fallback to a fade without blur: */
@supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
  p::after {
    background-color: white;
    mask-image: linear-gradient(transparent 60%, white calc(100% - var(--blur)));
  }
}

<p>
  The <mark>backdrop-filter</mark> CSS property lets you apply graphical effects such as blurring or color shifting to 
the area behind an element. Because it applies to everything behind the element, to see the effect 
you must make the element or its background at least partially transparent.
  <br><br>
  The feature can be enabled in Firefox by setting the <em><code>layout.css.backdrop-filter.enabled</code></em> to true in <em><code>about:config</code></em> (soon-to-be rolled-out). 
</br>
<br><br>
  The <mark>mask-image</mark> property may reference a mask element. The content of the mask element serves as the mask. 
  Alternatively, for many simple uses, the <code>mask-image</code> property may refer directly to images to be used as mask, 
forgoing the need for an explicit mask element. This mask can then be sized and positioned 
just like CSS background images using the mask-position, mask-size and other characterizing properties. 
</p>

在这个演示中，我尝试只模糊最后几行，尤其是最后几行，所以它完全不可读。

为了使淡入淡出更加渐进，无论线条如何，我建议这样做：

mask-image: linear-gradient(transparent 50%, red calc(90% - 1em - var(--blur)));

（颜色的名称在这里不相关，所以我使用最短名称）

Answer 9

生成两个元素

: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>

Answer 10

请尝试与CSS动画一起使用：

<style> 
div p {
  animation-name: example;
  animation-duration: 4s;
  animation-fill-mode: forwards;
}

@keyframes example {
  from { filter: blur(0px); }
  to { filter: blur(4px); }
}
</style>

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

问题描述投票：0回答：10

10个回答

查看 Codepen 演示

最新问题

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

问题描述 投票：0回答：10

10个回答

查看 Codepen 演示

最新问题

问题描述投票：0回答：10