>웹 프론트엔드 >JS 튜토리얼 >일반 Javascript와 CSS를 사용하여 회전하는 꽃 애니메이션!

일반 Javascript와 CSS를 사용하여 회전하는 꽃 애니메이션!

王林
王林원래의
2024-07-27 17:54:23485검색

저는 단지 재미로 회전하는 꽃 애니메이션을 만들었는데, 그것은 학습 경험이었습니다! 나는 이것을 달성하기 위해 몇 가지 루프와 배열을 사용했고, 그것이 작동하게 되어 기쁩니다. 여러분도 저만큼 재미있기를 바랍니다! 앞으로 더 많은 것을 만들게 되어 기쁩니다. 나는 이것을 거의 포기했습니다. 그러지 않아서 다행이에요!

annavi11arrea1.github.io

이 프로젝트는 약간의 여정이었습니다. 자바스크립트와 CSS를 올바르게 정렬하는 데 어려움을 겪었습니다. 많이 파헤쳐보세요!

Spinning Flower Animations with plain Javascript and CSS!

마침내 CSS 스타일을 적용하여 객체 배열을 DOM에 올바르게 추가할 수 있게 되었을 때 매우 기뻤습니다.

그런 다음 그것들을 서로 겹쳐서 정렬하는 방법을 찾아야 했습니다.

Spinning Flower Animations with plain Javascript and CSS!

대대적인 수정 끝에 마침내 정렬할 수 있게 되었습니다. 다시는 잊지 마세요!!! XD

모든 것이 나타나고 정렬된 후에는 색상과 위치가 바뀌면서 재미있는 회전하는 꽃 애니메이션을 만들 수 있었습니다.

project completion

이 사실을 알아내는 데 하루가 조금 넘게 걸렸습니다. 당신이 나와 같은 초보자라면 내 코드를 확인하고 무슨 일이 일어나고 있는지 알아내는 것이 좋습니다! 무언가를 만들고 작동시키는 것은 정말 멋진 일입니다. 예! 여기 있습니다:

코드샌드박스.io

위 내용은 일반 Javascript와 CSS를 사용하여 회전하는 꽃 애니메이션!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.