css3多个,CSS3 多个长方形组成的动画

CSS

语言：

CSSSCSS

确定

@keyframes br {

0% {

border-radius: 0%;

}

100% {

border-radius: 50%;

height: 100vh;

width: 100vw;

}

}

@keyframes rot {

0% {

box-shadow: 0px 0px 0px 0px #ddd;

transform: translate(-50%, -50%) rotate(0deg);

}

50% {

box-shadow: 0px 20px 10vmin -5px #E7C9FD;

}

100% {

box-shadow: 0px 0px 0px 0px #ddd;

transform: translate(-50%, -50%) rotate(720deg);

}

}

.box {

animation: br 5s ease-in-out alternate infinite;

border: 10vmin solid #8CFEDB;

box-sizing: border-box;

height: 50vh;

mix-blend-mode: multiply;

position: absolute;

width: 50vw;

}

.box:before,

.box:after {

animation: rot 5s ease-in-out alternate infinite;

border: inherit;

border-radius: inherit;

content: '';

display: block;

mix-blend-mode: multiply;

position: absolute;

}

.box:before {

border-color: #FFDD9C;

height: calc(100% - 20vmin);

width: calc(100% - 20vmin);

}

.box:after {

animation-delay: 1.25s;

border-color: #FF8484;

height: calc(100% - 30vmin);

width: calc(100% - 30vmin);

}

.middled,

.box,

.box:before,

.box:after {

left: 50%;

top: 50%;

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

}

body {

background-color: #292A2B;

overflow: hidden;

}