关于前端:CSS-奇思妙想之酷炫倒影

在 CSS 中，倒影是一种比拟常见的成果。明天，咱们就将尝试，应用 CSS 实现各类不同的倒影成果，话不多说，间接进入主题。

实现倒影的两种形式

首先，疾速过一下在 CSS 中，实现倒影的 2 种形式。

应用 -webkit-box-reflect

失常而言，-webkit-box-reflect 是一种十分便捷及疾速的实现倒影的形式。

-webkit-box-reflect 的语法非常简单，最根本的用法像是这样：

div {-webkit-box-reflect: below;}

其中，below 能够是 below | above | left | right 代表下上左右，也就是有 4 个方向能够选。

看这么一个例子：

div {background-image: url('image.png');
    -webkit-box-reflect: below 2px linear-gradient(transparent, rgba(0, 0, 0, .5));
}

看看成果，有了虚实变动之后，这样就更像是一个倒影。

简略而言，应用 -webkit-box-reflec 能够做到：

1. 不同方向的投影
2. 投影的间隔
3. 投影的虚实，可叠加一层蒙版管制透明度

下面 3 点即是 -webkit-box-reflec 的特点，同时，也表明了它存在肯定的局限性，同时，在明天，从 -webkit-box-reflec 的名字也能看进去，存在一点兼容性问题。所以，如果，咱们想实现更负杂一点的倒影成果。利用上面一种形式可能更好。

利用实现多一个反向元素实现

这个办法其实是更为广泛的。也就是咱们实现一个反向的成果即可。通常会利用元素的伪元素。

代码非常简单，以文字为例子：

<p content="Reflect">Reflect</p>

p {
    position: relative;
    
    &::before {content: attr(content);
        position: absolute;
        inset: 0;
        transform: rotatex(180deg) translatey(15px);
        transform-origin: 50% 100%;
    }
}

就是通过元素的伪元素，再旋转 180 度，搁置到正确适合的地位即可，成果如下：

<img width=”370″ alt=”image” src=”https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bea36a4609be438ca21f8c0a0c79e19c~tplv-k3u1fbpfcp-zoom-1.image”>

尽管这个代码多一点，然而因为这是一整个可管制的元素，所以基于它，咱们能够实现的成果就可能十分丰盛。

实现各式倒影成果

上面，咱们就基于上述的 DEMO，丰盛咱们的倒影成果。

咱们外围要做的，就是通过革新伪元素，实现不同的成果，失去不一样的倒影。

1. 通过 mask，管制透明度，管制条纹

咱们能够通过 mask，无效的管制倒影的透明度：

p::before {mask: linear-gradient(transparent, #000);
}

成果如下：

透明度的管制也能够是这种从左往右的：

p::before {
  mask: 
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.01) 25%,
      white,
      rgba(255, 255, 255, 0.01) 75%,
      transparent
  );
}

成果如下：

当然，mask 能够有不同的作用，不仅仅是管制透明度，也能够实现横线分隔、竖线分隔、斜线分隔：

p::before {
  mask: repeating-linear-gradient(
    transparent,
    transparent 3px,
    white 3px,
    white 4px
  );
}

这个是横线，成果如下：

扭转 mask 的角度，就能够失去各种不同方向的成果：

p::before {
  mask: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 3px,
    white 3px,
    white 4px
  );
}

是的，咱们还能够把上述两个不同的 mask 成果叠加在一起，那么就会是这样：

p::before {
  mask: 
  repeating-linear-gradient(
      transparent,
      transparent 3px,
      white 3px,
      white 4px
  ),
  linear-gradient(transparent 40%, white 90%);
}

那么，就会是突变隐没叠加线段分隔的成果：

下面的成果，再叠加上角度管制，就是另外一种成果：

p::before {
  mask: 
    repeating-linear-gradient(
        35deg,
        transparent,
        transparent 3px,
        white 3px,
        white 4px
    ),
    linear-gradient(-90deg, transparent, transparent, white);
}

成果如下：

2. 配合 transform，实现斜体

通过叠加 transform，咱们就能很好的让字体有一个适宜的歪斜角度，像是这样：

p::before {mask: linear-gradient(transparent 20%, rgba(255, 255, 255, .7) 95%);
  transform: rotatex(180deg) translatey(15px) skew(135deg) translatex(-10px);
}

成果如下：

当然，管制 mask，能有各式的纹理：

p::before {
  mask: 
    repeating-linear-gradient(35deg, transparent, transparent 2px, white 2px, white 4px),
    repeating-linear-gradient(-35deg, transparent, transparent 2px, white 2px, white 4px),
    linear-gradient(transparent 30%, white 95%);
  transform: rotatex(180deg) translatey(15px) skew(135deg) translatex(-10px);
}

成果如下：

如果把另外一个伪元素也用上呢，就能丰盛倒影的方向：

p {
  &::before {mask: linear-gradient(transparent 5%, rgba(255, 255, 255, .9) 95%);
    transform: rotatex(180deg) translatey(11px) skew(125deg) translatex(-10px);
    background: #333;
    color: transparent;
    background-clip: text;
    z-index: 1;
  }
  &::after {transform: rotatex(180deg) translatey(11px) skew(-125deg) translatex(8px);
    background: #ddd;
    color: transparent;
    background-clip: text;
    mask: linear-gradient(transparent 5%, rgba(255, 255, 255, .9) 95%);
  }
}

像是这样：

3. 借助滤镜实现虚化

再接着，咱们能够借助滤镜，持续丰盛倒影的成果。

譬如简略的一层含糊滤镜：

p::before {mask: linear-gradient(transparent 5%, rgba(255, 255, 255, .9) 99%);
  transform: rotatex(180deg) translatey(6px) skew(135deg) translatex(-8px);
  filter: blur(8px);
}

成果如下：

或者是半截式的，含糊倒影：

p::before {transform: rotatex(180deg) translatey(15px);
  filter: blur(4px);
  mask: linear-gradient(transparent 30%, white 90%);
}

或者是多个滤镜叠加在一起：

p::before {transform: rotatex(180deg) translatey(15px);
  filter: blur(9px) brightness(1.5);
}

成果如下：

上述所有成果的 Demo，你能够在这里找到：

CodePen Demo — Text Reflect Effect Demo

尝试更换字体以及利用 background-clip: text

再接着，咱们能够尝试更换不同的字体。其实，通过 background-clip: text 的个性，给文字染上不同的成果。

譬如，咱们抉择了这样一张图片：

通过 background-clip: text 作用给文字，像是这样：

p {
    position: relative;
    font-family: 'new font', sans-serif;
    background: url(花里胡哨的图片.jpg);
    background-clip: text;
    color: transparent;
    
    &::before {content: attr(content);
        position: absolute;
        inset: 0;
        transform: rotatex(180deg) translatey(24px);
        transform-origin: 50% 100%;
        background: inherit;
        background-clip: text;
        color: transparent;
    }
}

再反复上述的成果一次，咱们就能失去更为多样的不同的成果，上面是整体成果展现图：

残缺的代码，你能够戳这里：CodePen Demo — Text Reflect Effect Demo

最初

当然，倒影能做的成果远不止这些，感兴趣的读者能够尝试应用更多 CSS 属性，制作更多有意思的倒影成果。

好了，本文到此结束，心愿本文对你有所帮忙 :)

更多精彩 CSS 技术文章汇总在我的 Github — iCSS，继续更新，欢送点个 star 订阅珍藏。

如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。