新动画 rowleft-quarter & 优化滚动动画

everfu · Dec 25, 2024 · f79a7cd · f79a7cd
1 parent 916baf7
commit f79a7cd
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 12 deletions.
diff --git a/layout/includes/widgets/page/about/skillsinfo.pug b/layout/includes/widgets/page/about/skillsinfo.pug
@@ -12,17 +12,18 @@ if skills || careers
                         .tags-group-all
                             .tags-group-wrapper
                                 - var pair = []
-                                each tag, index in skills.tags
-                                    - pair.push(tag)
-                                    if pair.length === 2 || index === skills.tags.length - 1
-                                        .tags-group-icon-pair
-                                            each item in pair
-                                                .tags-group-icon(style=`background:${item.color}`)
-                                                    if item.img
-                                                        img(src=item.img, title=item.title)
-                                                    else if item.icon
-                                                        i(class=item.icon, title=item.title, style=`color: ${item.icon_color ? item.icon_color : ''}`)
-                                        - pair = []
+                                each i in [1,2,3,4] 
+                                    each tag, index in skills.tags
+                                        - pair.push(tag)
+                                        if pair.length === 2
+                                            .tags-group-icon-pair
+                                                each item in pair
+                                                    .tags-group-icon(style=`background:${item.color}`)
+                                                        if item.img
+                                                            img(src=item.img, title=item.title)
+                                                        else if item.icon
+                                                            i(class=item.icon, title=item.title, style=`color: ${item.icon_color ? item.icon_color : ''}`)
+                                            - pair = []
                         .skills-list
                             each tag in skills.tags
                                 .skill-info

diff --git a/source/css/_global/animation.styl b/source/css/_global/animation.styl
@@ -216,6 +216,12 @@
   to
     transform translateX(-50%)
 
+@keyframes rowleft-quarter
+  from
+    transform translateX(-25%)
+  to
+    transform translateX(-50%)
+
 @keyframes gradient
   0%
     background-position 0 50%

diff --git a/source/css/_page/_about/skills.styl b/source/css/_page/_about/skills.styl
@@ -15,7 +15,7 @@
       margin-top 40px
       display flex
       flex-wrap nowrap
-      animation rowleft 60s linear infinite
+      animation rowleft-quarter 30s linear infinite
 
     .skills-style-group
       position relative