<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>login</title>
<style type="text/css" media="screen">
/* 公用样式 */
body{
margin:0;
height: 0;
background-color: #F1F1F1;
}
.warp{
width: 250px;
height: 150px;
background-color: #5e7c87;
float:left;
margin:15px 15px;
box-shadow: 10px 10px 5px #888888;
}
.sim-button{
line-height: 50px;
height: 50px;
text-align: center;
margin-right: auto;
margin-left: auto;
margin-top: 50px;
width: 60%;
cursor: pointer;
color: rgba(255,255,255,1);
border: 1px solid rgba(255,255,255,0.5);
}
/* 效果六 */
.button6{
border:none;
position: relative;
}
.button6::before{
content: ‘‘;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(255,255,255,0.5);
transition: all 0.5s ;
}
.button6:hover::before{
opacity:0;
transform: scale(0.5,0.5);
}
.button6::after{
content:‘‘;
width:100%;
height:100%;
position: absolute;
left: 0;
top: 0;
opacity:0;
border: 1px solid rgba(255,255,255,0.5);
transform: scale(1.2,1.2);
transition: all 0.5s ;
}
.button6:hover::after{
opacity:1;
-webkit-transform: scale(1,1);
transform: scale(1,1);
}
/* 效果七 27*/
.button7{
border: 1px solid rgba(255,255,255,0.5);
transition: all 0.5s ;
overflow:hidden;
position: relative;
}
.button7:hover{
border: 1px solid rgba(255,255,255,0);
}
.button7::before{
content: ‘‘;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background-color: rgba(255,255,255,0.5);
transform: translate(-100%, -600%) rotate(9deg);
transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
transition: all 0.5s ;
}
.button7:hover::before{
transform: translate(0,0);
}
/* 效果八 */
.button8{
color:rgba(255,255,255,1);
border:none;
position: relative;
}
.button8:hover>span{
letter-spacing: 2px;
}
.button8::before{
content:‘‘;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0;
transition: all 0.3s;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: rgba(255,255,255,0.5);
border-bottom-color: rgba(255,255,255,0.5);
transform: scale(0.1, 1);
}
.button8:hover::before{
opacity: 1;
transform: scale(1, 1);
}
.button8::after{
content: ‘‘;
position: absolute;
left: 0;
top: 0;
width: 100%;
height:100%;
z-index:1;
background-color: rgba(255,255,255,0.25);
transition: all 0.3s;
}
.button8:hover::after{
opacity:0;
-webkit-transform: scale(0.1, 1);
transform: scale(0.1, 1);
}
/* 效果九 */
.button9{
color: rgba(255,255,255,1);
border:none;
position: relative;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: rgba(255,255,255,0.5);
border-bottom-color: rgba(255,255,255,0.5);
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.button9:hover span{
letter-spacing: 2px;
}
.button9:hover{
border-top-color: rgba(255,255,255,0);
border-bottom-color: rgba(255,255,255,0);
}
.button9::before{
content: ‘‘;
position: absolute;
top: 0;
right: 0;
width: 1px;
height: 100%;
z-index: 1;
transition: all 0.3s;
background-color: rgba(255,255,255,0.5);
}
.button9:hover::before{
transform: translate(-76px,0) rotate(270deg);
}
.button9::after{
content: ‘‘;
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 100%;
z-index: 1;
transition: all 0.3s;
background-color: rgba(255,255,255,0.5);
}
.button9:hover::after{
transform: translate(76px,0) rotate(180deg);
}
.button10{
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.button10:hover{
animation-name: move;
animation-duration: 1s;
animation-fill-mode: both;
background-color: rgba(255,255,255,0.2);
}
@-webkit-keyframes move {
from, 11.1%, to {
-webkit-transform: none;
transform: none;
}
22.2% {
transform: skewX(-12.5deg) skewY(-12.5deg);
}
33.3% {
transform: skewX(6.25deg) skewY(6.25deg);
}
44.4% {
transform: skewX(-3.125deg) skewY(-3.125deg);
}
55.5% {
transform: skewX(1.5625deg) skewY(1.5625deg);
}
66.6% {
transform: skewX(-0.78125deg) skewY(-0.78125deg);
}
77.7% {
transform: skewX(0.390625deg) skewY(0.390625deg);
}
88.8% {
transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
}
}
@keyframes move {
from, 11.1%, to {
transform: none;
}
22.2% {
transform: skewX(-12.5deg) skewY(-12.5deg);
}
33.3% {
transform: skewX(6.25deg) skewY(6.25deg);
}
44.4% {
transform: skewX(-3.125deg) skewY(-3.125deg);
}
55.5% {
transform: skewX(1.5625deg) skewY(1.5625deg);
}
66.6% {
transform: skewX(-0.78125deg) skewY(-0.78125deg);
}
77.7% {
transform: skewX(0.390625deg) skewY(0.390625deg);
}
88.8% {
transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
}
}
</style>
</head>
<body>
<div class="warp">
<div class="sim-button button6">
<span>login6</span>
</div>
</div>
<div class="warp">
<div class="sim-button button7">
<span>login7</span>
</div>
</div>
<div class="warp">
<div class="sim-button button8">
<span>login8</span>
</div>
</div>
<div class="warp">
<div class="sim-button button9">
<span>login9</span>
</div>
</div>
<div class="warp">
<div class="sim-button button10">
<span>login10</span>
</div>
</div>
</body>
</html>
