记录：CSS3 模糊效果

最近在写活动页面遇到一个效果，在黑色透明蒙层后面的元素要有模糊，毛玻璃的效果，最初想到的就是filter: blur(2px)，直接在元素上使用，但是整个子元素都被模糊了，而且蒙层的背景并没有效果，经过百般搜索和尝试，发现还有一个属性可以实现专门针对有透明度的元素做模糊的效果，而且还不会影响到子元素的展示，它就是backdrop-filter: blur(3px)，完美的实现了设计稿的要求。

下面就来看看这两个属性的区别，遇到的问题以及解决方案。

filter

filter CSS属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。
想要模糊图像或者某个不带透明度的元素，可以直接在元素上加filter: blur(2px)，如果这个元素下面有子元素，这样写子元素也会被模糊，解决方法是使用伪元素加定位效果实现：

// html

    我是子元素。不想被模糊    


// style
.wrap {
    width: 200px;
    height: 200px;
    background: url('https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg') no-repeat;
    color: blue;
    font-size: 18px;
    z-index: 999;
    position: relative;
}
.wrap::before {
    content: '';
    width: 200px;
    height: 200px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}

backdrop-filter

backdrop-filter CSS 属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。 因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。
所以给蒙层的后面添加模糊的效果，可以直接在蒙层元素上使用backdrop-filter: blur(2px);即可。

.modal {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(2.5px);
}

这两个属性的使用可以详细的参考 mdn上的描述：
backdrop-filter
filter

css 3 两行文本超出显示省略号

.title {
      height: 33px;
      color: rgb(0, 0, 0);
      font-family: HelveticaNeue-Thin;
      font-size: 14px;
      font-weight: 100;
      margin: 12px 0;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

css 3背景网格

.wrap {
  width: 100vh;
  background-color: #151F2E;
  background-image: linear-gradient(#ffffff03 1px, transparent 0),linear-gradient(90deg, #ffffff03 1px, transparent 0);
  background-size: 19px 19px;
  padding-bottom: 77px;
}

css 3 心跳动画

.animation {
    animation: breatheEnlarge ease-in-out 2s infinite;
  }

@keyframes breatheEnlarge {
  0% {
    transform: scale(1); /*开始为原始大小*/
  }
  25% {
    transform: scale(1.05); /*放大1.1倍*/
  }
  50% {
    transform: scale(1);
  }
  75% {
    transform: scale(1.05);
  }
}
::-webkit-scrollbar {
  display: none;
}