From 3d5ac74f0a9e99d933fa8636181130a1b10acdfb Mon Sep 17 00:00:00 2001 From: leejimin Date: Tue, 16 Aug 2022 10:53:15 +0900 Subject: [PATCH] =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/fishing.css | 146 +++++++++++++++++++++++++++++++++++++++--- legendaryFishing.html | 38 ++++++++--- script/scroll.js | 50 +++++++-------- 3 files changed, 189 insertions(+), 45 deletions(-) diff --git a/css/fishing.css b/css/fishing.css index 02120eb..49c337e 100644 --- a/css/fishing.css +++ b/css/fishing.css @@ -24,7 +24,7 @@ body { ::-webkit-scrollbar { display: none; } */ ul, li{ list-style: none; } -a{ text-decoration: none; } +a{ text-decoration: none; color: inherit;} img{ display: block; } table{ border-spacing: 0; } .inner{ @@ -42,6 +42,7 @@ header{ left: 0; z-index: 100; transition: all 0.3s; + color: #fff; } header .hinner{ width: 1800px; @@ -51,19 +52,19 @@ header .hinner{ align-items: center; justify-content: center; } -nav{ margin: 0 300px; } -.gnb{ display: flex; } +nav{ margin: 0 300px; height: 100%;} +.gnb{ display: flex; height: 100%;} .gnb > li{ + height: 100%; margin: 0 65px 0 0; position: relative; } .gnb > li:last-child{ margin: 0; } .gnb > li > a{ display: block; - height: 80px; + height: 100%; text-align: center; font-size: 18px; - color: #fff; font: 600 18px 'pretendard', 'sans-serif'; line-height: 80px; text-shadow: 1px 1px 1px #333333; @@ -118,15 +119,16 @@ nav{ margin: 0 300px; } } .question p{ font: 400 14px 'pretendard', 'sans-serif'; - color: #fff; } header.on{ height: 70px; border-bottom: 1px solid #eeeeee; + color: #111111; + background-color: #fff; } -header .logo{ display: none; } -header .logo.on{ display: block; } +header .wlogo, .blogo{ display: none; } +header .logowrap > img.on{ display: block; } /*풀페이지 슬라이더*/ /* .fullslider{ height: 100%; } */ @@ -357,7 +359,11 @@ header .logo.on{ display: block; } } /*sec03*/ -.sec03{ background: url(../images/main/main-background3.png) no-repeat center / cover; } +.sec03{ + background: url(../images/main/main-background3.png) no-repeat center / cover; + position: relative; + overflow: hidden; +} .sec03 .inner { flex-direction: column; justify-content: center; @@ -394,6 +400,7 @@ header .logo.on{ display: block; } border-radius: 45px; border: 1.5px solid #fff; font-family: 'pretendard', 'sans-serif'; + cursor: pointer; } .sec03 .inner > div > button > span{ padding: 0 20px; } .sec03 .inner > div > button > .material-symbols-outlined { @@ -404,6 +411,49 @@ header .logo.on{ display: block; } 'opsz' 48 } +/*sec03 물결*/ +.sec03 .box{ + position: absolute; + bottom: 100px; +} +.sec03 .box:nth-child(2){ + bottom: 0px; +} +.sec03 .box .wave{ + opacity: .1; + position: absolute; + background-color: #0af; + top: 0; + transform-origin: 50% 48%; + border-radius: 50%; + animation: drift 3000ms infinite linear; +} +.sec03 .box:first-child .wave{ + width: 2000px; + height: 2000px; + left: -700px; +} +.sec03 .box:nth-child(2) .wave{ + width: 4000px; + height: 4000px; + left: -300px; +} +.sec03 .box .wave.two{ + animation: drift 7000ms infinite linear; + opacity: .1; + +} +.sec03 .box .wave.there{ + animation: drift 5000ms infinite linear; + opacity: .1; +} + + +@keyframes drift { + from { transform: rotate(0deg); } + from { transform: rotate(360deg); } +} + /*sec04*/ .sec04{ background: url(../images/main/main-background4.png) no-repeat center / cover; @@ -521,6 +571,84 @@ header .logo.on{ display: block; } font-size: 35px; } +/*topBt*/ +.topBt{ + position: fixed; + right: 50px; + bottom: 40px; + z-index: 500; + cursor: pointer; + display: none; +} +.topBt.on{ display: block; } +.btwrap{ + width: 25px; + height: 55px; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + position: relative; + overflow: hidden; +} +.btwrap > div:first-child{ + width: 45px; + height: 45px; + background-color: #0047FF; + clip-path: ellipse(27% 50% at 50% 50%); +} +.btwrap > div:nth-child(2){ + width: 20px; + height: 24px; + /* background-color: #0047FF; */ + border-bottom: 20px solid #0047FF; + border-left: 12px solid transparent; + border-right: 12px solid transparent; + border-radius: 10px; + position: absolute; + bottom: 0px; + animation: vibration .8s infinite; +} + +@keyframes vibration { + 0% { transform: rotate(0deg); } + 50% { transform: rotate(4deg); } + 100%{ transform: rotate(-4deg); } +} + +svg{ + position: absolute; + bottom: -100px; +} +.btwrap .eye{ + width: 5px; + height: 5px; + background-color: #fff; + border-radius: 50%; + offset-path: path('m 10 30 Q 5 24 11 16 Q 16 9 12 3'); + offset-distance: 0%; + position: absolute; + top: -15px; + left: 5px; + transition: all .3s; +} +.btwrap:hover .eye{ + animation: eye .3s linear alternate forwards; +} +.btwrap > p{ + position: absolute; + bottom: -40px; + text-align: center; + font-size: 5px; + color: #fff; + transition: all 0.5s; +} +.btwrap:hover > p{ bottom: 8px; } +@keyframes eye { +from { offset-distance: 0%; } +to { offset-distance: 100%; } +} + /*footer*/ footer{ background-color: #111827; diff --git a/legendaryFishing.html b/legendaryFishing.html index 3d288d8..7bb165b 100644 --- a/legendaryFishing.html +++ b/legendaryFishing.html @@ -13,11 +13,11 @@ Legend Fishing -
+
- - - + + +
- +
+
+
+
+ + + +
+

T
O
P

+
+