안녕하세요! 오늘 만들어 볼 css 애니메이션은 테두리가 시계방향으로 생성 되며 채워지는
border animation입니다.
결과 화면 부터 확인 해 볼까요?
위와 같이 시계방향으로 테두리가 생성되며 나타나고 반대로 지워질 때는 반시계 방향으로 테두리를
지우는 효과를 직접 만들어 보겠습니다. 우선 효과를 적용할 html 태그부터 만들어 보겠습니다.
1. 효과를 적용할 요소 생성 & 스타일 적용
[html]
<style>
html, body {
margin: 0;
padding: 0;
background: #333;
text-align: center;
}
a {
display: inline-block;
position: relative;
margin-top: 300px;
padding: 30px;
background-color: black;
color: white;
text-decoration: none;
font-size: 25px;
font-weight: bold;
}
</style>
<body>
<a href="#">
Border Effect
<span></span>
<span></span>
<span></span>
<span></span>
</a>
</body>
위 코드와 같이 a 태그 영역 안에 텍스트를 입력하고 테두리 효과를 적용할 span 태그를
상하좌우 각각 하나씩 총 4개를 만들어 줍니다. span 태그의 경우 absolute 속성을 주어 위치를 지정해 줄 예정 이어서 a 태그의 position 솏성은 relative로 설정해 줍니다. a 태그의 위치를 가운데에 위치시켜 주고 알맞게 크기와 색상을 지정해 줍니다. 이제 테두리에 스타일을 주고 애니메이션 효과를 적용해 보겠습니다.
2. 테두리 스타일 적용 & 애니메이션 효과 주기
[css]
a span:nth-child(1) {
position: absolute;
border-top: 7px solid white;
top: 0;
left: 0;
right: 100%;
transition: 0.1s;
}
a:hover span:nth-child(1) {
right: 0%;
}
a 내부의 span 태그에 nth-child(1) 선택자를 이용해 첫번째 span 태그에 스타일을 지정해 줍니다.
position: absolute 속성으로 설정하고 border-top: 7px solid white 속성을 부여해 위쪽에
7px의 흰색 테두리 영역을 만들었습니다.
top: 0, left:0 위치에서부터 right 속성을 100%에서 hover 했을 경우 0%로 변화시켜 주며 테두리가
만들어지는 애니메이션 효과를 줍니다. transition: 0.1s 속성으로 변화시킬 시간을 정해 줍니다.
동일한 방법으로 상하좌우 테두리를 nth-child() 선택자와 hover 효과를 이용해 만들어 주겠습니다.
top, bottom, left, right 속성을 고려하며 생성해 주시면 됩니다.
[css]
a span:nth-child(1) {
position: absolute;
border-top: 7px solid white;
top: 0;
left: 0;
right: 100%;
transition: 0.1s;
}
a:hover span:nth-child(1) {
right: 0%;
}
a span:nth-child(2) {
position: absolute;
border-right: 7px solid white;
top: 0;
right: 0;
bottom: 100%;
transition: 0.1s;
}
a:hover span:nth-child(2) {
bottom: 0%;
}
a span:nth-child(3) {
position: absolute;
border-bottom: 7px solid white;
bottom: 0;
left: 100%;
right: 0;
transition: 0.1s;
}
a:hover span:nth-child(3) {
left: 0%;
}
a span:nth-child(4) {
position: absolute;
border-left: 7px solid white;
top: 100%;
left: 0;
bottom: 0;
}
a:hover span:nth-child(4) {
top: 0%;
}
여기까지 4개의 테두리를 만들고 hover 효과를 적용하면 마우스 hover시 4개의 테두리가 만들어 지는 것을 확인 하실 수 있습니다. 이제 각각의 테두리에 시간차를 두고 위쪽부터 하나씩 그려질 수 있도록 delay
속성을 설정해 줍니다.
3. 테두리 생성, 제거 시 일정 delay 주기
[css]
a span:nth-child(1) {
transition-delay: 0.3s
}
a:hover span:nth-child(1) {
transition-delay: 0s;
}
a span:nth-child(2) {
transition-delay: 0.2s;
}
a:hover span:nth-child(2) {
transition-delay: 0.1s;
}
a span:nth-child(3) {
transition-delay: 0.1s;
}
a:hover span:nth-child(3) {
transition-delay: 0.2s;
}
a span:nth-child(4) {
transition-delay: 0s;
}
a:hover span:nth-child(4) {
transition-delay: 0.3s;
}
위에 적용했던 속성값 마지막에 transition-delay 속성을 부여해 줍니다.
a:hover 효과의 경우 위쪽부터 차례로 시간차를 두고 생성되어야 하므로
a:hover span:nth-child(1) => 0s
a:hover span:nth-child(2) => 0.1s
a:hover span:nth-child(3) => 0.2s
a:hover span:nth-child(4) => 0.3s
순서로 0.1초의 시간차를 두고 첫 번째 요소부터 네 번째 요소까지 속성을 설정해 줍니다.
반대로 hover 효과가 적용되지 않을 때는
a span:nth-child(4) => 0s
a span:nth-child(3) => 0.1s
a span:nth-child(2) => 0.2s
a span:nth-child(1) => 0.3s
순서로 0.1초의 시간차를 두고 네 번째 요소부터 첫 번째 요소까지 속성을 설정해 줍니다.
애니메이션 효과까지 모두 적용한 최종 결과를 다시 한번 확인 해 볼까요?
오늘은 테두리가 시계방향으로 생성 되며 채워지는 border animation을 만들어 보았습니다.
애니메이션 카테고리에는 css를 이용하여 다양한 애니메이션 효과를 적용하여 포스팅 해 볼 계획
입니다. 그럼 다음에 또 다른 내용으로 찾아 오겠습니다 :)
'animation' 카테고리의 다른 글
| CSS 막대 로딩바 (크기가 변하는 막대 로딩바 만들기) (0) | 2023.01.12 |
|---|---|
| CSS 바운스볼 애니메이션 만들기 (bounce ball animation) (0) | 2023.01.09 |
| SVG 원형 프로그래스바 (svg circle progress bar) (0) | 2023.01.04 |
| CSS 원형 로딩 스피너 (css circle loading spinners) (0) | 2022.12.22 |
| CSS 도트 확대 로딩바 (css dot loading bar) (0) | 2022.12.20 |
댓글