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;
}