Explorar el Código

新增輪播效果

jeter20131220 hace 3 años
padre
commit
00878a18d0
Se han modificado 3 ficheros con 37 adiciones y 0 borrados
  1. 26 0
      style.css
  2. 0 0
      style.css.map
  3. 11 0
      style.scss

+ 26 - 0
style.css

@@ -214,6 +214,10 @@ body .arrow:hover {
   width: 100vw;
   -o-object-fit: cover;
      object-fit: cover;
+  -webkit-animation-name: Picture;
+          animation-name: Picture;
+  -webkit-animation-duration: 1s;
+          animation-duration: 1s;
 }
 
 @media screen and (max-width: 767px) {
@@ -359,4 +363,26 @@ body .arrow:hover {
   padding: 15px;
   color: #fff;
 }
+
+@-webkit-keyframes Picture {
+  0% {
+    -webkit-transform: scale(1.3);
+            transform: scale(1.3);
+  }
+  100% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+  }
+}
+
+@keyframes Picture {
+  0% {
+    -webkit-transform: scale(1.3);
+            transform: scale(1.3);
+  }
+  100% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+  }
+}
 /*# sourceMappingURL=style.css.map */

La diferencia del archivo ha sido suprimido porque es demasiado grande
+ 0 - 0
style.css.map


+ 11 - 0
style.scss

@@ -181,6 +181,8 @@ body {
         .banner-img{
             width: 100vw;
             object-fit: cover;
+            animation-name:Picture;
+            animation-duration: 1s;
             @media screen and(max-width:$moblie) {
                 height: 80vh;
             
@@ -297,3 +299,12 @@ body {
         color: #fff;
     }
 }
+
+@keyframes Picture{
+    0%{
+        transform: scale(1.3);
+    }
+    100%{
+        transform: scale(1);
+    }
+}

Algunos archivos no se mostraron porque demasiados archivos cambiaron en este cambio