css+按钮划过变亮,CSS3 悬停在按钮上时闪过流光的动效

CSS

语言：

CSSSCSS

确定

@import "https://fonts.googleapis.com/css?family=Anton";

* {

box-sizing: border-box;

}

html {

font-size: 62.5%;

}

body {

height: 100vh;

background-color: #071432;

}

.skew-button {

position: absolute;

left: 50%;

top: 50%;

-webkit-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

}

.skew-button {

outline: none;

position: relative;

display: inline-block;

padding: 0;

background-color: transparent;

border: none;

font: 1.3rem 'Anton', sans-serif;

text-transform: uppercase;

letter-spacing: 0.1em;

color: #fff;

}

.skew-button span {

position: relative;

display: block;

width: 100%;

height: 100%;

padding: 20px 50px;

z-index: 3;

}

.skew-button:before,

.skew-button span:before {

content: '';

position: absolute;

left: 50%;

top: 50%;

-webkit-transform: translate(-50%, -50%) skewX(-20deg);

transform: translate(-50%, -50%) skewX(-20deg);

width: 100%;

height: 50px;

border: 1px solid #0e3876;

z-index: 2;

}

.skew-button span:before {

display: block;

-webkit-transform: translate(-50%, -50%) skew(-20deg);

transform: translate(-50%, -50%) skew(-20deg);

-webkit-transform-origin: center center;

transform-origin: center center;

z-indeX: -1;

}

.skew-button:after {

-webkit-transition: all 100ms ease-out;

transition: all 100ms ease-out;

content: '';

position: absolute;

left: 0;

top: 0;

-webkit-transform: skewX(-20deg) scaleX(0);

transform: skewX(-20deg) scaleX(0);

width: 100%;

height: 100%;

background-color: #0e3876;

border: 1px solid transparent;

z-index: 1;

}

.skew-button:hover span:before {

-webkit-animation: fill .5s ease-out;

animation: fill .5s ease-out;

-webkit-animation-fill-mode: forwards;

animation-fill-mode: forwards;

}

.skew-button:hover:after {

-webkit-animation: swoosh .7s ease-in;

animation: swoosh .7s ease-in;

}

.skew-button:active:before {

background-color: #030d1b;

}

@-webkit-keyframes swoosh {

0% {

-webkit-transform-origin: left center;

transform-origin: left center;

}

20% {

-webkit-transform: skewX(-20deg) scaleX(1);

transform: skewX(-20deg) scaleX(1);

-webkit-transform-origin: left center;

transform-origin: left center;

}

21% {

-webkit-transform-origin: right center;

transform-origin: right center;

}

50% {

-webkit-transform: skewX(-20deg) scaleX(0);

transform: skewX(-20deg) scaleX(0);

-webkit-transform-origin: right center;

transform-origin: right center;

}

}

@keyframes swoosh {

0% {

-webkit-transform-origin: left center;

transform-origin: left center;

}

20% {

-webkit-transform: skewX(-20deg) scaleX(1);

transform: skewX(-20deg) scaleX(1);

-webkit-transform-origin: left center;

transform-origin: left center;

}

21% {

-webkit-transform-origin: right center;

transform-origin: right center;

}

50% {

-webkit-transform: skewX(-20deg) scaleX(0);

transform: skewX(-20deg) scaleX(0);

-webkit-transform-origin: right center;

transform-origin: right center;

}

}

@-webkit-keyframes fill {

0% {

background-color: rgba(14, 56, 118, 0);

}

20% {

opacity: .5;

border-width: 15px;

border-color: #092248;

}

100% {

opacity: .5;

border-width: 1px;

background-color: rgba(14, 56, 118, 0.5);

}

}

@keyframes fill {

0% {

background-color: rgba(14, 56, 118, 0);

}

20% {

opacity: .5;

border-width: 15px;

border-color: #092248;

}

100% {

opacity: .5;

border-width: 1px;

background-color: rgba(14, 56, 118, 0.5);

}

}