[学习]京东首页顶部导航栏hover

Posted 2020-06-29

 

 

这里要说的内容就是这个小尖角:

 

 

开始只看到网页截图的时候我一直认为是一个">"做的hover效果.

这样的话就需要先把">"先旋转90度,再做hover的效果.

后来打开了原网页看了源代码,发现他们是这么做的:

 

首先画了一个15x7的div,overflow:hidden;
然后里面写了一个"◇"font-size:15px;
定位,上移7px;

(这样我们看到的效果就是">"旋转了90度的样子)

再加上hover效果2D旋转180度,就会得到这样的效果了:

这样做的好处有:

1.直接使用>会造成旋转的中心点不在div框中心点的问题;

2.使用◇比使用>少写许多行代码.

 

通过这个,我们可以发现,我们所看到的并不是全部,有些内容只是被hidden了,所以不能局限自己的思维.