星潮教室小头像优化

@@ -22,30 +22,18 @@
             {{#each articles}}
                 <li data-id="{{id}}">
                     <div class="star-avatar">
-                        <div class="avatar-wrap">
+                        <div class="avatar-wrap avatar-num-{{tags.length}}">
                             {{# tags}}
                                 <a href="{{avatarUrl}}">
                                     <div data-avatar="{{image cover 100 100}}" class="rank-avatar" ></div>
-                                    <p class="name">{{tagName}}1</p>
-                                </a>
-                            {{/ tags}}
-                            {{# tags}}
-                                <a href="{{avatarUrl}}">
-                                    <div data-avatar="{{image cover 100 100}}" class="rank-avatar" ></div>
-                                    <p class="name">{{tagName}}2</p>
-                                </a>
-                            {{/ tags}}
-                            {{# tags}}
-                                <a href="{{avatarUrl}}">
-                                    <div data-avatar="{{image cover 100 100}}" class="rank-avatar" ></div>
-                                    <p class="name">{{tagName}}3</p>
+                                    <p class="name">{{tagName}}</p>
                                 </a>
                             {{/ tags}}
                             {{# tags}}
                                 {{#if @first}}
                                 <a href="{{avatarUrl}}">
                                     <div data-avatar="{{image cover 100 100}}" class="rank-avatar" ></div>
-                                    <p class="name">{{tagName}}1</p>
+                                    <p class="name">{{tagName}}</p>
                                 </a>
                                 {{/if}}
                             {{/ tags}}

+@keyframes avatar2 {
+    0% {
+        transform: translate3d(0, 0, 0);
+    }
+
+    25% {
+        transform: translate3d(0, 0, 0);
+    }
+
+    40% {
+        transform: translate3d(-120px, 0, 0);
+    }
+
+    75% {
+        transform: translate3d(-120px, 0, 0);
+    }
+
+    90% {
+        transform: translate3d(-240px, 0, 0);
+    }
+
+    90.0001% {
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+@keyframes avatar3 {
+    0% {
+        transform: translate3d(0, 0, 0);
+    }
+
+    27% {
+        transform: translate3d(0, 0, 0);
+    }
+
+    35% {
+        transform: translate3d(-120px, 0, 0);
+    }
+
+    59% {
+        transform: translate3d(-120px, 0, 0);
+    }
+
+    67% {
+        transform: translate3d(-240px, 0, 0);
+    }
+
+    91% {
+        transform: translate3d(-240px, 0, 0);
+    }
+
+    99% {
+        transform: translate3d(-360px, 0, 0);
+    }
+
+    99.00001% {
+        transform: translate3d(0, 0, 0);
+    }
+}

+@import "avatar";
 @import "star";
 @import "special";
 @import "collocation";

-@keyframes avatar {
-    0% {
-        transform: translate3d(0, 0, 0);
-    }
-
-    33% {
-        transform: translate3d(-120px, 0, 0);
-    }
-
-    66% {
-        transform: translate3d(-240px, 0, 0);
-    }
-
-    100% {
-        transform: translate3d(-360px, 0, 0);
-    }
-}
-
 .star-page {
     background: #333;
     position: relative;
@@ -213,8 +195,15 @@
 
         .avatar-wrap {
             white-space: nowrap;
-            animation: avatar 6s infinite;
             font-size: 0;
+
+            &.avatar-num-2 {
+                animation: avatar2 10s infinite;
+            }
+
+            &.avatar-num-3 {
+                animation: avatar3 15s infinite;
+            }
         }
 
         a {