这里要说的内容就是这个小尖角:
开始只看到网页截图的时候我一直认为是一个">"做的hover效果.
这样的话就需要先把">"先旋转90度,再做hover的效果.
后来打开了原网页看了源代码,发现他们是这么做的:
首先画了一个15x7的div,overflow:hidden;
然后里面写了一个"◇"font-size:15px;
定位,上移7px;
(这样我们看到的效果就是">"旋转了90度的样子)
再加上hover效果2D旋转180度,就会得到这样的效果了:
这样做的好处有:
1.直接使用>会造成旋转的中心点不在div框中心点的问题;
2.使用◇比使用>少写许多行代码.
通过这个,我们可以发现,我们所看到的并不是全部,有些内容只是被hidden了,所以不能局限自己的思维.
时间： 2024-11-05 22:56:29