hover

zoukankan html css js c++ java

hover
hover 鼠标放上去的效果

看到一个网站介绍了很多的例子http://tympanus.net/Development/CreativeLinkEffects/

然后学着把上面的例子全部写了一下

其实都比较简单除了3d旋转的那2个可能麻烦点

嗯记录下这些例子,方便以后遗忘了,回头来看看咯

例子集合

<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <title>测试咯</title> </head> <body> <style> *{padding:0; margin:0; font: 18px tahoma,arial,'Hiragino Sans GB',5b8b4f53,sans-serif;} .wrap{ 1000px; margin: 50px auto;} ul{list-style: none; overflow: hidden;} ul li{float: left; 200px; text-align: center; padding:10px; } a{color: #fff; text-decoration:none;} .mt50{ margin-top: 50px;} #demo1 {background: #435a6b; padding: 50px; } #demo1 a::before{content: "["; opacity: 0; -webkit-transform: translateX(10px); transform: translateX(10px); display: inline-block; -webkit-transition: -webkit-transform 0.3s, opacity 0.2s; -moz-transition: -moz-transform 0.3s, opacity 0.2s; transition: transform 0.3s, opacity 0.2s; } #demo1 a::after{content: "]";opacity: 0; -webkit-transform: translateX(-10px); transform: translateX(-10px); display: inline-block; -webkit-transition: -webkit-transform 0.3s, opacity 0.2s; -moz-transition: -moz-transform 0.3s, opacity 0.2s; transition: transform 0.3s, opacity 0.2s; } #demo1 a:hover::before{ opacity: 1; -webkit-transform: translateX(-5px); transform: translateX(-5px);-moz-transition:translateX(-5px); } #demo1 a:hover::after{ opacity: 1; -webkit-transform: translateX(5px); transform: translateX(5px);-moz-transition:translateX(5px); } #demo2 {background: #0e83cd; padding: 50px;font-size:18px;} #demo2 a {-webkit-perspective: 1000px;-moz-perspective: 1000px;perspective: 1000px;line-height: 44px; display: inline-block;} #demo2 span{ position: relative; display: inline-block;padding: 0 10px;line-height:44px;background: #2195de; -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; transform-origin: 0 0; } #demo2 span:hover{ -webkit-transform: rotateX(90deg) translateY(-12px); -moz-transform: rotateX(90deg) translateY(-12px); transform: rotateX(90deg) translateY(-12px); } #demo2 span::before{ position: absolute; top: 100%; left: 0; 100%; height: 100%; background: #0965a0; content: attr(data-hover); line-height: 44px; -webkit-transition: background 0.3s; -moz-transition: background 0.3s; transition: background 0.3s; -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); transform: rotateX(-90deg); -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; transform-origin: 0 0; } #demo2 span:hover::before{ background: #2195de; } #demo3 {background: #f19f0f; padding: 50px;} #demo3 a{ display: inline-block; position: relative; font-size:20px; } #demo3 a::after{ position: absolute; top: 100%; left: 0; 100%; height: 1px; background:#F7F7F7; opacity : 0; content: ''; -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; -moz-transition: opacity 0.3s, -moz-transform 0.3s; transition: opacity 0.3s, transform 0.3s; -webkit-transform: translateY(10px); -moz-transform: translateY(10px); transform: translateY(10px); } #demo3 a:hover::after{ height: 4px; opacity:0.4; -webkit-transform: translateY(2px); -moz-transform: translateY(2px); transform: translateY(2px); } #demo4 {background:#cd4436; padding: 50px;} #demo4 a{ overflow: hidden; display: inline-block; position: relative; } #demo4 a span{ position: relative; display: inline-block; -webkit-transition: -webkit-transform 0.3s; -moz-transition:-moz-transform 0.3s; transition:transform 0.3s; } #demo4 a span::after{ position: absolute; top : 100%; left: 0; font-weight:bold; content: attr(data-hover); } #demo4 a span:hover{ -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); transform: translateY(-100%); } #demo5{background:#ecf0f1; padding: 50px;} #demo5 a{color: #566473; display: inline-block; font-weight: bold; position: relative; padding:10px 5px;} #demo5 a::after{ height: 4px; left: 0; 100%; position: absolute; top:100%; background: #566473; content: ""; -webkit-transform: scale(0.90); -moz-transform: scale(0.90); transform: scale(0.90); -webkit-transition: -webkit-transform 0.3s; -moz-transition:-moz-transform 0.3s; transition:transform 0.3s; } #demo5 a::before{ height: 4px; left: 0; 100%; position: absolute; top:100%; background: #566473; content: ""; opacity:0; -webkit-transform: scale(0.90); -moz-transform: scale(0.90); transform: scale(0.90); -webkit-transition:opacity 0.3s,top 0.3s, -webkit-transform 0.3s; -moz-transition:opacity 0.3s,top 0.3s,-moz-transform 0.3s; transition:opacity 0.3s,top 0.3s,transform 0.3s; } #demo5 a:hover::after{ -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); } #demo5 a:hover::before{ top:0%; opacity:1; -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); } #demo6{background:#16a085; padding: 50px; } #demo6 a{ overflow: hidden; display: inline-block; } #demo6 a span{ position: relative; display: inline-block; background: #0f7c67; color: #fff; padding: 10px 20px; -webkit-transition: -webkit-transform 0.3s; -moz-transition:-moz-transform 0.3s; transition:transform 0.3s; -webkit-transform: translateX(0); -moz-transform: translateX(0); transform: translateX(0); box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; } #demo6 a span::before{ padding: 10px 20px; position: absolute; 100%; left: -100%; top:0; background:#fff; color:#0f7c67; content:attr(data-hover); box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; } #demo6 a span:hover{ -webkit-transform: translateX(100%); -moz-transform: translateX(100%); transform: translateX(100%); } #demo7{ background:#0e83cd;padding: 50px; } #demo7 li{text-align: left;} #demo7 a{ overflow: hidden; display: inline-block; position: relative; color: #0972b4 } #demo7 a::before{ position: absolute; top: 0; left: 0; overflow: hidden; 0; height: 100%; color:#fff; content: attr(data-hover); -webkit-transition:width 0.4s -moz-transition:width 0.4s; transition:width 0.4s; } #demo7 a:hover::before{ width : 100%; } #demo8{ background:#2ac56c;padding: 50px; } #demo8 a{ position: relative; color: #CCCCCC; } #demo8 a::before{ position:absolute; left: 0; top:0; color: #fff; content: attr(data-hover); -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; -moz-transition: -moz-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; } #demo8 a:hover::before{ -webkit-transform: scale(0.7); -moz-transform: scale(0.7); transform: scale(0.7); opacity: 0; } #demo9{ background:#0e83cd;padding: 50px; } #demo9 a {color:#10649b; position: relative;} #demo9 a::before{ overflow: hidden; position: absolute; height: 100%; top:0; left:0; content: attr(data-hover); color: #fff; -webkit-transition:height 0.3s,opacity 0.3s; -moz-transition: height 0.3s,opacity 0.3s; transition:height 0.3s,opacity 0.3s; } #demo9 a::after{ 100%; height: 2px; background: #fff; position: absolute; bottom: -15px; left: 0; opacity: 0; content: ''; -webkit-transition: bottom 0.3s, opacity 0.3s; -moz-transition: bottom 0.3s, opacity 0.3s; transition: bottom 0.3s, opacity 0.3s; } #demo9 a:hover::before{ height: 0%; opacity:0; } #demo9 a:hover::after{ bottom: -8px; opacity:1; } </style> <div class="wrap"> <div id="demo1"> <ul > <li><a href="javascript:;">蚂蚁蚂蚁蚂蚁</a></li> <li><a href="javascript:;">蝮蛇蝮蛇蝮蛇</a></li> <li><a href="javascript:;">伐木机伐木机</a></li> <li><a href="javascript:;">蓝胖子蓝胖子</a></li> </ul> </div> <div id="demo2" > <ul > <li> <a href="javascript:;"><span data-hover="蚂蚁蚂蚁蚂蚁">蚂蚁蚂蚁蚂蚁</span></a> </li> <li> <a href="javascript:;"><span data-hover="蝮蛇蝮蛇蝮蛇">蝮蛇蝮蛇蝮蛇</span></a> </li> <li> <a href="javascript:;"><span data-hover="伐木机伐木机">伐木机伐木机</span></a> </li> <li> <a href="javascript:;"><span data-hover="蓝胖子蓝胖子">蓝胖子蓝胖子</span></a> </li> </ul> </div> <div id="demo3"> <ul > <li><a href="javascript:;">蚂蚁蚂蚁蚂蚁</a></li> <li><a href="javascript:;">蝮蛇蝮蛇蝮蛇</a></li> <li><a href="javascript:;">伐木机伐木机</a></li> <li><a href="javascript:;">蓝胖子蓝胖子</a></li> </ul> </div> <div id="demo4" > <ul > <li> <a href="javascript:;"><span data-hover="蚂蚁蚂蚁蚂蚁">蚂蚁蚂蚁蚂蚁</span></a> </li> <li> <a href="javascript:;"><span data-hover="蝮蛇蝮蛇蝮蛇">蝮蛇蝮蛇蝮蛇</span></a> </li> <li> <a href="javascript:;"><span data-hover="伐木机伐木机">伐木机伐木机</span></a> </li> <li> <a href="javascript:;"><span data-hover="蓝胖子蓝胖子">蓝胖子蓝胖子</span></a> </li> </ul> </div> <div id="demo5"> <ul > <li><a href="javascript:;">蚂蚁蚂蚁蚂蚁</a></li> <li><a href="javascript:;">蝮蛇蝮蛇蝮蛇</a></li> <li><a href="javascript:;">伐木机伐木机</a></li> <li><a href="javascript:;">蓝胖子蓝胖子</a></li> </ul> </div> <div id="demo6"> <ul > <li> <a href="javascript:;"><span data-hover="蚂蚁蚂蚁蚂蚁">蚂蚁蚂蚁蚂蚁</span></a> </li> <li> <a href="javascript:;"><span data-hover="蝮蛇蝮蛇蝮蛇">蝮蛇蝮蛇蝮蛇</span></a> </li> <li> <a href="javascript:;"><span data-hover="伐木机伐木机">伐木机伐木机</span></a> </li> <li> <a href="javascript:;"><span data-hover="蓝胖子蓝胖子">蓝胖子蓝胖子</span></a> </li> </ul> </div> <div id="demo7"> <ul > <li><a href="javascript:;" data-hover="蚂蚁蚂蚁蚂蚁">蚂蚁蚂蚁蚂蚁</a></li> <li><a href="javascript:;" data-hover="蝮蛇蝮蛇蝮蛇">蝮蛇蝮蛇蝮蛇</a></li> <li><a href="javascript:;" data-hover="伐木机伐木机">伐木机伐木机</a></li> <li><a href="javascript:;" data-hover="蓝胖子蓝胖子">蓝胖子蓝胖子</a></li> </ul> </div> <div id="demo8"> <ul > <li><a href="javascript:;" data-hover="蚂蚁蚂蚁蚂蚁">蚂蚁蚂蚁蚂蚁</a></li> <li><a href="javascript:;" data-hover="蝮蛇蝮蛇蝮蛇">蝮蛇蝮蛇蝮蛇</a></li> <li><a href="javascript:;" data-hover="伐木机伐木机">伐木机伐木机</a></li> <li><a href="javascript:;" data-hover="蓝胖子蓝胖子">蓝胖子蓝胖子</a></li> </ul> </div> <div id="demo9"> <ul > <li><a href="javascript:;" data-hover="蚂蚁蚂蚁蚂蚁">蚂蚁蚂蚁蚂蚁</a></li> <li><a href="javascript:;" data-hover="蝮蛇蝮蛇蝮蛇">蝮蛇蝮蛇蝮蛇</a></li> <li><a href="javascript:;" data-hover="伐木机伐木机">伐木机伐木机</a></li> <li><a href="javascript:;" data-hover="蓝胖子蓝胖子">蓝胖子蓝胖子</a></li> </ul> </div> <style> #demo10{ background:#435a6b;padding: 50px; } #demo10 ul{overflow: visible;} #demo10 ul::after{content:"";display:table;clear:both;} #demo10 a{display:inline-block;-webkit-perspective: 1000px;-moz-perspective: 1000px;perspective: 1000px;} #demo10 span{ padding: 10px; display:inline-block; position: relative; color: #fff; background: #587285; box-shadow: inset 0 3px #2f4351; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition:-background 0.5s; -moz-transition: background 0.5s; transition:background 0.5s; } #demo10 span::before{ left: 0; top: 0; position: absolute; display: inline-block; background: #fff; color: #587285; padding: 10px; content: attr(data-hover); -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateX(270deg); -moz-transform: rotateX(270deg); transform: rotateX(270deg); -webkit-transition:-webkit-transform 0.5s; -moz-transition: -moz-transform 0.5s; transition:transform 0.5s; } #demo10 span:hover{ background: #2f4351; } #demo10 span:hover::before{ -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); transform: rotateX(0deg); } </style> <div id="demo10"> <ul > <li> <a href="javascript:;"><span data-hover="蚂蚁蚂蚁蚂蚁">蚂蚁蚂蚁蚂蚁</span></a> </li> <li> <a href="javascript:;"><span data-hover="蝮蛇蝮蛇蝮蛇">蝮蛇蝮蛇蝮蛇</span></a> </li> <li> <a href="javascript:;"><span data-hover="伐木机伐木机">伐木机伐木机</span></a> </li> <li> <a href="javascript:;"><span data-hover="蓝胖子蓝胖子">蓝胖子蓝胖子</span></a> </li> </ul> </div> <style> #demo11{ background:#cd4436;padding: 50px;} #demo11 a{display:inline-block;-webkit-perspective: 1000px;-moz-perspective: 1000px;perspective: 1000px;} #demo11 span{ position: relative; display: inline-block; padding: 10px 15px; background:#e35041; -webkit-transform-origin: 50% 50% -69px; -moz-transform-origin: 50% 50% -69px; transform-origin: 50% 50% -69px; -webkit-transition:-webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition:transform 0.3s; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); transform: rotateY(0deg); } #demo11 span:hover{ background: #b53a2d; -webkit-transform: rotateY(-90deg); -moz-transform: rotateY(-90deg); transform: rotateY(-90deg); } #demo11 span::before{ display: inline-block; position: absolute; 100%; left: 100%; top: 0; background: #b53a2d; content: attr(data-hover); padding: 10px 15px; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; transform-origin: 0 0; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; } #demo11 span:hover::before{ background:#e35041; } </style> <div id="demo11"> <ul > <li> <a href="javascript:;"><span data-hover="蚂蚁蚂蚁蚂蚁">蚂蚁蚂蚁蚂蚁</span></a> </li> <li> <a href="javascript:;"><span data-hover="蝮蛇蝮蛇蝮蛇">蝮蛇蝮蛇蝮蛇</span></a> </li> <li> <a href="javascript:;"><span data-hover="伐木机伐木机">伐木机伐木机</span></a> </li> <li> <a href="javascript:;"><span data-hover="蓝胖子蓝胖子">蓝胖子蓝胖子</span></a> </li> </ul> </div> </body> </html>

伪类,伪元素

一些例子的理解

伪类,伪元素

要做上面的例子,必须分清和学会伪类,伪元素

伪类

去这个连接看看吧 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
查看全文

相关阅读:
POJ 1811 Prime Test 素性测试分解素因子
 sysbench的安装与使用
 电脑中已有VS2005和VS2010安装.NET3.5失败的解决方案
 I.MX6 show battery states in commandLine
RPi 2B Raspbian system install
I.MX6 bq27441 driver porting
I.MX6 隐藏电池图标
 I.MX6 Power off register hacking
I.MX6 Goodix GT9xx touchscreen driver porting
busybox filesystem httpd php-5.5.31 sqlite3 webserver

原文地址：https://www.cnblogs.com/wtcsy/p/hover.html

伪类,伪元素

一些例子的理解