CSS，不只是”样式”，还可以制造…模糊字体！

什么是CSS模糊

CSS模糊是指在视觉上加深或减轻一个元素的颜色或亮度，从而在屏幕上创造出某种特定的效果。CSS模糊可以使文本、背景等元素的边缘较为模糊，能够营造出很独特的视觉体验。

如何用CSS制作模糊字体

1. text-shadow属性

text-shadow属性是CSS3所新增的属性，它可以使文本产生阴影效果。然而，当我们设置text-shadow的模糊距离时，就可以模拟出模糊字体的效果。下面就是一段样式代码：

h1 {
  font-size: 48px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .5);
}

在这个例子中，我们把text-shadow属性应用于标题h1元素上，其中阴影的颜色是黑色的，透明度为0.5。而0 2px 4px部分决定了阴影的偏移量和模糊半径。

2. filter属性

CSS的filter属性可以在很大程度上改变HTML元素在浏览器中呈现出来的样式。可以使用blur()函数实现模糊字体的效果。下面是一段样式代码：

h2 {
  font-size: 36px;
  background-color: #fff;
  filter: blur(2px);
  -webkit-filter: blur(2px);
}

上述示例中代码通过设置filter属性和Webkit前缀对标题h2进行了修饰，实现了字体加模糊的效果，其中2px指代字体加上的模糊效果。

模糊字体的实际案例

示例一：下雪动画

下雪动画是一个非常有趣的案例，其采用CSS设置图形的模糊效果与旋转效果。HTML如下：

<div class="loading-wrap">
  <div class="loading">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>

通过span标签实现一个基础的图形元素，接下来是关键的CSS代码：

.loading span {
  position: absolute;
  border-radius: 50%;
  opacity: 1;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}

.loading span:nth-child(1) {
  width: 6px;
  height: 6px;
  background: #fe845c;
  top: 37px;
  left: 66px;
  filter: blur(5px);
  -webkit-filter: blur(5px);
  animation: loading-up .6s ease-in-out 0s infinite alternate;
  -webkit-animation: loading-up .6s ease-in-out 0s infinite alternate;
}

.loading span:nth-child(2) {
  width: 7px;
  height: 7px;
  background: #74d2e7;
  top: 59px;
  left: 59px;
  filter: blur(3px);
  -webkit-filter: blur(3px);
  animation: loading-down .6s ease-in-out .15s infinite alternate;
  -webkit-animation: loading-down .6s ease-in-out .15s infinite alternate;
}

在这个代码片段中，我们可以看到通过设置filter属性和Webkit前缀实现了图形元素的模糊效果。其中loading-up和loading-down是动画名称。

示例二：阴影框架

在一些设计风格比较精致的网站中，我们可以看到经常使用字体加阴影的方式来营造出更具有质感和层次感的页面效果。下面就是一个例子：

.box {
  margin: 20px;
  padding: 20px;
  background-color: #fff;
  color: #333;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
  border-radius: 10px;
  font-size: 24px;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .5);
}

在这个示例中，我们定义了一个名为box的元素，并通过box-shadow属性和text-shadow属性实现了文本和框架的模糊效果，从而达到更好的视觉效果。

总结

CSS模糊技术能够给我们呈现出一系列不同的视觉效果，从而完善网站设计和页面展示。通过text-shadow、filter等属性的运用，我们可以制作出很多独特的模糊字体效果，这些技巧可以在设计中被广泛地运用。

更多题目

juejin.cn/column/7201…