css 涟漪,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;

}

}

@-webkit-keyframes slide {

from {

left: 35vw;

color: #fff;

}

to {

left: 65vw;

color: transparent;

}

}

@keyframes slide {

from {

left: 35vw;

color: #fff;

}

to {

left: 65vw;

color: transparent;

}

}

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;

cursor: none;

}

main div:not(.i) {

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 .i {

position: relative;

color: transparent;

border: 0;

padding: 1em;

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

left: 30vw;

font-size: .3em;

-webkit-animation: slide 10s ease-out;

animation: slide 10s ease-out;

}

main.inverse {

background: #fff;

}

main.inverse div:not(.i) {

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

animation: pulse-invert 3s ease-out;

}

main + footer .circle {

display: none;

}

main.square div {

border-radius: 0;

}

main.square + footer .square {

display: none;

}

main.square + footer .circle {

display: inline;

}

html.invert body {

background: #fff;

}

html.invert body::after {

mix-blend-mode: screen;

}

html.invert main div:not(.i) {

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

animation: pulse-invert 3s ease-out;

}

html.invert main.inverse {

background: #000;

}

html.invert main.inverse div:not(.i) {

-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);

}

footer {

position: absolute;

top: 0;

right: 0;

left: 0;

cursor: pointer;

font-size: .7em;

mix-blend-mode: exclusion;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

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

transition: background .3s ease-out;

}

footer:hover {

background: #333;

}

footer span {

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;

}