icon cycle circle

frontend/src/lib/assets/css/base.less

@@ -60,3 +60,94 @@ select {
     color: #333;
     width: 100%;
 }
+.underline {
+    display: inline;
+    position: relative;
+    overflow: hidden;
+}
+.underline:after {
+    content: "";
+    position: absolute;
+    z-index: 10000;
+    right: 0;
+    width: 0;
+    bottom: -2px;
+    background: #ffffff;
+    height: 4px;
+    transition: width 0.5s ease-out;
+}
+.underline:hover:after,
+.underline:focus:after,
+.underline:active:after {
+    left: 0;
+    right: auto;
+    width: 100%;
+}
+
+.fill {
+    display: inline;
+    position: relative;
+    overflow: hidden;
+}
+
+.fill:hover {
+    color: white !important;
+    div {
+        position: relative;
+        z-index: 2;
+    }
+}
+.fill:after {
+    content: "";
+    position: absolute;
+    z-index: 1;
+    right: 0;
+    top: 0px;
+    bottom: 0px;
+    width: 0px;
+    background: #000000;
+    transition: width 0.5s ease-out;
+}
+.fill:hover:after,
+.fill:focus:after,
+.fill:active:after {
+    right: auto;
+    width: 100%;
+    left: 0px;
+}
+
+@keyframes underlineEffect {
+    0% {
+        width: 0;
+    }
+    100% {
+        width: 100%;
+    }
+}
+
+swiper-slide {
+    &:hover {
+        h1.active .underline {
+            animation-play-state: paused;
+        }
+    }
+}
+
+.titles {
+    h1 {
+        .underline {
+            position: absolute;
+            z-index: 10000;
+            left: 0;
+            bottom: 0px;
+            background: #000000;
+            height: 10px;
+            width: 0;
+            animation: underlineEffect 4s linear forwards;
+        }
+
+        &:not(.active) .underline {
+            animation: none;
+        }
+    }
+}