HTML 및 CSS를 사용하여 확인 표시 애니메이션이 있는 로더 만들기
4224 단어 csshtmlincoderweb
프리로더(로더라고도 함)는 페이지의 나머지 콘텐츠가 계속 로드되는 동안 화면에 표시되는 것입니다. 로더는 페이지 콘텐츠가 계속 로드되는 동안 방문자와 콘텐츠 뷰어를 즐겁게 하는 데 사용되는 단순하거나 복잡한 애니메이션입니다.
이 프로그램(체크 표시 애니메이션이 있는 원형 로더)에서 이 로더는 특정 시간에 테두리 색상을 변경하면서 360도 무한 회전하지만 이 로더를 클릭하면 이 로더가 회전을 멈추고 로드 프로세스가 완료되었음을 나타내는 부드러운 애니메이션.
다음을 좋아할 수 있습니다.
이 블로그가 마음에 들고 소스 코드 파일을 다운로드하려는 경우 이 프로그램here의 소스 파일을 쉽게 다운로드할 수 있는 이 프로그램의 다운로드 링크도 제공했습니다.
HTML 코드
<!DOCTYPE html>
<html lang="en">
<head>
<!-- -------------------- Created By InCoder -------------------- -->
<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>Loader With Check Mark Animation - InCoder</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<input type="checkbox" id="loader">
<label for="loader">
<div class="check"></div>
</label>
</body>
</html>
CSS 코드
/* -------------------- Created By InCoder -------------------- */
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #202020;
}
input {
display: none;
}
input:checked~label {
animation: none;
transition: border 0.5s ease-out;
}
input:checked~label .check {
display: block;
}
label {
width: 7rem;
height: 7rem;
position: relative;
border-radius: 50%;
border: 2px solid #ccc;
border-left: 2px solid #472db9;
animation: spin 1.2s linear infinite, colorChange 3s linear infinite;
}
label .check {
top: 50%;
left: 23px;
width: 28px;
content: "";
height: 56px;
display: none;
position: absolute;
transform-origin: left top;
animation: check 0.8s ease;
border-top: 4px solid #5cb85c;
border-right: 4px solid #5cb85c;
transform: scaleX(-1) rotate(135deg);
}
@keyframes check {
0% {
height: 0;
width: 0;
opacity: 1;
}
20% {
height: 0;
width: 28px;
opacity: 1;
}
40% {
height: 56px;
width: 28px;
opacity: 1;
}
100% {
height: 56px;
width: 28px;
opacity: 1;
}
}
@keyframes colorChange {
40% {
border-left: 2px solid #2db981;
}
60% {
border-left: 2px solid #b97f2d;
}
80% {
border-left: 2px solid #b92db2;
}
100% {
border-left: 2px solid #b92d2d;
}
}
@keyframes spin {
100% {
transform: rotate(360deg);
}
}
Reference
이 문제에 관하여(HTML 및 CSS를 사용하여 확인 표시 애니메이션이 있는 로더 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/incoderweb/create-a-loader-with-check-mark-animation-using-html-and-css-1i33텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
