hover_html/css_WEB-ITnose

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