HTML과 CSS를 사용하여 애니메이션 막대 차트를 만드는 방법은 무엇입니까?

개요

애니메이션 바는 HTML과 CSS를 사용하여 만든 그래픽 애니메이션 바입니다. 애니메이션 막대의 레이아웃은 HTML을 사용하여 생성되고 막대의 스타일은 CSS를 사용하여 생성됩니다. 일반 막대 차트는 정상적으로 생성할 수 있지만 애니메이션 막대 차트를 생성해야 하므로 CSS 전환 애니메이션 속성을 사용하여 애니메이션을 적용하겠습니다. 음악 애니메이션 바 싱크로나이저와 동일한 애니메이션 바를 구축하겠습니다.

알고리즘

1단계 - 텍스트 편집기에서 HTML 파일을 만들고 그 안에 HTML 상용구를 추가합니다.

2단계 − 이제 애니메이션 라인이 포함된 상위 div 컨테이너를 만듭니다.

으아악

3단계 −상위 div 내에 div 하위 컨테이너를 만듭니다. 좋은 애니메이션 막대를 만들고 클래스 이름을 줄로 추가하려면 최소 7개의 "div"를 만듭니다.

으아악

4단계 − 이제 style.css 파일을 만들고 해당 파일을 HTML 문서에 연결합니다.

으아악

5단계− style.css 파일에서 HTML 요소의 스타일을 설정합니다.

으아악

6단계 − 하위 "div" 컨테이너의 클래스 이름을 배치하여 이 줄에 애니메이션을 적용합니다.

으아악

7단계−애니메이션 바가 성공적으로 생성되었습니다.

예

이 예에서는 애니메이션 바를 만듭니다. 이를 위해 index.html과 style.css라는 두 개의 파일을 만듭니다. 인덱스 파일에는 페이지의 레이아웃이 포함되고 style.css 파일에는 페이지의 스타일 부분이 포함됩니다.

으아악

아래 주어진 이미지는 위 예의 출력을 보여주며 브라우저에서 실시간으로 볼 수 있는 애니메이션 라인을 보여줍니다. 사용자가 이 기능을 브라우저에 로드하면 더욱 매력적으로 보이는 애니메이션 라인이 표시됩니다.

결론

애니메이션 바의 이 기능은 음성 합성기에서 그래픽 인터페이스로 사용할 수 있습니다. 오디오 레코더 및 DJ 비트 동기화 장치와 같은 많은 응용 프로그램에서도 이 구성 요소를 볼 수 있습니다. 위 예제의 주요 부분은 타이밍입니다. 막대 크기가 증가함에 따라 애니메이션이 적용되도록 타이밍을 설정했습니다.

위 내용은 HTML과 CSS를 사용하여 애니메이션 막대 차트를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!