鼠标滑过效果 | 易学教程

引入css3.css , jquery.js , modernizr.js 　

公用

$('[href=#]').click(function () {
    return false;
});

css

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;}
a {text-decoration:none;}

@-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

html

<a class="btn-0" href="#">效果1</a>

css

.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

css

.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

css

.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;}

效果：Diagonal Close

css

.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;}

效果：Zoning In

css

.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;}

效果：4 Corners

css

.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;}

效果：Slice

css

.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;}

来源：https://www.cnblogs.com/wuyunna/p/11347298.html

标签

transform

border

position

hover

webkit

absolute