html5 css3涟漪效果,CSS3 雨滴涟漪型灯光效果

CSS

语言：

CSSSCSS

确定

@-webkit-keyframes pulse {

0% {

box-shadow: 0 0 0 0;

color: #fff;

background: #fff;

}

}

@keyframes pulse {

0% {

box-shadow: 0 0 0 0;

color: #fff;

background: #fff;

}

}

@-webkit-keyframes pulse-invert {

0% {

box-shadow: 0 0 0 0;

color: #000;

background: #000;

}

}

@keyframes pulse-invert {

0% {

box-shadow: 0 0 0 0;

color: #000;

background: #000;

}

}

main {

-webkit-box-flex: 1;

-webkit-flex: 1;

-ms-flex: 1;

flex: 1;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

position: relative;

overflow: hidden;

}

main div {

pointer-events: none;

-webkit-box-flex: 0;

-webkit-flex: none;

-ms-flex: none;

flex: none;

position: absolute;

padding: .05em;

border-radius: 1em;

-webkit-animation: pulse 3s ease-out;

animation: pulse 3s ease-out;

will-change: box-shadow, color, background;

color: transparent;

background: transparent;

box-shadow: 0 0 0 7em;

}

main.inverse {

background: #fff;

}

main.inverse div {

-webkit-animation: pulse-invert 3s ease-out;

animation: pulse-invert 3s ease-out;

}

main + footer .circle,

main + footer .no-quote {

display: none;

}

main.square div {

border-radius: 0;

}

main.square + footer .square {

display: none;

}

main.square + footer .circle {

display: inline;

}

main.hide-fortune ~ .fortune {

display: none;

}

main.hide-fortune + footer .quote {

display: none;

}

main.hide-fortune + footer .no-quote {

display: inline;

}

html.invert body {

background: #fff;

}

html.invert body::after {

mix-blend-mode: screen;

}

html.invert main div {

-webkit-animation: pulse-invert 3s ease-out;

animation: pulse-invert 3s ease-out;

}

html.invert main.inverse {

background: #000;

}

html.invert main.inverse div {

-webkit-animation: pulse 3s ease-out;

animation: pulse 3s ease-out;

}

body {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

font-size: calc(120% + 2.5vmax);

}

body::after {

mix-blend-mode: multiply;

content: '';

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

pointer-events: none;

}

body.one::after {

background-image: -webkit-radial-gradient(0% 31%, circle, #bf54a4, #64b0da);

background-image: radial-gradient(circle at 0% 31%, #bf54a4, #64b0da);

}

body.two::after {

background-image: -webkit-linear-gradient(344deg, #4bc4d9, #ebda2e);

background-image: linear-gradient(106deg, #4bc4d9, #ebda2e);

}

body.three::after {

background-image: -webkit-radial-gradient(27% 20%, circle, #fdd372, #7d1b66);

background-image: radial-gradient(circle at 27% 20%, #fdd372, #7d1b66);

}

body.four::after {

background-image: -webkit-linear-gradient(10deg, #1b0b50, #1eb9d6);

background-image: linear-gradient(80deg, #1b0b50, #1eb9d6);

}

body.five::after {

background-image: -webkit-radial-gradient(63% 21%, circle, #ef8bd5, #8253fe);

background-image: radial-gradient(circle at 63% 21%, #ef8bd5, #8253fe);

}

.fortune {

position: absolute;

top: 50%;

left: 50%;

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

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

max-width: 45vw;

box-shadow: 0 0 0 .15em;

padding: 1em;

font-size: 1.5rem;

line-height: 1.5;

}

.fortune .change {

padding-top: 1em;

text-align: center;

cursor: pointer;

}

footer {

position: absolute;

top: 0;

right: 0;

cursor: pointer;

font-size: 1.5rem;

mix-blend-mode: exclusion;

opacity: .3;

}

footer:hover {

opacity: 1;

}

footer span {

display: inline-block;

padding: .5em;

-webkit-box-flex: 1;

-webkit-flex: 1;

-ms-flex: 1;

flex: 1;

text-align: center;

-webkit-transition: background .3s ease-out;

transition: background .3s ease-out;

}

footer span:hover {

background: #666;

}

html,

body {

height: 100%;

}

body {

margin: 0;

color: #fff;

background: #000;

font-family: helvetica, FontAwesome, sans-serif;

}