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',\5b8b\4f53,sans-serif;} .wrap{width: 1000px; margin: 50px auto;} ul{list-style: none; overflow: hidden;} ul li{float: left; width: 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; width: 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; width: 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; width: 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; width: 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; width: 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; width: 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{ width: 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; width: 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>
伪类,伪元素
要做上面的例子,必须分清和学会伪类,伪元素
伪类
一般使用伪类是这样 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个面放好,然后旋转容器
1609
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
