cssは10種類のマウスのボタン移動効果を実現
105560 ワード
htmlコード
<!DOCTYPE <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title> </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="index.css" />
</head>
<body>
<div class="box">
<div class="title"> </div>
<div class="btn-list">
<ul>
<li>
<a class="btn btn1" href="javascript:;"><span> </span>
<div class="btnbg"></div>
</a>
<a class="btn btn2" href="javascript:;"><span> </span>
<div class="btnbg"></div>
</a>
<a class="btn btn3" href="javascript:;"><span> </span>
<div class="btnbg"></div>
</a>
<a class="btn btn4" href="javascript:;">
<span> </span>
<div class="btnbg1"></div>
<div class="btnbg2"></div>
<div class="btnbg3"></div>
<div class="btnbg4"></div>
</a>
<a class="btn btn5" href="javascript:;">
<span> </span>
<div class="btnbg1"></div>
<div class="btnbg2"></div>
</a>
<a class="btn btn6" href="javascript:;">
<span> </span>
<div class="btnbg1"></div>
<div class="btnbg2"></div>
<div class="btnbg3"></div>
<div class="btnbg4"></div>
</a>
<a class="btn btn7" href="javascript:;">
<span> </span>
<div class="btnbg1"></div>
<div class="btnbg2"></div>
</a>
<a class="btn btn8" href="javascript:;">
<span> </span>
<div class="btnbg1"></div>
<div class="btnbg2"></div>
</a>
<a class="btn btn9" href="javascript:;">
<span> </span>
<div class="btnbg1"></div>
<div class="btnbg2"></div>
<div class="btnbg3"></div>
<div class="btnbg4"></div>
</a>
<a class="btn btn10" href="javascript:;"><span> </span>
<div class="btnbg"></div>
</a>
</li>
</ul>
</div>
</div>
</body>
</html>
cssコード
*{
margin: 0;
padding: 0;
}
ul, li{
list-style: none;
}
a{
color: #ccc;
text-decoration: none;
}
.box{
background: #30303c;
width: 100%;
height: 100%;
}
.title{
color: #fff;
text-align: center;
font-size: 20px;
padding: 20px 0;
}
.btn-list{
margin: 50px auto;
width: 800px;
}
.btn{
padding: 10px 40px;
font-size: 14px;
overflow: hidden;
display: inline-block;
margin: 7px;
}
/* 1 */
.btn1{
border: 1px solid #ccc;
position: relative; /* */
transition: all 0.5s; /* */
-moz-transition: all 0.5s; /* Firefox */
-webkit-transition: all 0.5s; /* Safari Chrome */
}
.btn1 .btnbg{
position: absolute; /* */
left: 50%;
width: 0;
top: 0;
bottom: 0;
transition: all 0.5s; /* */
-moz-transition: all 0.5s; /* Firefox */
-webkit-transition: all 0.5s; /* Safari Chrome */
background: #f55336;
}
.btn1:hover{
border-color: #f55336;
color: #fff;
}
.btn1:hover .btnbg{
width: 100%;
left: 0;
}
.btn1 span{
position: relative;
z-index: 1;
}
/* 2 */
.btn2{
/* transform 2D 3D 。 、 、 */
/* translateZ(z) 3D ， Z */
/* perspective(n) 3D */
transform: perspective(1px) translateZ(0);
-webkit-transform: perspective(1px) translateZ(0);
/* transition-property CSS */
transition-property: color;
-webkit-transition-property: color;
transition-duration: 0.5s; /* */
-webkit-transition-duration: 0.5s;
border: 1px solid #ccc;
position: relative; /* */
}
.btn2:hover{
border-color: #ffca28;
color: #fff;
}
.btn2 .btnbg{
background: #ffca28;
position: absolute;
z-index: -1;
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
/* X */
transform: scaleX(0);
-webkit-transform: scaleX(0);
/* */
transform-origin: 0 50%;
-webkit-transform-origin: 0 50%;
/* */
transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
/* */
/* ease-out （ cubic-bezier(0,0,0.58,1)） */
transition-timing-function: ease-out;
-webkit-transition-timing-function: ease-out;
opacity: 0;
filter: alpha(opacity=0);
}
.btn2:hover .btnbg{
/* */
/* ease-out （ cubic-bezier(0,0,0.58,1)） */
transition-timing-function: cubic-bezier(0.52,1.64,0.37,0.66);
-webkit-transition-timing-function: cubic-bezier(0.52,1.64,0.37,0.66);
/* scaleX */
transform: scaleX(1);
-webkit-transform: scaleX(1);
opacity: 1;
filter: alpha(opacity=100);
}
/* 3 */
.btn3{
border: 1px solid #ccc;
position: relative; /* */
transition: border-color .3s, color .3s;
-webkit-transition: border-color .3s, color .3s;
/* */
transition-timing-function: cubic-bezier(.2,1,.3,1);
-webkit-transition-timing-function: cubic-bezier(.2,1,.3,1);
}
.btn3:hover{
color: #fff;
border-color: #d500f9;
}
.btn3 .btnbg{
background: #d500f9;
position: absolute;
top: 0;
left: 0;
width: 150%;
height: 100%;
z-index: 1;
opacity: 0;
filter: alpha(opacity=0);
/* div */
transform: rotate3d(0,0,1,-45deg) translate3d(0,-3em,0);
-webkit-transform: rotate3d(0,0,1,-45deg) translate3d(0,-3em,0);
/* */
transform-origin: 0% 100%;
-webkit-transform-origin: 0% 100%;
transition: transform .3s, opacity .3s;
-webkit-transform: -webkit-transform .3s, opacity .3s;
}
.btn3:hover .btnbg{
opacity: 1;
filter: alpha(opacity=100);
/* div */
transform: rotate3d(0,0,1,0deg);
-webkit-transform: rotate3d(0,0,1,0deg);
/* */
transition-timing-function: cubic-bezier(.2,1,.3,1);
-webkit-transition-timing-function: cubic-bezier(.2,1,.3,1);
}
.btn3 span{
position: relative;
z-index: 2;
}
/* 4 */
.btn4{
border: 1px solid #ccc;
position: relative; /* */
transition: all .4s;
-webkit-transition: all .4s;
}
.btn4:hover{
color: #fff;
border-color: #f06292;
}
.btn4 .btnbg1, .btn4 .btnbg2, .btn4 .btnbg3, .btn4 .btnbg4{
background: #f06292;
position: absolute;
width: 25%;
height: 0;
/* ， */
transition: height .4s;
-webkit-transition: height .4s;
}
.btn4 .btnbg1{
top: 0;
left: 0;
}
.btn4 .btnbg2{
bottom: 0;
left: 25%;
}
.btn4 .btnbg3{
top: 0;
left: 50%;
}
.btn4 .btnbg4{
bottom: 0;
left: 75%;
}
.btn4:hover .btnbg1, .btn4:hover .btnbg2, .btn4:hover .btnbg3, .btn4:hover .btnbg4{
height: 100%;
}
.btn4 span{
position: relative;
z-index: 1;
}
/* 5 */
.btn5{
border: 1px solid #ccc;
position: relative; /* */
transition: all .5s;
-webkit-transition: all .5s;
}
.btn5:hover{
border-color: #ff5252;
color: #fff;
}
.btn5 .btnbg1, .btn5 .btnbg2{
content: '';
width: 0;
height: 0;
/* 2D 3D 。 、 、 */
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
border-style: solid;
border-width: 0;
/* transparent */
border-top-color: transparent;
border-bottom-color: transparent;
position: absolute;
/* */
transition: all 0.6s;
-webkit-transition: all 0.6s;
}
.btn5 .btnbg1{
border-right-color: transparent;
border-left-color: #ff5252;
bottom: 0;
left: 0;
}
.btn5 .btnbg2{
/* transparent */
border-left-color: transparent;
border-right-color: #ff5252;
top: 0;
right: 0;
}
.btn5:hover .btnbg1{
border-width: 200px 0 0 200px;
}
.btn5:hover .btnbg2{
border-width: 0 200px 200px 0;
}
.btn5 span{
position: relative;
z-index: 1;
}
/* 6 */
.btn6{
border: 1px solid #ccc;
position: relative; /* */
/* transition */
transition: all .6s;
-webkit-transition: all .6s;
}
.btn6:hover{
border-color: #40c4ff;
color: #fff;
}
.btn6 .btnbg1, .btn6 .btnbg2, .btn6 .btnbg3, .btn6 .btnbg4{
content: '';
width: 0;
height: 0;
/* div */
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
border-style: solid;
border-width: 0;
position: absolute;
transition: all 0.6s;
-webkit-transition: all 0.6s;
}
.btn6 .btnbg1{
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: #40c4ff;
bottom: 0;
left: 0;
}
.btn6 .btnbg2{
border-top-color: #40c4ff;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
top: 0;
left: 0;
}
.btn6 .btnbg3{
border-top-color: transparent;
border-right-color: #40c4ff;
border-bottom-color: transparent;
border-left-color: transparent;
top: 0;
right: 0;
}
.btn6 .btnbg4{
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: #40c4ff;
border-left-color: transparent;
bottom: 0;
right: 0;
}
.btn6:hover .btnbg1{
border-width: 200px 0 0 200px;
}
.btn6:hover .btnbg2{
border-width: 200px 200px 0 0;
}
.btn6:hover .btnbg3{
border-width: 0 200px 200px 0;
}
.btn6:hover .btnbg4{
border-width: 0 0 200px 200px;
}
.btn6 span{
position: relative;
z-index: 1;
}
/* 7 */
.btn7{
border: 1px solid #ccc;
position: relative; /* */
transition: all .6s;
-webkit-transition: all .6s;
}
.btn7:hover{
border-color: #00e676;
color: #fff;
}
.btn7 .btnbg1, .btn7 .btnbg2{
background: #00e676;
position: absolute;
top: 50%;
top:0\9;
content: '';
width: 20px;
height: 20px;
border-radius: 10px;
transition: all .6s;
-webkit-transition: all .6s;
opacity: 0.5;
}
.btn7 .btnbg1{
left: -20px;
/* translate(-50%,-50%) ， （x ）, （y ） 50%， */
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
}
.btn7 .btnbg2{
right: -20px;
transform: translate(50%,-50%);
-webkit-transform: translate(50%,-50%);
}
.btn7:hover .btnbg1{
opacity: 1;
animation: criss-cross-left .9s both;
-webkit-animation: criss-cross-left .9s both;
width: 375px\9;
height: 375px\9;
}
.btn7:hover .btnbg2{
opacity: 1;
animation: criss-cross-right .9s both;
-webkit-animation: criss-cross-right .9s both;
width: 375px\9;
height: 375px\9;
}
.btn7 span{
position: relative;
z-index: 1;
}
@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-left{
0%{
left: -20px;
}
50%{
left: 50%;
width: 20px;
height: 20px;
}
100%{
left: 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;
}
}
@-webkit-keyframes criss-cross-right{
0%{
right: -20px;
}
50%{
right: 50%;
width: 20px;
height: 20px;
}
100%{
right: 50%;
width: 375px;
height: 375px;
}
}
/* 8 */
.btn8{
border: 1px solid #ccc;
position: relative; /* */
transition: all .6s;
-webkit-transition: all .6s;
}
.btn8:hover{
border-color: #009688;
color: #fff;
}
.btn8 .btnbg1, .btn8 .btnbg2{
content: '';
width: 0;
height: 0;
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
border-style: solid;
border-width: 0;
border-top-color: transparent;
border-bottom-color: transparent;
background: #009688;
position: absolute;
transition: all .6s;
-webkit-transition: all .6s;
}
.btn8 .btnbg1{
border-right-color: transparent;
border-left-color: #009688;
bottom: 0;
left: 0;
}
.btn8 .btnbg2{
border-right-color:#009688;
border-left-color: transparent;
top: 0;
right: 0;
}
.btn8:hover .btnbg1{
border-width: 50px 260px;
}
.btn8:hover .btnbg2{
border-width: 50px 260px;
}
.btn8 span{
position: relative;
z-index: 1;
}
/* 9 */
.btn9{
border: 1px solid #ccc;
position: relative; /* */
transition: all .6s;
-webkit-transition: all .6s;
}
.btn9:hover{
border-color: #2979ff;
color: #fff;
}
.btn9 .btnbg1, .btn9 .btnbg2, .btn9 .btnbg3, .btn9 .btnbg4{
background: #2979ff;
position: absolute;
top: 0;
width: 0;
height: 100%;
transition: all .4s;
-webkit-transition: all .4s;
opacity: 0.35;
}
.btn9 .btnbg3, .btn9 .btnbg4{
opacity: 0.75;
}
.btn9 .btnbg1{
left: 0;
}
.btn9 .btnbg2{
right: 0;
}
.btn9 .btnbg3{
right: 0;
}
.btn9 .btnbg4{
left: 0;
}
.btn9:hover .btnbg1, .btn9:hover .btnbg2, .btn9:hover .btnbg3, .btn9:hover .btnbg4{
width: 100%;
}
.btn9:hover .btnbg3, .btn9:hover .btnbg4{
/* 0.4 */
transition-delay: .4s;
-webkit-transition-delay: .4s;
}
.btn9 span{
position: relative;
z-index: 1;
}
/* 10 */
.btn10{
border: 1px solid #ccc;
position: relative; /* */
transition: all .6s;
-webkit-transition: all .6s;
}
.btn10:hover{
border-color: #00e5ff;
color: #fff;
}
.btn10 .btnbg{
background: #00e5ff;
position: absolute;
width: 0;
height: 0;
border-radius: 50%;
/* translate(-50%,-50%) ， （x ）, （y ） 50%， */
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
transition: width .6s,height .6s;
-webkit-transition: width .6s,height .6s;
left: 0;
top: 0;
}
.btn10:hover .btnbg{
width: 600px;
height: 600px;
}
.btn10 span{
position: relative;
z-index: 1;
}