From d3de3d6867e93a0947f911149d526241d48da8ff Mon Sep 17 00:00:00 2001 From: taedonn Date: Sun, 24 Sep 2023 11:00:17 +0900 Subject: [PATCH] update sendemail animation --- src/components/mailanimation.tsx | 22 ++++ src/components/textanimation.tsx | 37 ------ src/pages/_app.tsx | 2 +- src/pages/user/sendemail.tsx | 4 +- src/styles/mailanimation.css | 156 +++++++++++++++++++++++++ src/styles/textanimation.css | 189 ------------------------------- 6 files changed, 181 insertions(+), 229 deletions(-) create mode 100644 src/components/mailanimation.tsx delete mode 100644 src/components/textanimation.tsx create mode 100644 src/styles/mailanimation.css delete mode 100644 src/styles/textanimation.css diff --git a/src/components/mailanimation.tsx b/src/components/mailanimation.tsx new file mode 100644 index 00000000..612ce165 --- /dev/null +++ b/src/components/mailanimation.tsx @@ -0,0 +1,22 @@ +export default function MailAnimation() { + return ( + <> +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + ) +} \ No newline at end of file diff --git a/src/components/textanimation.tsx b/src/components/textanimation.tsx deleted file mode 100644 index a6cc7e4c..00000000 --- a/src/components/textanimation.tsx +++ /dev/null @@ -1,37 +0,0 @@ -export default function TextAnimation() { - return ( - <> -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - ) -} \ No newline at end of file diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index a4672dea..aa157ca8 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -10,7 +10,7 @@ const queryClient = new QueryClient(); // styles import '../styles/globals.css'; -import '../styles/textanimation.css'; +import '../styles/mailanimation.css'; export default function App({ Component, pageProps }: AppProps) { return ( diff --git a/src/pages/user/sendemail.tsx b/src/pages/user/sendemail.tsx index 176b2320..d017abb4 100644 --- a/src/pages/user/sendemail.tsx +++ b/src/pages/user/sendemail.tsx @@ -10,7 +10,7 @@ import axios from 'axios'; // components import Header from "@/components/header"; -import TextAnimation from '@/components/textanimation'; +import MailAnimation from '@/components/mailanimation'; const SendEmail = ({params}: any) => { // 디바이스 체크 @@ -59,7 +59,7 @@ const SendEmail = ({params}: any) => { {/* 메인 */}
- +

