直线等图形从中间穿过元素或文字的CSS实现

byzhangxinxu from https://www.zhangxinxu.com/wordpress/?p=9827

本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。

一、考考你

请使用CSS实现下面两张图所示的效果？

一个效果是从中间穿过某个元素；一个效果是线条交叉穿过每个字符（例如字’g’，线条就像从中间的圈圈穿过去一样）。

不知各位读者有没有什么实现思路。

本文就介绍这种直线等图形的从元素中间穿越过去的CSS小技巧。

二、实现原理-微小的3D变换

首页，让元素处在3D视角环境中，可以设置 transform-style 属性值为 preserve-3d ，在本例中无需设置3D视角距离，因此，直接下面一行CSS代码就可以了， perspective 属性无需设置。

.container {
    transform-style: preserve-3d;
}

接下来要实现元素的穿过效果基本上就下面几个CSS就可以：

• 水平方向从元素中间穿过，可以设置 rotateY

  旋转，一个极小的旋转值就可以，例如：

  .through {
      transform: rotateY(-1deg);
  }

  .through {
      transform: rotateY(1deg);
  }

  其中，负的旋转角度值是从前往后穿越，正旋转角度值是从后往前穿过。

• 从元素后面穿过，则可以设置 translateZ 为正值，例如：

  .below {
      transform: translateZ(1px);
  }

• 从元素前面面穿过，则可以设置被穿越元素的 translateZ() 函数值为负，例如：

  .over {
      transform: translateZ(-1px);
  }

拿穿越“爱心”图形效果举例，相关的HTML和CSS代码如下所示：

    
    ♥

.heart-through {
    font-size: 100px;
    position: relative;
    transform-style: preserve-3d;
}
.arrow {
    position: absolute;
    left: 1rem; right: 1rem; top: 0; bottom: 0;
    height: 20px;
    margin: auto;
    background-color: currentColor;
    clip-path: polygon(0 40%, calc(100% - 12px) 40%, calc(100% - 16px) 0%, 100% 50%, calc(100% - 16px) 100%, calc(100% - 12px) 60%, 0 60%);
}
.heart {
    display: inline-block;
    transform: rotateY(-1deg);
    color: red;
}

//zxx: 如果你看到这段文字，说明你现在访问是体验糟糕的垃圾盗版网站，你可以访问原文获得很好的体验：https://www.zhangxinxu.com/wordpress/?p=9827（作者张鑫旭）

比较核心关键的CSS代码已经用红色高亮了。

至于字符穿越效果实现，都是基于同样的原理，具体就不展示了。

有demo页面，源码和效果都有，您可以狠狠地点击这里： CSS一箭穿心和直线交叉穿越文字demo

可以看到如下所示的效果：

三、其他一些话

如果您对CSS 3D transform变换比较了解，则本文所说的CSS小技巧可以很快就消化吸收，如果还不是很了解，则可以参考我之前写的这篇文章：“ 好吧，CSS3 3D transform变换，不过如此！ ”。

本文技巧实现的核心在于“微小的变化”，一定要微小，否则用户可能会看出端倪，也就是会看到意料之外的3D变化。

怎么个“微小”法呢？例如， rotateY 旋转都在 1deg ， translateZ 的纵深位置调整也是 1px ，实际上，旋转角度 0.5deg 也是有效果的，不过用户视觉感知差异不大，因此，演示页面还是使用了 1deg 。

另外，如果希望的上下穿越，而不是水平方向，则需要使用 rotateX() 函数。

好，本文内容就这些，介绍一个CSS小技巧，希望关键时候可以帮到您。

感谢阅读，欢迎转发，欢迎分享。

本文为原创文章，欢迎分享，勿全文转载，如果实在喜欢，可收藏，永不过期，且会及时更新知识点及修正错误，阅读体验也更好。

本文地址： https://www.zhangxinxu.com/wordpress/?p=9827

（本篇完）