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%;
}
}
如果觉得《android 动画 重影 CSS3 演示运动过程中的模糊重影》对你有帮助,请点赞、收藏,并留下你的观点哦!