css彩虹·,css彩虹按钮悬停动画

@import url("https://fonts.googleapis.com/css?family=Roboto:900,900i");

body {

background:#F7EBFE;

width:100%;

height:90vh;

display:flex;

justify-content:center;

align-items:center;

font-family:Roboto;

font-style:italic;

}

.button {

position:relative;

overflow:hidden;

-webkit-backface-visibility:hidden;

-moz-backface-visibility:hidden;

-webkit-transform:translate3d(0,0,0);

-moz-transform:translate3d(0,0,0);

cursor:pointer;

padding:15px 35px;

background:#9725F3;

border-radius:50px;

font-size:35px;

text-transform:uppercase;

letter-spacing:2px;

color:#F3F137;

}

.button-text {

position:relative;

}

.button-rainbow {

width:150%;

height:auto;

top:10px;

left:-25%;

position:absolute;

transition:1000ms transform cubic-bezier(0.25,0.46,0.45,0.94);

transform:translateY(0) rotate(45deg);

}

.button:hover .button-rainbow {

transform:translateY(-100%) rotate(45deg);

}