android圆形变方形动画,CSS3 简单的圆形/方形变形动画

CSS

语言：

CSSSCSS

确定

html,

body {

width: 100%;

height: 100%;

background-color: #221e40;

}

*,

*:after,

*::before {

box-sizing: border-box;

}

.centered {

width: 100%;

height: 100px;

position: absolute;

top: 50%;

margin-top: -50px;

}

.morph {

width: 100%;

height: 100px;

position: relative;

}

.morph span {

position: absolute;

display: block;

margin-left: 0;

width: 100px;

height: 100px;

opacity: 0.7;

animation: 4s morph cubic-bezier(0.5, 1, 0.5, 0) infinite;

border: 6px solid;

mix-blend-mode: screen;

}

.morph span:nth-child(1) {

border-color: #ff2074;

background-color: rgba(255, 32, 116, 0.4);

}

.morph span:nth-child(2) {

border-color: #20ffb3;

background-color: rgba(32, 255, 179, 0.4);

animation-delay: 0.1s;

}

.morph span:nth-child(3) {

border-color: #ffd820;

background-color: rgba(255, 216, 32, 0.4);

animation-delay: 0.2s;

}

/*Animation*/

@keyframes morph {

0% {

left: 0;

border-radius: 50%;

transform: rotate(0deg);

}

50% {

left: 100%;

margin-left: -100px;

border-radius: 0%;

transform: rotate(360deg);

}

100% {

left: 0;

border-radius: 50%;

transform: rotate(0deg);

}

}