html鼠标触摸效果,CSS3触摸效果

* {

margin:0;

padding:0;

}

body {

padding:20px;

}

div {

position:relative;

font-size:24px;

text-align:center;

width:150px;

height:40px;

margin:10px;

line-height:40px;

cursor:pointer;

}

div:before {

content:"";

position:absolute;

z-index:-1;

left:0;

bottom:0;

width:150px;

height:2px;

background:deeppink;

transform:scaleX(0);

transition:transform .5s;

}

div:hover:before {

transform:scaleX(1);

}

.two:before {

height:40px;

transform:scale3d(0,1,1);

transform-origin:0% 50%;

}

.two:hover {

color:#fff;

&:before {

transform:scale3d(1,1,1);

transform-origin:100% 50%;

transition-timing-function:ease-in;

}

;}.three:before {

height:40px;

transform:scale3d(0,0,1);

transform-origin:100% 100%;

}

.three:hover {

color:#fff;

&:before {

transform:scale3d(1,1,1);

transform-origin:0% 0%;

transition-timing-function:ease-in;

}

}.four:before {

height:40px;

transform:scale3d(0,1,1);

transform-origin:50% 100%;

}

.four:hover {

color:#fff;

&:before {

transform:scale3d(1,1,1);

transform-origin:50% 0%;

transition-timing-function:ease-in;

}

}.five:before {

height:40px;

transform:scale3d(1,0,0);

transform-origin:50% 50%;

}

.five:hover {

color:#fff;

&:before {

transform:scale3d(1,0,1);

transform-origin:100% 0%;

transition-timing-function:ease-in;

}

}p {

position:relative;

width:200px;

height:60px;

line-height:60px;

font-size:32px;

cursor:pointer;

color:#333;

text-align:center;

transition:transform .5s;

margin:10px;

}