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

这篇文章发布于 2021年02月14日,星期日,21:50,归类于 CSS相关。 阅读 1155 次, 今日 16 次 没有评论

 

松鼠与坚果

一、考考你

请使用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代码如下所示:

<div class="heart-through">
    <i class="arrow"></i>
    <span class="heart">♥</span>
</div>
.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;
}

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

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

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

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

交叉穿越效果示意

三、其他一些话

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

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

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

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

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

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

(本篇完)

分享到:


发表评论(目前没有评论)