css 射线图形,CSS3 按钮悬停时四个角射线动画

CSS

语言：

CSSSCSS

确定

@-webkit-keyframes life-lines {

0% {

opacity: 0;

}

50% {

opacity: 1;

}

100% {

opacity: 0;

}

}

@keyframes life-lines {

0% {

opacity: 0;

}

50% {

opacity: 1;

}

100% {

opacity: 0;

}

}

@-webkit-keyframes life-scale {

0% {

-webkit-transform: scale(1);

transform: scale(1);

}

50% {

-webkit-transform: scale(0.98);

transform: scale(0.98);

}

100% {

-webkit-transform: scale(1);

transform: scale(1);

}

}

@keyframes life-scale {

0% {

-webkit-transform: scale(1);

transform: scale(1);

}

50% {

-webkit-transform: scale(0.98);

transform: scale(0.98);

}

100% {

-webkit-transform: scale(1);

transform: scale(1);

}

}

.btn {

display: inline-block;

background-color: #e74c3c;

border-radius: .4rem;

padding: 0 3rem;

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

-webkit-transform-origin: 0 0;

-ms-transform-origin: 0 0;

transform-origin: 0 0;

-webkit-transition: -webkit-transform .3s ease-in-out;

transition: transform .3s ease-in-out;

}

.btn:before,

.btn:after {

position: absolute;

background-color: #fff;

content: ' ';

height: .15rem;

border-radius: .15rem;

width: 1.4rem;

top: -.7rem;

left: -1.5rem;

-webkit-transform: rotate(45deg);

-ms-transform: rotate(45deg);

transform: rotate(45deg);

box-shadow: .2rem .2rem 0 0 #1D2935;

opacity: 0;

-webkit-transition: all .2s ease-in-out;

transition: all .2s ease-in-out;

}

.btn:after {

left: initial;

right: -1.5rem;

box-shadow: -.2rem .2rem 0 0 #1D2935;

-webkit-transform: rotate(-45deg);

-ms-transform: rotate(-45deg);

transform: rotate(-45deg);

}

.btn .btn-title {

color: #ffffff;

font-family: 'Open Sans';

font-weight: 700;

font-size: 3rem;

text-transform: uppercase;

line-height: 2;

white-space: nowrap;

}

.btn .btn-title:before,

.btn .btn-title:after {

position: absolute;

background-color: #fff;

content: ' ';

height: .15rem;

border-radius: .15rem;

width: 1.4rem;

bottom: -.7rem;

left: -1.5rem;

-webkit-transform: rotate(-45deg);

-ms-transform: rotate(-45deg);

transform: rotate(-45deg);

box-shadow: 0 .2rem 0 0 #1D2935;

opacity: 0;

-webkit-transition: all .2s ease-in-out;

transition: all .2s ease-in-out;

}

.btn .btn-title:after {

left: initial;

right: -1.5rem;

-webkit-transform: rotate(45deg);

-ms-transform: rotate(45deg);

transform: rotate(45deg);

box-shadow: 0 .2rem 0 0 #1D2935;

}

.btn:hover {

cursor: pointer;

-webkit-transition: -webkit-transform .05s ease-in-out;

transition: transform .05s ease-in-out;

-webkit-animation: life-scale .4s;

animation: life-scale .4s;

}

.btn:hover:before,

.btn:hover:after {

-webkit-animation: life-lines .4s;

animation: life-lines .4s;

}

.btn:hover:before {

-webkit-transform: rotate(45deg) translateX(-1rem);

-ms-transform: rotate(45deg) translateX(-1rem);

transform: rotate(45deg) translateX(-1rem);

}

.btn:hover:after {

-webkit-transform: rotate(-45deg) translateX(1rem);

-ms-transform: rotate(-45deg) translateX(1rem);

transform: rotate(-45deg) translateX(1rem);

}

.btn:hover .btn-title:before,

.btn:hover .btn-title:after {

-webkit-animation: life-lines .4s;

animation: life-lines .4s;

}

.btn:hover .btn-title:before {

-webkit-transform: rotate(-45deg) translateX(-1rem);

-ms-transform: rotate(-45deg) translateX(-1rem);

transform: rotate(-45deg) translateX(-1rem);

}

.btn:hover .btn-title:after {

-webkit-transform: rotate(45deg) translateX(1rem);

-ms-transform: rotate(45deg) translateX(1rem);

transform: rotate(45deg) translateX(1rem);

}

body {

background-color: #34495e;

}

.center-center {

position: absolute;

top: 50%;

left: 50%;

-webkit-transform: translateX(-50%) translateY(-50%);

-ms-transform: translateX(-50%) translateY(-50%);

transform: translateX(-50%) translateY(-50%);

}