android 动画 重影,CSS3 演示运动过程中的模糊重影

CSS

语言：

CSSSCSS

确定

body {

margin: 0

}

.triangle {

width: 0;

border-right: solid 60px transparent;

border-left: solid 60px transparent;

border-top: 80px solid #4BB5E6;

filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.4));

-webkit-filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.5));

position: absolute;

top: 20px;

left: 20px;

-webkit-animation: 6s first;

animation: 6s first;

}

.two {

-webkit-animation: 6.1s first;

animation: 6.1s first;

filter: blur(0.5px);

opacity: 0.8;

}

.three {

-webkit-animation: 6.2s first;

animation: 6.2s first;

filter: blur(1px);

opacity: 0.6;

}

.four {

-webkit-animation: 6.4s first;

animation: 6.4s first;

filter: blur(1.5px);

opacity: 0.4;

}

.five {

-webkit-animation: 6.8s first;

animation: 6.8s first;

filter: blur(2px);

opacity: 0.2;

}

.six {

-webkit-animation: 7.2s first;

animation: 7.2s first;

filter: blur(2.5px);

opacity: 0.1;

}

@keyframes first {

20% {

top: 80px;

left: 80%;

-webkit-transform: rotate(120deg);

transform: rotate(120deg);

}

40% {

top: 160px;

left: 12px;

-webkit-transform: rotate(240deg);

transform: rotate(240deg);

}

60% {

top: 240px;

left: 80%;

}

80% {

top: 320px;

left: 12px;

}

100% {

top: 400px;

left: 80%;

}

}