diff --git a/static/users/login.css b/static/users/login.css index 80c4419..938cc20 100644 --- a/static/users/login.css +++ b/static/users/login.css @@ -29,11 +29,27 @@ text-align: center; } -.login_title_psy p { +.login_typing_text_ksy { font-family: var(--main_font); color: var(--title_color); font-size: 14px; font-weight: bold; + display: inline-block; + overflow: hidden; + white-space: nowrap; + border-right: 2px solid var(--title_color); /* 커서 효과 */ + animation: typing_psy 3s steps(22) forwards, cursor_remove_psy 0s forwards; + animation-delay: 0s, 3s; +} + +@keyframes typing_psy { + from { width: 0; } + to { width: 100%; } +} + +@keyframes cursor_remove_psy { + from { border-right: 2px solid var(--title_color); } + to { border-right: none; } } .login_title_psy h1 { diff --git a/static/users/signup.css b/static/users/signup.css index 3ff1de1..334971d 100644 --- a/static/users/signup.css +++ b/static/users/signup.css @@ -28,13 +28,27 @@ text-align: center; } -.signup_title_psy p { +.signup_typing_text_ksy { font-family: var(--main_font); color: var(--title_color); font-size: 14px; font-weight: bold; + display: inline-block; + overflow: hidden; + white-space: nowrap; + border-right: 2px solid var(--title_color); /* 커서 효과 */ + animation: typing_psy 3s steps(22) forwards, cursor_remove_psy 0s forwards; + animation-delay: 0s, 3s; +} +@keyframes typing_psy { + from { width: 0; } + to { width: 100%; } } +@keyframes cursor_remove_psy { + from { border-right: 2px solid var(--title_color); } + to { border-right: none; } +} .signup_title_psy h1 { font-size: 32px; font-family: var(--logo_font); diff --git a/templates/users/login.html b/templates/users/login.html index 9141782..a3adbb9 100644 --- a/templates/users/login.html +++ b/templates/users/login.html @@ -17,8 +17,8 @@
인생네컷으로 만드는 나만의 일기장
-인생네컷으로 만드는 나만의 일기장
+인생네컷으로 만드는 나만의 일기장
+인생네컷으로 만드는 나만의 일기장