디자인 요소 확인
애니메이션이 있는 로그인 페이지
전체 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>로그인</title>
<style>
@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Quicksand", sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #111;
width: 100%;
overflow: hidden;
}
.ring {
position: relative;
width: 500px;
height: 500px;
display: flex;
justify-content: center;
align-items: center;
}
.ring i {
position: absolute;
inset: 0;
border: 2px solid #fff;
transition: 0.5s;
}
.ring i:nth-child(1) {
border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
animation: animate 6s linear infinite;
}
.ring i:nth-child(2) {
border-radius: 41% 44% 56% 59%/38% 62% 63% 37%;
animation: animate 4s linear infinite;
}
.ring i:nth-child(3) {
border-radius: 41% 44% 56% 59%/38% 62% 63% 37%;
animation: animate2 10s linear infinite;
}
.ring:hover i {
border: 6px solid var(--clr);
filter: drop-shadow(0 0 20px var(--clr));
}
@keyframes animate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes animate2 {
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
}
}
.login {
position: absolute;
width: 300px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 20px;
}
.login h2 {
font-size: 2em;
color: #fff;
}
.login .inputBx {
position: relative;
width: 100%;
}
.login .inputBx input {
position: relative;
width: 100%;
padding: 12px 20px;
background: transparent;
border: 2px solid #fff;
border-radius: 40px;
font-size: 1.2em;
color: #fff;
box-shadow: none;
outline: none;
}
.login .inputBx input[type="submit"] {
width: 100%;
background: #0078ff;
background: linear-gradient(45deg, #ff357a, #fff172);
border: none;
cursor: pointer;
}
.login .inputBx input::placeholder {
color: rgba(255, 255, 255, 0.75);
}
.login .links {
position: relative;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
}
.login .links a {
color: #fff;
text-decoration: none;
}
</style>
</head>
<body>
<!--링 div 시작-->
<div class="ring">
<i style="--clr:#00ff0a;"></i>
<i style="--clr:#ff0057;"></i>
<i style="--clr:#fffd44;"></i>
<div class="login">
<h2>로그인</h2>
<div class="inputBx">
<input type="text" placeholder="사용자 이름">
</div>
<div class="inputBx">
<input type="password" placeholder="비밀번호">
</div>
<div class="inputBx">
<input type="submit" value="로그인">
</div>
<div class="links">
<a href="#">비밀번호를 잊으셨나요?</a>
<a href="#">가입하기</a>
</div>
</div>
</div>
<!--링 div 종료-->
</body>
</html>
코드 설명)
1. 전역 스타일 설정:
– `@import` 구문을 사용하여 구글 폰트 서비스에서 ‘Quicksand’ 폰트를 가져옵니다. 이 폰트는 이후에 사용될 모든 텍스트에 적용됩니다.
– `*` 선택자를 사용하여 모든 요소에 적용되는 기본 스타일을 초기화합니다. 여기에는 여백, 안쪽 여백, 상자 크기 모델 등이 포함됩니다.
2. body 스타일 설정:
– body 요소를 화면의 가운데로 정렬하고, 전체 화면을 차지하도록 설정합니다.
– 배경색을 어두운 검정색(#111)으로 설정하여 시선을 집중시킵니다.
– overflow 속성을 hidden으로 설정하여 화면을 넘어가는 콘텐츠를 잘라냅니다.
3. 링 컨테이너 스타일 설정:
– 클래스명이 ‘ring’인 요소를 정의합니다.
– position을 relative로 설정하여 내부 요소의 위치를 상대적으로 배치합니다.
– display 속성을 flex로 설정하여 내부 요소를 가로로 정렬합니다.
4. 각 링의 스타일 설정:
– 각 링을 나타내는 요소에 대한 스타일을 설정합니다.
– position 속성을 absolute로 설정하여 부모 요소에 상대적으로 위치시킵니다.
– inset 속성을 사용하여 모든 가장자리를 0으로 설정하여 부모 요소에 딱 맞게 배치합니다.
5. 각 링의 모양 설정:
– nth-child() 선택자를 사용하여 각 링의 모양을 설정합니다.
– border-radius 속성을 사용하여 각 링의 모양을 조절합니다.
– 각 링은 서로 다른 속도로 회전하며, 360도의 원형 애니메이션을 적용합니다.
6. 마우스 호버 효과 설정:
– .ring:hover i 선택자를 사용하여 링에 마우스를 올렸을 때의 효과를 설정합니다.
– 테두리를 두껍게 만들고, 그림자 효과를 추가하여 링이 호버되었을 때 부드럽게 강조됩니다.
이러한 설명을 통해 각 부분이 어떻게 동작하는지 더 자세히 이해할 수 있을 것입니다. 각 스타일과 애니메이션의 상호 작용을 이해하면 코드를 수정하거나 새로운 요소를 추가하는 데 도움이 될 것입니다.