css 圆形光晕,CSS3 简单的多重圆形光晕动效

CSS

语言：

CSSSCSS

确定

@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300);

body,

html {

margin: 0;

width: 100vw;

height: 100vh;

font-family: "Source Sans Pro" sans-serif;

}

.button__holder {

position: relative;

width: 100%;

height: 100%;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-flex-wrap: wrap;

-ms-flex-wrap: wrap;

flex-wrap: wrap;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

background-color: #1a1a1a;

}

.button__holder:after {

content: "";

position: absolute;

z-index: 0;

top: 0;

right: 0;

bottom: 0;

left: 0;

background: rgba(26, 26, 26, 0.7);

}

.button__holder h2 {

margin-right: 1em;

text-align: center;

color: #8a3b58;

}

.plus {

position: relative;

z-index: 1;

width: 80px;

height: 80px;

color: #1a1a1a;

background: #ed1c5b;

border-radius: 50%;

border: none;

-webkit-transition: box-shadow 400ms cubic-bezier(0.2, 0, 0.7, 1), -webkit-transform 200ms cubic-bezier(0.2, 0, 0.7, 1);

transition: box-shadow 400ms cubic-bezier(0.2, 0, 0.7, 1), transform 200ms cubic-bezier(0.2, 0, 0.7, 1);

}

.plus:after {

content: "+";

font-size: 2.5em;

line-height: 1.1em;

}

.plus:hover {

-webkit-transform: rotate(45deg);

-ms-transform: rotate(45deg);

transform: rotate(45deg);

box-shadow: 0 0 1px 15px rgba(138, 59, 88, 0.4), 0 0 1px 30px rgba(138, 59, 88, 0.1), 0 0 1px 45px rgba(138, 59, 88, 0.1);

}