描述
有一天逛 Codepen 的时候,看到这么一个效果:将文字上下切开两半。
点进去看了一下代码,发现原理很简单,大概就是通过伪类使用attr()
函数获取内容,然后进行定位。
你可以点下方链接查看效果:
gd4ark.github.io/blog_demos/…
正文
先让两个伪元素获取到属性的值,并且将位置调好。
<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%;
}
复制代码
这时候的效果是这样的,所以我们要把剩余部分的文字进行底部对齐。
这里使用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);}
}
复制代码
完整代码:github.com/gd4Ark/blog…
后记
不得不说那些大神们的脑洞真是大,如果没见过这个效果之前,我是无论如何都想不到可以如此简单的实现这么炫酷的切割效果。
注:此文为原创文章,如需转载,请注明出处。
原文链接