feat: 메인페이지 스크롤을 내려주세요 애니메이션 추가 (#539)

png 이미지 대신 css로 마우스형태 구현, 동작 추가
jiphyeonjeon-42 · Aug 18, 2023 · 019879f · 019879f
1 parent d520b53
commit 019879f
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 17 deletions.
diff --git a/src/asset/css/MainBanner.css b/src/asset/css/MainBanner.css
@@ -63,8 +63,32 @@
   font-size: 1.2rem;
 }
 
-.main-banner__scroll_icon {
+.main-banner__mouse {
   margin-top: 1.6rem;
+  width: 2rem;
+  height: 3.4rem;
+  border: 0.2rem solid rgba(255, 255, 255, 0.5);
+  border-radius: 6rem;
+  position: relative;
+  &::before {
+    content: "";
+    width: 0.6rem;
+    height: 0.6rem;
+    position: absolute;
+    top: 0.3rem;
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: white;
+    border-radius: 50%;
+    animation: wheel 3s infinite;
+  }
+}
+
+@keyframes wheel {
+  to {
+    opacity: 0;
+    top: 2.4rem;
+  }
 }
 
 @media screen and (max-width: 1199px) {

diff --git a/src/asset/img/scroll-icon.svg b/src/asset/img/scroll-icon.svg
diff --git a/src/component/main/MainBanner.tsx b/src/component/main/MainBanner.tsx
@@ -1,6 +1,4 @@
-import Image from "../utils/Image";
 import SearchBar from "../utils/SearchBar";
-import ScrollIcon from "../../asset/img/scroll-icon.svg";
 import "../../asset/css/Banner.css";
 import "../../asset/css/MainBanner.css";
 
@@ -24,11 +22,7 @@ const MainBanner = () => {
         </div>
         <div className="main-banner__scroll">
           <p className="font-12 color-d5">스크롤을 내려주세요</p>
-          <Image
-            src={ScrollIcon}
-            className="main-banner__scroll_icon"
-            alt="scroll-icon"
-          />
+          <div className="main-banner__mouse" />
         </div>
       </div>
     </section>