标签云

2018-05-11 17:37:49 +08:00
parent 368ea5915b
commit 5654d3f6db
5 changed files with 40 additions and 47 deletions
@@ -61,30 +61,24 @@
      p
        margin 0
        padding 0
-    .tag-item
-      float left
-      width 32.6666%
-      margin 0 1% 1% 0
-      padding 0 8px
-      line-height 29px
-      font-size 12px
-      color c-999
-      background-color #f6f6f6
-      -webkit-box-sizing border-box
-      box-sizing border-box
-      text-overflow ellipsis
-      overflow hidden
-      white-space nowrap
-      -webkit-transition .5s
-      -ms-transition .5s
-      -moz-transition .5s
-      transition .5s
-      &:hover
-        color #fff
-        background-color #ff5e52
-        opacity .85;
-    .tag-item:nth-child(3n+0)
-      margin-right 0
-  .tag-wrap
-    padding 10px 0 0
-    overflow hidden
+  .tags-cloud > a
+    margin 0 3px
+    position relative
+    &::after
+      content ''
+      display block
+      // 开始时候下划线的宽度为100%
+      width 100%
+      height 2px
+      position absolute
+      bottom -3px
+      left: 0
+      background #aaa
+      transition all 0.3s ease-in-out
+      // 通过transform的缩放scale来让初始时x轴为0
+      transform scale3d(0,1,1)
+      // 将坐标原点移到元素的中间，以原点为中心进行缩放
+      transform-origin 50% 0
+      text-decoration underline
+    &:hover::after
+      transform: scale3d(1,1,1);