728x90
안녕하세요!
오늘은 CSS 애니메이션으로 로딩이미지 구현하는 방법을 알려드리겠습니다!
결과물
< html >
< 기본 css >
기본 셋팅 css 구조입니다.
display : flex;
justify-content : center;
align-items : center;
height : 100vh;
=> 콘텐츠를 브라우저 정중앙에 배치하도록 합니다.
span을 inline-block으로 가로배치를 한 뒤
width, height값 등을 지정하여 화면에 원 3개를 띄어줍니다.
각각의 span을 nth-child() 가상클래스로
background-color와 animation-delay를 전부 다르게 줍니다.
@keyframes 애니메이션이름 {
0%{
시작값
}
50%{
중간값
}
100%{
마지막값
}
애니메이션 이름을 loading으로 지정하고
각 시작,중간,마지막 속성에 opacity와 scale값을 다르게 지정해줍니다.
animation : 애니메이션이름 실행시간 이징효과 반복여부
=> 순서는 상관 없으며 각각 다르게 주어도 됩니다.
span에 animation 속성을 추가하면 완성! :)
728x90
'[프론트엔드] > css' 카테고리의 다른 글
| [CSS] 가상클래스로 간단한 로그인 UI form 요소 만들기 (0) | 2022.04.09 |
|---|---|
| [CSS] fontawesome과 before 가상선택자로 input 체크박스 디자인 하기 (7) | 2022.04.05 |
| [CSS] input폼, 인접 선택자로 css만으로 opacity를 활용한 tab버튼 slide형태 만들기 (6) | 2022.03.29 |
| [CSS] before,after 가상선택자, data 속성, hover로 다음 네비게이션 쉽게 만들기 (2) | 2022.03.27 |
| [CSS] before 가상선택자, fontawesome, hover로 인터렉티브한 네비게이션 쉽게 만들기 (0) | 2022.03.27 |