소스 검색

新增輪播效果

jeter20131220 3 년 전
부모
커밋
00878a18d0
3개의 변경된 파일37개의 추가작업 그리고 0개의 파일을 삭제
  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 */

파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
+ 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);
+    }
+}

이 변경점에서 너무 많은 파일들이 변경되어 몇몇 파일들은 표시되지 않았습니다.