颤振列填充

颤振列填充也被称为镂空颤振，是一种常见的UI设计效果。它主要用于突出显示重要信息的同时，保持整个设计简洁明了。

实现方式

CSS

我们可以使用CSS来实现颤振列填充。通过设置background-clip和background-size属性，我们可以使颤振列填充效果出现。

.container {
  background-color: #fff;
  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15));
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 200%;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

JavaScript

除了使用CSS，我们还可以使用JavaScript来实现颤振列填充。下面是一个例子：

<div class="container">
  This is a text with shake fill effect.
</div>

<script>
// 获取文本内容和容器元素
var container = document.querySelector('.container');
var text = container.textContent;
// 将文本转化为颤振列填充的形式并设置
var html = '';
for (var i = 0; i < text.length; i++) {
  if (text[i] === ' ') {
    html += ' ';
  } else {
    html += '<span style="background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)); background-position: center; background-repeat: no-repeat; background-size: 100% 200%; -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;">' + text[i] + '</span>';
  }
}
container.innerHTML = html;
</script>

使用场景

颤振列填充可以用于以下场景：

• 制作LOGO或标题
• 高亮重要信息
• 增加页面装饰性

总结

颤振列填充是一种常见的UI设计效果，它可以用CSS或JavaScript实现。它的应用场景很广泛，可以作为制作LOGO或标题、高亮重要信息、增加页面装饰性的工具。