描述
有一天逛 Codepen 的时候,看到这么一个效果:将文字上下切开两半。
点进去看了一下代码,发现原理很简单,大概就是通过伪类使用attr()
函数获取内容,然后进行定位。
你可以点下方链接查看效果:
https://gd4ark.github.io/blog-demos/2018-11-26/01.html
正文
先让两个伪元素获取到属性的值,并且将位置调好。
1
| <h1 data-content="I Love CSS">I Love CSS</h1>
|
样式部分
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
| h1 { position: relative; color: transparent; }
h1::before, h1::after { 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
布局对齐,剩余部分改为:
1 2 3 4 5 6 7
| h1::after { bottom: 0; height: 50%; display: flex; align-items: flex-end; }
|
这时候:

到现在,就已经做好,只要在切割部分上应用动画,即可实现炫酷的切割效果:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
| 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
后记
不得不说那些大神们的脑洞真是大,如果没见过这个效果之前,我是无论如何都想不到可以如此简单的实现这么炫酷的切割效果。
🥳 加载 Disqus 评论