描述

有一天逛 的时候，看到这么一个效果：将文字上下切开两半。

点进去看了一下代码，发现原理很简单，大概就是通过伪类使用attr()函数获取内容，然后进行定位。

你可以点下方链接查看效果：

正文

先让两个伪元素获取到属性的值，并且将位置调好。

I Love CSS
复制代码

样式部分

h1 {    position: relative;    color: transparent;}h1::before,h1::after {    /* 通过 attr 获取属性的值 */    content: attr(data-content);    position: absolute;    left: 0;    width: 100%;    overflow: hidden;    color: #CC3333;}/* 切割部分 */h1::before {    /* 上对齐 */    top: 0;    height: 50%;}/* 剩余部分 */h1::after {    /* 下对齐 */    bottom: 0;    height: 50%;}复制代码

这时候的效果是这样的，所以我们要把剩余部分的文字进行底部对齐。

这里使用flex布局对齐，剩余部分改为：

/* 剩余部分 */h1::after{    bottom: 0;    height: 50%;    display: flex;    align-items: flex-end;}复制代码

这时候：

到现在，就已经做好，只要在切割部分上应用动画，即可实现炫酷的切割效果：

/* 切割部分 */h1::before{    animation: action 5s 1s ease alternate infinite;}@keyframes action{    0%{        transform: translateX(0px);    }    30%{        transform: translateX(-5vw);    }    60%{        transform: translateX(0px);    }    100%{        transform: translateX(5vw);    }}复制代码

完整代码：

后记

不得不说那些大神们的脑洞真是大，如果没见过这个效果之前，我是无论如何都想不到可以如此简单的实现这么炫酷的切割效果。

注：此文为原创文章，如需转载，请注明出处。