-
@keyframe 도형 로딩 애니메이션Web/인프런 2022. 1. 7. 21:34
<애니메이션 미리보기>
See the Pen Untitled by seohyeon baek (@100seo) on CodePen.
<코드블럭>
기본 html 구문 불러오기
<!DOCTYPE html> <html lang="ko"> <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>keyframe</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="loading"> <span></span> <span></span> </div> </body> </html>css 작업
/*로딩화면이므로 정중앙 배치*/ body{ display: flex; justify-content: center; align-items: center; height: 100vh; } .loading{ /*border: 1px solid red; */ width: 30px; height: 30px; position: relative; } .loading span{ position: absolute; width: 10px; height: 10px; background-color: red; /*loading이라는 이름을 가진 애니메이션을 n초만큼 무한반복 재생시킴*/ animation: loading 1.5s infinite; } .loading span:nth-child(1){ background-color: red; } .loading span:nth-child(2){ /*2번째 span태그가 0.7초만큼 나중에 출발*/ animation-delay: 0.7s; } /*모서리를 돌고 다시 처음으로 돌아와야 하므로 25%씩 총 5개의 프레임 생성*/ @keyframes loading{ 0%{ top: 0; left: 0; } 25%{ top: 0; /*컬크태그. 마이너스 양옆에 무조건 띄어쓰기 border기준 안쪽에서 돌게끔 넣어줘야하기 때문에 span자체 크기만큼 빼줌*/ left: calc(100% - 10px); background-color: blue; } 50%{ top: calc(100% - 10px); left: calc(100% - 10px); background-color: orange; } 75%{ top: calc(100% - 10px); left: 0; background-color: green; } 100%{ /*0%,100% 동일하게 작성*/ top: 0; left: 0; } }'Web > 인프런' 카테고리의 다른 글
아코디언 갤러리 html, css 코드 소스 (0) 2022.01.20 @key frame 보더 회전 애니메이션 (0) 2022.01.13