一图泯恩仇,没错,老规矩,先上图。Look down↓↓↓
这是一个鼠标hover的效果,关键是文字上下方的效果。来,一分钟想一想怎么实现?
伪元素::before和::after ?
肯定的撒! 关键就是从左至右和从右至左的过渡。
先来实现从左至右的css代码:
到此呢,效果是酱紫的:
ちょっと待って ! 等等 ! 这是什么鬼 ? ::before已经按照我们的想法正确展示了,::after就有点……
好吧,加个左定位再看看—.—
啊哈,已经很接近了有木有! 那么,见证奇迹的时候要到了,请修改一行代码,look down↓↓↓
然后刷新下浏览器。
O(∩_∩)O哈 ! 效果出来了有木有 ! 很神奇有木有 !
这就是定位的一个小技巧,它决定了渲染时的方向性,同理,垂直方向也是如此,感兴趣的童鞋们可以试一试垂直方向的动画,小编在此就不上代码了,毕竟任何东西自己做一遍才能加深理解嘛,我们是代码创造者,不是代码搬运工。
OK, See you next time~