html5怎么把多个界面融合,HTML5 SVG很不错的一个红黄蓝三色粘稠融合加载动画

CSS

语言：

CSSSCSS

确定

body,

html {

width: 100%;

height: 100%;

background-color: #f8f4d5;

}

.container {

width: 200px;

height: 200px;

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

margin: auto;

-webkit-filter: url('#goo');

filter: url('#goo');

-webkit-animation: rotate-move 2s ease-in-out infinite;

animation: rotate-move 2s ease-in-out infinite;

}

.dot {

width: 70px;

height: 70px;

border-radius: 50%;

background-color: #000;

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

margin: auto;

}

.dot-3 {

background-color: #f74d75;

-webkit-animation: dot-3-move 2s ease infinite;

animation: dot-3-move 2s ease infinite;

}

.dot-2 {

background-color: #10beae;

-webkit-animation: dot-2-move 2s ease infinite;

animation: dot-2-move 2s ease infinite;

}

.dot-1 {

background-color: #ffe386;

-webkit-animation: dot-1-move 2s ease infinite;

animation: dot-1-move 2s ease infinite;

}

@-webkit-keyframes dot-3-move {

20% {

-webkit-transform: scale(1);

transform: scale(1)

}

45% {

-webkit-transform: translateY(-18px) scale(.45);

transform: translateY(-18px) scale(.45)

}

60% {

-webkit-transform: translateY(-100px) scale(.45);

transform: translateY(-100px) scale(.45)

}

80% {

-webkit-transform: translateY(-100px) scale(.45);

transform: translateY(-100px) scale(.45)

}

100% {

-webkit-transform: translateY(0px) scale(1);

transform: translateY(0px) scale(1)

}

}

@keyframes dot-3-move {

20% {

-webkit-transform: scale(1);

transform: scale(1)

}

45% {

-webkit-transform: translateY(-18px) scale(.45);

transform: translateY(-18px) scale(.45)

}

60% {

-webkit-transform: translateY(-100px) scale(.45);

transform: translateY(-100px) scale(.45)

}

80% {

-webkit-transform: translateY(-100px) scale(.45);

transform: translateY(-100px) scale(.45)

}

100% {

-webkit-transform: translateY(0px) scale(1);

transform: translateY(0px) scale(1)

}

}

@-webkit-keyframes dot-2-move {

20% {

-webkit-transform: scale(1);

transform: scale(1)

}

45% {

-webkit-transform: translate(-16px, 12px) scale(.45);

transform: translate(-16px, 12px) scale(.45)

}

60% {

-webkit-transform: translate(-80px, 60px) scale(.45);

transform: translate(-80px, 60px) scale(.45)

}

80% {

-webkit-transform: translate(-80px, 60px) scale(.45);

transform: translate(-80px, 60px) scale(.45)

}

100% {

-webkit-transform: translateY(0px) scale(1);

transform: translateY(0px) scale(1)

}

}

@keyframes dot-2-move {

20% {

-webkit-transform: scale(1);

transform: scale(1)

}

45% {

-webkit-transform: translate(-16px, 12px) scale(.45);

transform: translate(-16px, 12px) scale(.45)

}

60% {

-webkit-transform: translate(-80px, 60px) scale(.45);

transform: translate(-80px, 60px) scale(.45)

}

80% {

-webkit-transform: translate(-80px, 60px) scale(.45);

transform: translate(-80px, 60px) scale(.45)

}

100% {

-webkit-transform: translateY(0px) scale(1);

transform: translateY(0px) scale(1)

}

}

@-webkit-keyframes dot-1-move {

20% {

-webkit-transform: scale(1);

transform: scale(1)

}

45% {

-webkit-transform: translate(16px, 12px) scale(.45);

transform: translate(16px, 12px) scale(.45)

}

60% {

-webkit-transform: translate(80px, 60px) scale(.45);

transform: translate(80px, 60px) scale(.45)

}

80% {

-webkit-transform: translate(80px, 60px) scale(.45);

transform: translate(80px, 60px) scale(.45)

}

100% {

-webkit-transform: translateY(0px) scale(1);

transform: translateY(0px) scale(1)

}

}

@keyframes dot-1-move {

20% {

-webkit-transform: scale(1);

transform: scale(1)

}

45% {

-webkit-transform: translate(16px, 12px) scale(.45);

transform: translate(16px, 12px) scale(.45)

}

60% {

-webkit-transform: translate(80px, 60px) scale(.45);

transform: translate(80px, 60px) scale(.45)

}

80% {

-webkit-transform: translate(80px, 60px) scale(.45);

transform: translate(80px, 60px) scale(.45)

}

100% {

-webkit-transform: translateY(0px) scale(1);

transform: translateY(0px) scale(1)

}

}

@-webkit-keyframes rotate-move {

55% {

-webkit-transform: rotate(0deg);

transform: rotate(0deg)

}

80% {

-webkit-transform: rotate(360deg);

transform: rotate(360deg)

}

100% {

-webkit-transform: rotate(360deg);

transform: rotate(360deg)

}

}

@keyframes rotate-move {

55% {

-webkit-transform: rotate(0deg);

transform: rotate(0deg)

}

80% {

-webkit-transform: rotate(360deg);

transform: rotate(360deg)

}

100% {

-webkit-transform: rotate(360deg);

transform: rotate(360deg)

}

}