이 글의 내용은 순수한 CSS를 사용하여 깃발을 흔드는 애니메이션 효과를 얻는 방법에 관한 것입니다(소스 코드 첨부). 도움이 필요한 친구들이 참고할 수 있기를 바랍니다. .
https://github.com/comehope/front-end-daily-challenges
dom 정의, 컨테이너에는 15개 요소가 포함됩니다.
<div> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <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; }
컨테이너 크기 정의:
.flag { width: 10em; height: 15em; font-size: 20px; }
선 스타일 설정:
.flag span { width: 0.25em; height: inherit; background-color: deepskyblue; }
선 타일 만들기:
.flag { display: flex; justify-content: space-between; }
3D 원근 효과 추가:
.flag { transform: perspective(500px) rotateY(-20deg); }
왼쪽 및 오른쪽 이동 애니메이션 효과 정의:
.flag span { animation: wave 1.5s ease-in-out infinite alternate; } @keyframes wave { to { transform: translateX(2em); } }
요소 설정 변수 값:
.flag span:nth-child(1) { --n: 1; } .flag span:nth-child(2) { --n: 2; } /* 共 15 个元素,每元素的 --n 变量值等于它的序号。 */ /* 中间代码略 …… */ .flag span:nth-child(14) { --n: 14; } .flag span:nth-child(15) { --n: 15; }
깃발이 날아다니는 효과를 만들기 위해 각 줄의 애니메이션이 지연되어 시작되도록 합니다.
.flag span { animation-delay: calc(var(--n) * -0.1s); }
마지막으로 빛과 그림자 효과를 추가합니다.
.flag span { background-color: ghostwhite; } @keyframes wave { to { transform: translateX(2em); background-color: deepskyblue; } }
끝났습니다!
관련 권장 사항:
공이 직사각형 배경으로 바뀌는 버튼 호버 효과를 얻기 위해 순수 CSS를 사용하는 방법(소스 코드 첨부)
CSS와 D3를 사용하여 작은 물고기 수영의 대화형 애니메이션을 구현하는 방법 (코드 첨부)
위 내용은 순수 CSS를 사용하여 깃발을 흔드는 애니메이션 효과를 얻는 방법(소스 코드 첨부)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!