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