인증 메일이 [{params.id}](으)로 전송되었습니다.
받으신 이메일의 링크를 클릭하면 가입이 완료됩니다. diff --git a/src/styles/mailanimation.css b/src/styles/mailanimation.css new file mode 100644 index 00000000..d187e54e --- /dev/null +++ b/src/styles/mailanimation.css @@ -0,0 +1,156 @@ +.letter-image { + width: 200px; + height: 300px; +} +.animated-mail { + position: absolute; + width: 200px; + height: 150px; + top: 60px; + animation: animatedMail 0.4s 0.4s both; +} +.animated-mail .body { + position: absolute; + bottom: 0; + width: 0; + height: 0; + border-style: solid; + border-width: 0 0 100px 200px; + border-color: transparent transparent #f7e06e transparent; + z-index: 2; +} +html.dark .animated-mail .body { + border-color: transparent transparent #99acdc transparent; +} +.animated-mail .top-fold { + position: absolute; + top: 51px; + width: 0; + height: 0; + border-style: solid; + border-width: 50px 100px 0 100px; + -webkit-transform-origin: 50% 0%; + -moz-transform-origin: 50% 0%; + transform-origin: 50% 0%; + border-color: #f2cc0d transparent transparent transparent; + z-index: 2; + animation: topFold 0.4s 0.4s both; +} +html.dark .animated-mail .top-fold { + border-color: #6682ca transparent transparent transparent; +} +.animated-mail .back-fold { + position: absolute; + bottom: 0; + width: 200px; + height: 100px; + background: #f2cc0d; + z-index: 0; +} +html.dark .animated-mail .back-fold { + background: #6682ca; +} +.animated-mail .left-fold { + position: absolute; + bottom: 0; + width: 0; + height: 0; + border-style: solid; + border-width: 50px 0 50px 100px; + border-color: transparent transparent transparent #f5d63d; + z-index: 2; +} +html.dark .animated-mail .left-fold { + border-color: transparent transparent transparent #8097d3; +} +.animated-mail .letter { + left: 20px; + bottom: 0px; + position: absolute; + width: 160px; + height: 60px; + background: white; + z-index: 1; + overflow: hidden; + animation: letter 0.4s 0.6s both; +} +.animated-mail .letter .letter-border { + height: 10px; + width: 100%; + background: repeating-linear-gradient(-45deg, #f2cc0d, #f2cc0d 8px, transparent 8px, transparent 18px); +} +html.dark .animated-mail .letter .letter-border { + background: repeating-linear-gradient(-45deg, #6682ca, #6682ca 8px, transparent 8px, transparent 18px); +} +.animated-mail .letter .letter-title { + margin-top: 10px; + margin-left: 5px; + height: 10px; + width: 40%; + background: #f2cc0d; +} +html.dark .animated-mail .letter .letter-title { + background: #6682ca; +} +.animated-mail .letter .letter-context { + margin-top: 10px; + margin-left: 5px; + height: 10px; + width: 20%; + background: #f2cc0d; +} +html.dark .animated-mail .letter .letter-context { + background: #6682ca; +} +.animated-mail .letter .letter-stamp { + margin-top: 30px; + margin-left: 120px; + border-radius: 100%; + height: 30px; + width: 30px; + background: #f2cc0d; + opacity: 0.3; +} +html.dark .animated-mail .letter .letter-stamp { + background: #6682ca; +} +.letter-image:hover .animated-mail .letter { + height: 180px; +} +@keyframes animatedMail { + 0% { + transform: translateY(0); + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + } + 100% { + transform: translateY(50px); + -webkit-transform: translateY(50px); + -moz-transform: translateY(50px); + } +} +@keyframes topFold { + 0% { + transform: rotateX(0deg); + -webkit-transform: rotateX(0deg); + -moz-transform: rotateX(0deg); + z-index: 2; + } + 50% { + z-index: 0; + } + 100% { + transform: rotateX(180deg); + -webkit-transform: rotateX(180deg); + -moz-transform: rotateX(180deg); + z-index: 0; + } +} +@keyframes letter { + 0% { + height: 60px; + } + 100% { + height: 180px; + } +} \ No newline at end of file diff --git a/src/styles/textanimation.css b/src/styles/textanimation.css deleted file mode 100644 index 3223fe55..00000000 --- a/src/styles/textanimation.css +++ /dev/null @@ -1,189 +0,0 @@ -.scene-wrap { - display: grid; - place-items: center; - perspective: 500px; - perspective-origin: 50% calc(50% - 150px); -} - -.scene { - position: relative; - transform-style: preserve-3d; -} - -.banner { - display: flex; - transform-style: preserve-3d; - animation: rotate 24s infinite linear; -} - -.screen { - position: absolute; - transform: translate(-50%, -50%); -} - -@keyframes rotate { - to { - transform: rotateY(-360deg); - } -} - -.panel { - position: absolute; - transform: translate(-50%, -50%) rotateY(var(--angle)) translateZ(189px); - width: 50px; - height: 60px; - overflow: hidden; -} - -.panel::before { - position: absolute; - left: var(--left); - content: "폰트 아카이브 · 상업용 무료 한글 폰트 · 아카이빙 웹사이트 · "; - font-size: 47px; - font-weight: 500; - width: max-content; -} - -.panel:nth-child(1) { - --left: 0px; - --hue: 0; - --angle: 0deg; -} - -.panel:nth-child(2) { - --left: -50px; - --hue: 15; - --angle: 15deg; -} - -.panel:nth-child(3) { - --left: -100px; - --hue: 30; - --angle: 30deg; -} - -.panel:nth-child(4) { - --left: -150px; - --hue: 45; - --angle: 45deg; -} - -.panel:nth-child(5) { - --left: -200px; - --hue: 60; - --angle: 60deg; -} - -.panel:nth-child(6) { - --left: -250px; - --hue: 75; - --angle: 75deg; -} - -.panel:nth-child(7) { - --left: -300px; - --hue: 90; - --angle: 90deg; -} - -.panel:nth-child(8) { - --left: -350px; - --hue: 105; - --angle: 105deg; -} - -.panel:nth-child(9) { - --left: -400px; - --hue: 120; - --angle: 120deg; -} - -.panel:nth-child(10) { - --left: -450px; - --hue: 135; - --angle: 135deg; -} - -.panel:nth-child(11) { - --left: -500px; - --hue: 150; - --angle: 150deg; -} - -.panel:nth-child(12) { - --left: -550px; - --hue: 165; - --angle: 165deg; -} - -.panel:nth-child(13) { - --left: -600px; - --hue: 180; - --angle: 180deg; -} - -.panel:nth-child(14) { - --left: -650px; - --hue: 195; - --angle: 195deg; -} - -.panel:nth-child(15) { - --left: -700px; - --hue: 210; - --angle: 210deg; -} - -.panel:nth-child(16) { - --left: -750px; - --hue: 225; - --angle: 225deg; -} - -.panel:nth-child(17) { - --left: -800px; - --hue: 240; - --angle: 240deg; -} - -.panel:nth-child(18) { - --left: -850px; - --hue: 255; - --angle: 255deg; -} - -.panel:nth-child(19) { - --left: -900px; - --hue: 270; - --angle: 270deg; -} - -.panel:nth-child(20) { - --left: -950px; - --hue: 285; - --angle: 285deg; -} - -.panel:nth-child(21) { - --left: -1000px; - --hue: 300; - --angle: 300deg; -} - -.panel:nth-child(22) { - --left: -1050px; - --hue: 315; - --angle: 315deg; -} - -.panel:nth-child(23) { - --left: -1100px; - --hue: 330; - --angle: 330deg; -} - -.panel:nth-child(24) { - --left: -1150px; - --hue: 345; - --angle: 345deg; -} \ No newline at end of file