🔍 완성 화면
🔍 코드
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex 정리</title>
<link rel="stylesheet" href="style.css">
<style>
.loader{
display: flex;
justify-content: center;
align-items: center;
width: 400px;
height: 400px;
background-color: black;
}
.circle{
width: 40px;
height: 40px;
background-color: #fff;
border-radius: 50%;
margin: 10px;
animation: bounce 0.5s ease-in infinite;
}
@keyframes bounce {
from{
transform: translateY(0);
}
to{
transform: translateY(10px);
}
}
</style>
</head>
<body>
<div class="loader">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</body>
</html>keyframes 를 이용하여 Y축을 기준으로 0부터 10px 를 이동하는 속성을 만들고
애니메이션을 이용하여 설정해주었다.
다만 저렇게 설정을 해주면 부드럽게 이어지는것이 아니라 아래에서 위로 올라갔다가 뚝 끊기는 효과처럼 보인다.
이럴때 애니메이션 진행 방향을 지정하는 animation-direction 속성을 사용해서 alternate 속성을 지정해주면 된다.
alternate 속성은 정방향으로 재생이 된 후에 다시 역방향으로 재생이 되는 속성이다.
.circle{
width: 40px;
height: 40px;
background-color: #fff;
border-radius: 50%;
margin: 10px;
animation: bounce 0.5s ease-in infinite;
animation-direction: alternate;
}
.circle:nth-child(2){
animation-delay: 0.1s;
}
.circle:nth-last-child(3){
animation-delay: 0.2s;
}또한 물결 같은 모양을 만들어주어야하니 두번째 요소와 3번째 요소에 각각 딜레이를 주어서 조금씩
다르게 아래 위로 움직이도록 하였다.
https://brgndy.me/ 로 옮기는 중입니다 :)