css 圆形光晕,CSS3 按钮悬停圆形光晕动效

CSS

语言：

CSSSCSS

确定

body {

background-color: #111;

width: 100px;

height: 100px;

margin: 200px auto 0;

}

div {

width: 100px;

height: 100px;

border-radius: 100%;

background-color: orange;

-webkit-transition: -webkit-transform 800ms;

transition: transform 800ms;

position: relative;

text-align: center;

z-index: 10;

}

div:before {

content: '';

box-shadow: 0px 0px 8px 2px rgba(255, 165, 0, 0.53);

-webkit-transform: scale(1);

-ms-transform: scale(1);

transform: scale(1);

position: absolute;

width: 80px;

height: 80px;

top: 10px;

left: 10px;

border-radius: 100%;

pointer-events: none;

opacity: 1;

z-index: 1;

}

div:after {

-webkit-transition: opacity 600ms, -webkit-transform 800ms;

transition: opacity 600ms, transform 800ms;

content: 'Hover Me';

line-height: 100px;

font-size: 13px;

text-transform: uppercase;

font-weight: bold;

font-family: 'Arial';

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

transform: translate3d(0, 0, 0);

opacity: 1;

}

div:hover {

-webkit-transform: scale(1.5);

-ms-transform: scale(1.5);

transform: scale(1.5);

-webkit-transition: -webkit-transform 800ms, background-color 800ms;

transition: transform 800ms, background-color 800ms;

}

div:hover:after {

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

transform: translate3d(0, -50px, 0);

opacity: 0;

}

div:hover:before {

-webkit-transition: -webkit-transform 800ms, opacity 1000ms;

transition: transform 800ms, opacity 1000ms;

-webkit-transform: scale(1.8);

-ms-transform: scale(1.8);

transform: scale(1.8);

opacity: 0;

}