描述
有一天逛 Codepen 的时候，看到这么一个效果：将文字上下切开两半。
点进去看了一下代码，发现原理很简单，大概就是通过伪类使用attr()函数获取内容，然后进行定位。
你可以点下方链接查看效果：
https://gd4ark.github.io/blog_demos/2018-11-26/01.html
正文
先让两个伪元素获取到属性的值，并且将位置调好。
<h1 data-content="I Love CSS">I Love CSS</h1>
样式部分
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%;
}
这时候的效果是这样的，所以我们要把剩余部分的文字进行底部对齐。
image
这里使用flex布局对齐，剩余部分改为：
/* 剩余部分 */
h1::after{
bottom: 0;
height: 50%;
display: flex;
align-items: flex-end;
}
这时候：
image
到现在，就已经做好，只要在切割部分上应用动画，即可实现炫酷的切割效果：
/* 切割部分 */
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);
}
}
完整代码：https://github.com/gd4Ark/blog_demos/blob/master/2018-11-26/01.html
后记
不得不说那些大神们的脑洞真是大，如果没见过这个效果之前，我是无论如何都想不到可以如此简单的实现这么炫酷的切割效果。
注：此文为原创文章，如需转载，请注明出处。
