hover_html/css_WEB-ITnose
- WBOY原创
- 2016-06-24 11:44:371110浏览
hover 鼠标放上去的效果
看到一个网站介绍了很多的例子http://tympanus.net/Development/CreativeLinkEffects/
然后学着把上面的例子全部写了一下
其实都比较简单 除了3d旋转的那2个可能麻烦点
嗯 记录下这些例子,方便以后遗忘了,回头来看看咯
例子集合
伪类,伪元素
一些例子的理解
伪类,伪元素
要做上面的例子,必须分清和学会伪类,伪元素
伪类
去这个连接看看吧 http://wenku.baidu.com/link?url=cOVkL1-IutGmPcziO7OS2WLGOMwAW5erUFF1SHfOVSd1t6HC22YsuOVkhgX3uFh1IBCx42p17mXhGoDk_YAv0oSy-Sf_Ty4VWXXY3EzS0Ci
一般使用伪类是这样 d:hover
伪元素
伪元素是真实存在的元素,可以给这个元素加样式
为了区分伪类,伪元素一般这么写a::before
一些例子的理解
demo1
1.在文字前后加上伪元素after before
2.把伪元素隐藏,填充内容"[","]"
3.把before水平向右移动10px,把after水平向右移动10px
4.当鼠标移动上去时(a:hover),显示伪元素,并且把before和after的移动到合适的位置(a:hover::before)
demo2
1.首先将a元素设置成over:hidden,因为效果里面明显的向上滚动的时候,外围元素是遮住了文字的
2.因为是上下结构的,after在文字的下面,所以span相对定位,afert决定定位,top:100%,就能让after的文字在span的文字下面了
3.如何填充文字了,取span的data-hover属性来填充,content:attr(data-hover)
4.当鼠标放到span上边的时候(span:hover),让span整体上移100%就行了
demo3
1. 2个横杠需要在文字的上下2边,所以a元素要相对定位,伪元素决定定位
2. 下面的伪元素top:100%，定在下面,然后缩放变小transform: scale(0.90),上面的伪元素也放下面,缩小,然后隐藏
3. 鼠标放上去的时候,下面的伪元素放大,上面的伪元素移动到上面(top:0),并且放大,透明度设置成1
demo3
1.首先将a元素设置成over:hidden,起到容器的作用
2.span要相对定位,因为伪元素在文字的前面,用绝对定位会比较简单(left:-100%)
3.鼠标放上去的时候(span:hover)，整体让span要右移动100%即可
1.a要相对定位,伪元素要绝对定位,让伪元素覆盖在文字上,伪元素大小和a元素的大小一样
2.文字要left，然后把伪元素宽度设置成0
3.鼠标放到a上面来的时候,把伪元素宽度设置成100%
1.a要相对定位,伪元素要绝对定位,让伪元素覆盖在文字上,伪元素大小和a元素的大小一样
2.鼠标放上去的时候,让伪元素缩放变小,并且透明度设置成0
上面的例子都比较简单,弄清楚伪类,伪元素,有一定的css基础即可,下面的例子就要复杂一些了
1.以a元素为容器,所以a要设置perspective(这个css很重要,会让3d效果好很多),设置好视角
2.span设置成块状即可
3.伪元素设置成块状,然后旋转90度,就是想一张纸,平方在眼前
4.因为是做的从下往上翻,所以这张纸要放到span的下面,所以top:100%
5.鼠标放上去的时候将span元素整个延x轴旋转90度即可
做这个想过感觉就是把2个面放好位置,然后旋转一下容器就可以了
来试试4个面的旋转，把4个面放好,然后旋转容器
1
2
3
4