html 路径线条动画,HTML5 无穷大符号的路径动画

CSS

语言：

CSSSCSS

确定

body {

background: #863334;

font-family: "Helvetica Neue", Arial, sans-serif;

}

#container {

position: absolute;

left: 50%;

-webkit-transform: translateX(-50%);

-ms-transform: translateX(-50%);

transform: translateX(-50%);

width: 200px;

height: 100px;

}

.no-motionpath #container {

display: none;

}

#count,

.dot {

motion-path: path("M93.9,46.4c9.3,9.5,13.8,17.9,23.5,17.9s17.5-7.8,17.5-17.5s-7.8-17.6-17.5-17.5c-9.7,0.1-13.3,7.2-22.1,17.1 c-8.9,8.8-15.7,17.9-25.4,17.9s-17.5-7.8-17.5-17.5s7.8-17.5,17.5-17.5S86.2,38.6,93.9,46.4z");

position: absolute;

}

#count {

-webkit-animation: pathy 6000ms infinite linear;

animation: pathy 6000ms infinite linear;

motion-offset: 0;

color: #f5f5fb;

display: inline-block;

text-align: center;

}

.dot {

display: inline-block;

width: 0.4rem;

height: 0.4rem;

background: #f5f5fb;

border-radius: 50%;

opacity: 0;

-webkit-animation: pulse 6000ms infinite ease-in-out;

animation: pulse 6000ms infinite ease-in-out;

}

.dot:nth-of-type(1) {

motion-offset: 10%;

-webkit-animation-delay: 600ms;

animation-delay: 600ms;

}

.dot:nth-of-type(2) {

motion-offset: 20%;

-webkit-animation-delay: 1200ms;

animation-delay: 1200ms;

}

.dot:nth-of-type(3) {

motion-offset: 30%;

-webkit-animation-delay: 1800ms;

animation-delay: 1800ms;

}

.dot:nth-of-type(4) {

motion-offset: 40%;

-webkit-animation-delay: 2400ms;

animation-delay: 2400ms;

}

.dot:nth-of-type(5) {

motion-offset: 50%;

-webkit-animation-delay: 3000ms;

animation-delay: 3000ms;

}

.dot:nth-of-type(6) {

motion-offset: 60%;

-webkit-animation-delay: 3600ms;

animation-delay: 3600ms;

}

.dot:nth-of-type(7) {

motion-offset: 70%;

-webkit-animation-delay: 4200ms;

animation-delay: 4200ms;

}

.dot:nth-of-type(8) {

motion-offset: 80%;

-webkit-animation-delay: 4800ms;

animation-delay: 4800ms;

}

.dot:nth-of-type(9) {

motion-offset: 90%;

-webkit-animation-delay: 5400ms;

animation-delay: 5400ms;

}

.dot:nth-of-type(10) {

motion-offset: 0%;

-webkit-animation-delay: 0ms;

animation-delay: 0ms;

}

@-webkit-keyframes pathy {

100% {

motion-offset: 100%;

}

}

@keyframes pathy {

100% {

motion-offset: 100%;

}

}

@-webkit-keyframes pulse {

20% {

opacity: 1;

}

40% {

opacity: 0;

}

}

@keyframes pulse {

20% {

opacity: 1;

}

40% {

opacity: 0;

}

}

.message {

display: none;

}

.no-motionpath .message {

display: block;

color: #f5f5fb;

padding: 1rem;

}