이 글의 내용은 순수 CSS를 사용하여 공 점프 스텝의 애니메이션 효과를 구현하는 방법에 관한 것입니다. (소스 코드 첨부) 도움이 필요한 친구들이 참고할 수 있기를 바랍니다. 도움이 됩니다.
https ://github.com/comehope/front-end-daily-challenges
Define dom, 컨테이너에는 5단계를 나타내는 5개 요소가 포함되어 있습니다. # 🎜🎜 #
<div> <span></span> <span></span> <span></span> <span></span> <span></span> </div>중앙 디스플레이:
body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background-color: black; }컨테이너 크기 정의:
.loader { width: 7em; height: 5em; font-size: 40px; }5단계 그리기:
.loader { display: flex; justify-content: space-between; align-items: flex-end; } .loader span { width: 1em; height: 1em; background-color: white; }변수 사용 5단계 낮은 것에서 높은 것으로 정렬됩니다:
.loader span { height: calc(var(--n) * 1em); } .loader span:nth-child(1) { --n: 1; } .loader span:nth-child(2) { --n: 2; } .loader span:nth-child(3) { --n: 3; } .loader span:nth-child(4) { --n: 4; } .loader span:nth-child(5) { --n: 5; }정렬 방향을 단계로 전환하는 애니메이션 효과를 추가합니다:
.loader span { animation: sort 5s infinite; } @keyframes sort { 0%, 40%, 100% { height: calc(var(--n) * 1em); } 50%, 90% { height: calc(5em - (var(--n) - 1) * 1em); } }아래에서 작은 공의 애니메이션이 다음을 사용하여 수행됩니다. 같은 색의 공 두 개가 교대로 움직이는 방식은 마치 하나의 공이 왕복하는 것처럼 보입니다. 의사 요소가 포함된 작은 공 2개 그리기:
.loader::before, .loader::after { content: ''; position: absolute; width: 1em; height: 1em; background-color: white; border-radius: 50%; bottom: 1em; } .loader::before { left: 0; } .loader::after { left: 6em; }공이 위쪽으로 이동하도록 애니메이션 효과 추가:
.loader::before, .loader::after { animation: climbing 5s infinite; visibility: hidden; } .loader::after { animation-delay: 2.5s; } @keyframes climbing { 0% { bottom: 1em; visibility: visible; } 10% { bottom: 2em; } 20% { bottom: 3em; } 30% { bottom: 4em; } 40% { bottom: 5em; } 50% { bottom: 1em; } 50%, 100% { visibility: hidden; } }위로 이동 양쪽으로 이동 계단을 오르는 애니메이션 효과를 동시에 형성합니다:
.loader::before { --direction: 1; } .loader::after { --direction: -1; } @keyframes climbing { 0% { bottom: 1em; left: calc(3em - 2 * 1.5em * var(--direction)); visibility: visible; } 10% { bottom: 2em; left: calc(3em - 1 * 1.5em * var(--direction)); } 20% { bottom: 3em; left: calc(3em - 0 * 1.5em * var(--direction)); } 30% { bottom: 4em; left: calc(3em + 1 * 1.5em * var(--direction)); } 40% { bottom: 5em; left: calc(3em + 2 * 1.5em * var(--direction)); } 50% { bottom: 1em; left: calc(3em + 2 * 1.5em * var(--direction)); } 50%, 100% { visibility: hidden; } }마지막으로 계단을 오르는 동작에 의인화 효과를 추가합니다:
@keyframes climbing { 0% { bottom: 1em; left: calc(3em - 2 * 1.5em * var(--direction)); visibility: visible; } 7% { bottom: calc(2em + 0.3em); } 10% { bottom: 2em; left: calc(3em - 1 * 1.5em * var(--direction)); } 17% { bottom: calc(3em + 0.3em); } 20% { bottom: 3em; left: calc(3em - 0 * 1.5em * var(--direction)); } 27% { bottom: calc(4em + 0.3em); } 30% { bottom: 4em; left: calc(3em + 1 * 1.5em * var(--direction)); } 37% { bottom: calc(5em + 0.3em); } 40% { bottom: 5em; left: calc(3em + 2 * 1.5em * var(--direction)); } 50% { bottom: 1em; left: calc(3em + 2 * 1.5em * var(--direction)); } 50%, 100% { visibility: hidden; } }You 끝났어! 관련 권장 사항:
순수한 CSS를 사용하여 회전하는 자전거 바퀴의 애니메이션 효과를 얻는 방법
Pure CSS를 사용하여 깃발이 펄럭이는 것과 유사한 애니메이션 효과를 얻는 방법(소스 코드 첨부)위 내용은 순수 CSS를 사용하여 공 점프 단계의 애니메이션 효과를 얻는 방법(소스 코드 첨부)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!