鼠标滑过效果

 参考链接：http://www.jq22.com/yanshi9789

公用样式

html *,html *:before,html *:after {box-sizing:border-box;-webkit-transition:0.5s;transition:0.5s;text-align:center;}
[class^="btn-"] {position:relative;display:block;margin:20px auto;width:100%;height:80px;max-width:250px;overflow:hidden;border:1px solid currentColor;}
*:before,*:after {z-index:-1;}

@-webkit-keyframes criss-cross-left {0% {left:-20px;}
    50% {left:50%;width:20px;height:20px;}
    100% {left:50%;width:375px;height:375px;}
}
@keyframes criss-cross-left {0% {left:-20px;}
    50% {left:50%;width:20px;height:20px;}
    100% {left:50%;width:375px;height:375px;}
}
@-webkit-keyframes criss-cross-right {0% {right:-20px;}
    50% {right:50%;width:20px;height:20px;}
    100% {right:50%;width:375px;height:375px;}
}
@keyframes criss-cross-right {0% {right:-20px;}
    50% {right:50%;width:20px;height:20px;}
    100% {right:50%;width:375px;height:375px;}
}

　

效果1：Swipe

.btn-0 {color:#9a3789;line-height: 80px;}
.btn-0:before {content:'';position:absolute;top:0;left:0;width:0;height:80px;background:#520c46;}
.btn-0:hover {color:#e1c4dc;}
.btn-0:hover:before {width:250px;}
.btn-0:active {background:#881474;}

 

效果2：Diagonal Swipe

.btn-1 {color:#be876e;}
.btn-1:after {content:'';width:0;height:0;-webkit-transform:rotate(360deg);border-style:solid;border-width:0 0 0 0;border-color:#6b4432 transparent transparent transparent;position:absolute;top:0;left:0;}
.btn-1:hover {color:#ecdcd4;}
.btn-1:hover:after {border-width:330px 330px 0 0;}
.btn-1:active {background:#b27254;}

　　

效果3：Double Swipe

.btn-1-2 {color:#bc4b41;}
.btn-1-2:before {content:'';width:0;height:0;-webkit-transform:rotate(360deg);border-style:solid;border-width:0 0 0 0;border-color:transparent transparent transparent #6a1a13;position:absolute;bottom:0;left:0;}
.btn-1-2:after {content:'';width:0;height:0;-webkit-transform:rotate(360deg);border-style:solid;border-width:0 0 0 0;border-color:transparent transparent #6a1a13 transparent;position:absolute;right:0;bottom:0;}
.btn-1-2:hover {color:#ebcac7;}
.btn-1-2:hover:before {border-width:206.25px 0 0 206.25px;}
.btn-1-2:hover:after {border-width:0 0 206.25px 206.25px;}
.btn-1-2:active {background:#b02b20;}

 

效果4：Diagonal Close

.btn-2 {color:#48a6b1;}
.btn-2:before {content:'';width:0;height:0;-webkit-transform:rotate(360deg);border-style:solid;border-width:0 0 0 0;border-color:transparent transparent transparent #185a62;position:absolute;bottom:0;left:0;}
.btn-2:after {content:'';width:0;height:0;-webkit-transform:rotate(360deg);border-style:solid;border-width:0 0 0 0;border-color:transparent #185a62 transparent transparent;position:absolute;top:0;right:0;}
.btn-2:hover {color:#c9e5e8;}
.btn-2:hover:before {border-width:165px 0 0 165px;}
.btn-2:hover:after {border-width:0 165px 165px 0;}
.btn-2:active {background:#2896a3;}

 

效果5：Zoning In

.btn-3 {color:#ad96a0;}
.btn-3:before {content:'';width:0;height:0;-webkit-transform:rotate(360deg);border-style:solid;border-width:0 0 0 0;border-color:transparent transparent transparent #5f4f56;position:absolute;bottom:0;left:0;}
.btn-3:after {content:'';width:0;height:0;-webkit-transform:rotate(360deg);border-style:solid;border-width:0 0 0 0;border-color:transparent #5f4f56 transparent transparent;position:absolute;top:0;right:0;}
.btn-3 span:before {content:'';width:0;height:0;-webkit-transform:rotate(360deg);border-style:solid;border-width:0 0 0 0;border-color:transparent transparent #5f4f56 transparent;position:absolute;right:0;bottom:0;}
.btn-3 span:after {content:'';width:0;height:0;-webkit-transform:rotate(360deg);border-style:solid;border-width:0 0 0 0;border-color:#5f4f56 transparent transparent transparent;position:absolute;top:0;left:0;}
.btn-3:hover {color:#e7e0e3;}
.btn-3:hover:before {border-width:165px 0 0 165px;}
.btn-3:hover:after {border-width:0 165px 165px 0;}
.btn-3:hover span:before {border-width:0 0 165px 165px;}
.btn-3:hover span:after {border-width:165px 165px 0 0;}
.btn-3:active {background:#9e838f;}

 

效果6：4 Corners

.btn-4 {color:#8d53b3;}
.btn-4:after {content:'';width:0;height:0;-webkit-transform:rotate(360deg);border-style:solid;border-width:0 0 0 0;border-color:transparent #492064 transparent transparent;position:absolute;top:0;right:0;}
.btn-4:before {content:'';width:0;height:0;-webkit-transform:rotate(360deg);border-style:solid;border-width:0 0 0 0;border-color:transparent transparent transparent #492064;position:absolute;bottom:0;left:0;}
.btn-4:before,.btn-4:after {border-color:#492064;}
.btn-4 span:after {content:'';width:0;height:0;-webkit-transform:rotate(360deg);border-style:solid;border-width:0 0 0 0;border-color:#492064 transparent transparent transparent;position:absolute;top:0;left:0;}
.btn-4 span:before {content:'';width:0;height:0;-webkit-transform:rotate(360deg);border-style:solid;border-width:0 0 0 0;border-color:transparent transparent #492064 transparent;position:absolute;right:0;bottom:0;}
.btn-4 span:before,.btn-4 span:after {border-color:#492064;}
.btn-4:hover {color:#decde9;}
.btn-4:hover:before {border-width:20px 62.5px;}
.btn-4:hover:after {border-width:20px 62.5px;}
.btn-4:hover span:before {border-width:20px 62.5px;}
.btn-4:hover span:after {border-width:20px 62.5px;}
.btn-4:active {background:#7935a6;}

 

效果7：Slice

.btn-5 {color:#808695;}
.btn-5:after {content:'';width:0;height:0;-webkit-transform:rotate(360deg);border-style:solid;border-width:0 0 0 0;border-color:transparent #3f444e transparent transparent;position:absolute;top:0;right:0;}
.btn-5:before {content:'';width:0;height:0;-webkit-transform:rotate(360deg);border-style:solid;border-width:0 0 0 0;border-color:transparent transparent transparent #3f444e;position:absolute;bottom:0;left:0;}
.btn-5:hover {color:#dadce0;}
.btn-5:hover:before,.btn-5:hover:after {border-width:80px 262.5px;}
.btn-5:active {background:#697182;}

 

效果8：Position Aware

.btn-6 {color:#80629f;}
.btn-6 span {position:absolute;display:block;width:0;height:0;border-radius:50%;background:#402a55;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-transition:width 0.4s,height 0.4s;transition:width 0.4s,height 0.4s;z-index:-1;}
.btn-6:hover {color:#dad1e3;}
.btn-6:hover span {width:562.5px;height:562.5px;}
.btn-6:active {background:#6a468e;}

JS

$('.btn-6').on('mouseenter', function (e) {
    var parentOffset = $(this).offset(), relX = e.pageX - parentOffset.left, relY = e.pageY - parentOffset.top;
    $(this).find('span').css({
        top: relY,
        left: relX
    });
}).on('mouseout', function (e) {
    var parentOffset = $(this).offset(), relX = e.pageX - parentOffset.left, relY = e.pageY - parentOffset.top;
    $(this).find('span').css({
        top: relY,
        left: relX
    });
});

 

效果9：Alternate

.btn-7 {color:#27692b;}
.btn-7:before,.btn-7:after,.btn-7 span:before,.btn-7 span:after {content:'';position:absolute;top:0;width:63.5px;height:0;background:#012f04;}
.btn-7:before {left:0;}
.btn-7:after {left:125px;}
.btn-7 span:before,.btn-7 span:after {top:auto;bottom:0;}
.btn-7 span:before {left:62.5px;}
.btn-7 span:after {left:187.5px;}
.btn-7:hover {color:#c0d3c1;}
.btn-7:hover:before,.btn-7:hover:after,.btn-7:hover span:before,.btn-7:hover span:after {height:80px;}
.btn-7:active {background:#014f06;}

 

效果10：Smoosh

.btn-8 {color:#5177a7;}
.btn-8:before,.btn-8:after {content:'';position:absolute;top:0;left:0;width:250px;height:0;background:#1e395b;}
.btn-8:after {top:auto;bottom:0;}
.btn-8:hover {color:#ccd7e5;}
.btn-8:hover:before,.btn-8:hover:after {height:40px;}
.btn-8:active {background:#325f98;}

 

效果11：Vertical Overlap

.btn-9 {color:#c93a8e;}
.btn-9:before,.btn-9:after,.btn-9 span:before,.btn-9 span:after {content:'';position:absolute;top:0;left:0;width:250px;height:0;background:rgba(115,14,73,0.25);-webkit-transition:0.4s;transition:0.4s;}
.btn-9:after,.btn-9 span:before {top:auto;bottom:0;}
.btn-9 span:before,.btn-9 span:after {-webkit-transition-delay:0.4s;transition-delay:0.4s;}
.btn-9:hover {color:#efc5de;}
.btn-9:hover:before,.btn-9:hover:after,.btn-9:hover span:before,.btn-9:hover span:after {height:80px;}
.btn-9:active {background:#c0177a;}

 

效果12：Horizontal Overlap

.btn-10 {color:#8f5c82;}
.btn-10:before,.btn-10:after,.btn-10 span:before,.btn-10 span:after {content:'';position:absolute;top:0;left:0;width:0;height:80px;background:rgba(74,38,65,0.25);-webkit-transition:0.4s;transition:0.4s;}
.btn-10:after,.btn-10 span:before {left:auto;right:0;}
.btn-10 span:before,.btn-10 span:after {-webkit-transition-delay:0.4s;transition-delay:0.4s;}
.btn-10:hover {color:#decfda;}
.btn-10:hover:before,.btn-10:hover:after,.btn-10:hover span:before,.btn-10:hover span:after {width:250px;}
.btn-10:active {background:#7b3f6c;}

 

效果13：Collision

.btn-11 {position:relative;color:#9a7cba;}
.btn-11:before,.btn-11:after {position:absolute;top:50%;content:'';width:20px;height:20px;background:#8865ae;border-radius:50%;}
.btn-11:before {left:-20px;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);}
.btn-11:after {right:-20px;-webkit-transform:translate(50%,-50%);transform:translate(50%,-50%);}
.btn-11:hover:before {-webkit-animation:criss-cross-left 0.8s both;animation:criss-cross-left 0.8s both;}
.btn-11:hover:after {-webkit-animation:criss-cross-right 0.8s both;animation:criss-cross-right 0.8s both;}

 

效果14：翻滚

<div id="menu">
   <div class="box"><span>Home</span><span>See Us</span></div>
</div>

 

#menu {height: 100px;width: 630px;overflow: hidden;margin: 40px auto;text-align: center;}
#menu span {display: block;color: #fff; background: #e70f23;height: 100px;line-height: 100px; width: 200px;font-size: 30px;-webkit-transition: margin .4s ease-in-out;-moz-transition: margin .4s ease-in-out;-o-transition: margin .4s ease-in-out;-ms-transition: margin .4s ease-in-out;transition: margin .4s ease-in-out;}
#menu span:nth-of-type(even) {background: #000;}
#menu .box:hover :first-child {margin-top: -100px;}

 

效果15：伸长

<div id="main">
   <div id="navigationMenu">
      <a class="home" href="#"><span>Home</span></a>
   </div>
</div>

 

#main {position: relative;width: 40px;}
#navigationMenu span {width: 0;left: 38px;padding: 0;position: absolute;overflow: hidden;font-size: 18px;font-weight: bold;white-space: nowrap;line-height: 39px;-webkit-transition: 0.25s;-moz-transition: 0.25s;transition: 0.25s;}
#navigationMenu a {background: #C30;height: 39px;width: 38px;display: block;position: relative}
#navigationMenu a:hover span {width: auto;padding: 0 20px;overflow: visible;}
#navigationMenu .home:hover {background-position: 0 -39px;}
#navigationMenu .home span {background-color: #7da315;color: #3d4f0c;text-shadow: 1px 1px 0 #99bf31;}