css3运动后留下轨迹尾巴_CSS3 甩尾巴（摆尾）动效

CSS

语言：

CSSSCSS

确定

html,

body {

min-height: 100%;

}

body {

background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQwMmY0NiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzJmM2I0NyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');

background-size: 100%;

background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #402f46), color-stop(100%, #2f3b47));

background-image: -webkit-linear-gradient(#402f46, #2f3b47);

background-image: linear-gradient(#402f46, #2f3b47);

font-family: "Times", serif;

color: white;

}

.content {

display: none;

width: 70%;

min-width: 500px;

padding: 1em 2em;

margin: auto;

background-color: white;

}

.spinner {

position: relative;

width: 10vw;

height: 10vw;

margin: 15vh auto;

font-size: 0.75em;

text-align: center;

line-height: 10vw;

}

.spinner-1 {

border-radius: 100%;

border: 2px solid rgba(255, 255, 255, 0.2);

}

.spinner-1 .dot {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

-webkit-animation: spin 1s infinite linear both;

animation: spin 1s infinite linear both;

}

.spinner-1 .dot:before {

position: absolute;

top: 50%;

left: 50%;

content: "";

width: 10px;

height: 10px;

margin-top: -5px;

margin-left: -5px;

border-radius: 100%;

opacity: 0.9;

}

.spinner-1 .dot:nth-child(0) {

-webkit-animation-delay: 0s;

animation-delay: 0s;

}

.spinner-1 .dot:nth-child(0):before {

background-color: #1d80e4;

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

-ms-transform: scale(0) translateY(10px);

transform: scale(0) translateY(10px);

}

.spinner-1 .dot:nth-child(1) {

-webkit-animation-delay: 0.1s;

animation-delay: 0.1s;

}

.spinner-1 .dot:nth-child(1):before {

background-color: #7a4fc8;

-webkit-transform: scale(0.8) translateY(15px);

-ms-transform: scale(0.8) translateY(15px);

transform: scale(0.8) translateY(15px);

}

.spinner-1 .dot:nth-child(2) {

-webkit-animation-delay: 0.2s;

animation-delay: 0.2s;

}

.spinner-1 .dot:nth-child(2):before {

background-color: #ba2d2d;

-webkit-transform: scale(1.6) translateY(20px);

-ms-transform: scale(1.6) translateY(20px);

transform: scale(1.6) translateY(20px);

}

.spinner-1 .dot:nth-child(3) {

-webkit-animation-delay: 0.3s;

animation-delay: 0.3s;

}

.spinner-1 .dot:nth-child(3):before {

background-color: #f08228;

-webkit-transform: scale(2.4) translateY(25px);

-ms-transform: scale(2.4) translateY(25px);

transform: scale(2.4) translateY(25px);

}

@-webkit-keyframes spin {

0% {

-webkit-transform: rotate(0);

transform: rotate(0);

}

30% {

-webkit-transform: rotate(20deg);

transform: rotate(20deg);

}

100% {

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

}

}

@keyframes spin {

0% {

-webkit-transform: rotate(0);

transform: rotate(0);

}

30% {

-webkit-transform: rotate(20deg);

transform: rotate(20deg);

}

100% {

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

}

}

@-webkit-keyframes flip {

0% {

-webkit-transform: scaleY(1);

transform: scaleY(1);

}

100% {

-webkit-transform: scaleY(-1);

transform: scaleY(-1);

}

}

@keyframes flip {

0% {

-webkit-transform: scaleY(1);

transform: scaleY(1);

}

100% {

-webkit-transform: scaleY(-1);

transform: scaleY(-1);

}

}