매우 멋진 HTML5/CSS3 애플리케이션 플러그인 20개에 대한 자세한 소개(사진)

HTML5 기반 애플리케이션은 이제 매우 널리 퍼져 있습니다. 오늘은 20개의 매우 멋진 HTML5/CSS3 애플리케이션 플러그인을 여러분과 공유하겠습니다. 모두가 좋아하고 친구들과 공유하길 바랍니다.

1. HTML5 비디오 조각화 및 재구성 특수 효과는 강력한 시각적 영향을 미칩니다.

HTML5 비디오 플레이어는 많지만 HTML5 비디오 특수 효과는 여전히 드뭅니다. 매우 흥미롭고 사람들에게 강력한 시각적 영향을 줍니다. 비디오의 아무 곳이나 클릭하면 HTML5가 해당 영역을 조각으로 나눕니다. 잠시 후 깨진 비디오 조각이 자동으로 다시 결합됩니다. 아주 좋은 HTML5 비디오 효과입니다.

온라인 시연/소스 코드 다운로드

2. HTML5 3D Google 검색 Small Box Big World

HTML5는 실제로 사람들이 수천 가지를 상상할 수 있게 해줍니다. 의, 실제로 Google 검색이라는 아이디어가 나왔습니다. HTML5 기술을 사용하여 Google 검색을 작은 상자에 담아 3D 검색을 만들었습니다. 마우스가 움직이면 HTML5 3D 검색 상자가 회전하여 매우 3차원적으로 만들어집니다. 검색 버튼을 클릭하여 상자를 열고 Google 검색을 수행하세요.

온라인 데모/소스코드 다운로드

3. CSS3/jQuery 크리에이티브 박스 애니메이션 메뉴

프런트엔드 개발자로서 다양한 jQuery 메뉴를 많이 보았지만 이 jQuery/CSS3 메뉴는 독특합니다. 메뉴 항목은 작은 상자처럼 9개의 정사각형 그리드에 포함되어 있고 따뜻한 배경으로 메뉴의 전체적인 모습은 다음과 같습니다. 매우 귀엽습니다. 메뉴 항목을 클릭하면 상자가 확장되어 메뉴 항목의 특정 내용이 표시됩니다. 이 CSS3 메뉴는 확장 시 멋진 애니메이션도 제공합니다.

온라인 데모/소스코드 다운로드

4. 화려한 HTML5 차트로 실시간 데이터 표시 가능

HTML5는 다음과 같은 분야에서도 널리 사용됩니다. 차트 응용 프로그램은 이전 웹 차트와 비교하여 HTML5 차트가 생성하기가 더 편리하고 강력합니다. 이 HTML5 차트 플러그인은 매우 화려하고 전문적인 외관을 가지고 있으며 데이터 표시에도 매우 유리합니다. 차트는 다차원 데이터 표시를 지원할 뿐만 아니라 영역 선택 데이터 기능도 지원합니다. 데이터를 더욱 편리하게 관리하세요.

온라인 시연/소스 코드 다운로드

5. HTML5 중력 감지 게임: 리더의 아바타

곧 설날이 다가옵니다. 월급이 안 올랐는데 얼마죠? 연말 상여금도 안 주니까 리더가 싫어요. 이제 이 HTML5 중력 감지 게임을 사용하여 리더의 아바타를 즐겨보세요. 당신이 싫어하는 지도자의 아바타 사진을 만들고, 이 HTML5 중력 센서 게임 플러그인을 사용하여 마우스를 드래그하여 아바타를 휘두르고, 급여를 올리지 말라고 말하고... 급여를 올리지 말라고...

온라인 시연/소스코드 다운로드

6. HTML5 3D 3차원 그림 회전 재생 디스플레이

HTML5 기술이 등장한 이후, 브라우저 특수 효과에서 점점 더 많은 3D를 볼 수 있습니다. 이 HTML5 3D 입체 사진 회전 재생 및 표시 도구는 강력한 HTML5 3D 기능을 반영합니다. 물론 이 3D 사진 데모를 보려면 HTML5 3D 기능을 지원하는 브라우저가 필요합니다.

온라인 데모/소스 코드 다운로드

7. HTML5 중국 체스 게임 맞춤형 체스 난이도

데스크톱 게임에 체스 게임이 도입되었습니다. 매우 성숙하고 다양한 버전의 중국 장기가 있습니다. 오늘날 HTML5 기술을 기반으로 하는 중국 체스 게임은 매우 독특합니다. 중국 체스 게임의 난이도를 선택할 수 있을 뿐만 아니라 체스판의 스타일도 바꿀 수 있습니다. 프로그램 작성이 지치면 커피 한 잔을 마시고 컴퓨터로 몇 가지 게임을 해보세요. HTML5 중국 체스 게임의 구현 알고리즘을 알고 계시다면 소스 코드를 열어서 이 HTML5 중국 체스 게임을 공부해 보세요.

온라인 데모/소스코드 다운로드

8. HTML5 플레이어 신화적 카세트 클래식 플레이어

아주 스타일리시한 클래식입니다. 하지만 매우 패셔너블한 HTML5 플레이어입니다. 이 카세트 스타일의 HTML5 플레이어는 비교적 오래되었기 때문에 클래식 플레이어라고 합니다. 요즘에는 이러한 스타일을 갖춘 HTML5 플레이어가 거의 없기 때문에 패셔너블하다고 합니다. 네, 매우 창의적입니다. 개인용 플레이어를 개인 집에 추가하려면 이 HTML5 카세트 클래식 플레이어를 선택하세요. 저는 개인적으로 이것이 HTML5 플레이어의 신화이며 매우 고전적이라고 생각합니다.

온라인 데모/소스코드 다운로드

9. HTML5 슈퍼마리오 게임, HTML5 게임의 고전을 다시 경험하다

아직도 우리가 했던 슈퍼마리오 모험이 기억난다. 어렸을 때 같이 놀았지 게임? 예, 그것은 우리 어렸을 때 매우 인기 있었던 게임이었습니다. 오늘날 외국인들은 슈퍼마리오를 웹에서 실행할 수 있도록 HTML5 기술을 사용합니다. 비록 HTML5 버전의 슈퍼마리오가 원래 버전만큼 강력하지는 않지만, 관심이 있으시다면, 당신은 확실히 그것을 재생할 수 있습니다. HTML5는 정말 강력하며 HTML5 게임은 더욱 선명합니다.

온라인 시연/소스코드 다운로드

10. 낭만프로그래머 HTML5 사랑고백 애니메이션

우리는 프로그래머 사랑을 추구하는 것도 매우 낭만적입니다. 아래는 동급생이 배운 HTML5 지식을 사용하여 만든 HTML5 사랑 고백 애니메이션입니다. 이러한 창의력은 싱글 프로그래머라면 쉽게 감동할 수 있습니다. 서둘러 나만의 사랑 고백 애니메이션을 만들 수도 있습니다.

온라인 데모/소스 코드 다운로드

11. CSS3 비밀번호 강도 확인 양식 속도계 스타일

회원으로 등록할 때 웹사이트에 강력하고 큰 비밀번호를 입력하면 계정 보안이 크게 강화됩니다. 그렇다면 어떤 종류의 비밀번호가 더 안전할까요? 이 CSS3 비밀번호 강도 확인 양식 플러그인은 현재 입력된 비밀번호의 보안 수준을 묻는 메시지를 표시할 수 있습니다. 흥미로운 점은 비밀번호 강도 확인 플러그인의 스타일이 비밀번호 강도가 증가함에 따라 유사하다는 것입니다. , 코드 속도계 포인터는 시계 방향으로 회전합니다. 물론 회전의 특수 효과는 jQuery와 결합된 CSS3를 사용하여 달성됩니다.

온라인 데모/소스코드 다운로드

12. Pure CSS3 Android 로고 애니메이션 그리기 손도 움직일 수 있습니다

CSS3를 사용하면 복잡한 패턴 아이콘을 많이 그려보겠습니다. 오늘은 순수 CSS3를 사용하여 Android 로고 아이콘을 구현하겠습니다. CSS3 Android 로고는 주로 CSS3의 둥근 모서리와 같은 속성을 사용합니다. 동시에 그려진 로고도 매우 사실적입니다. 애니메이션 효과가 있습니다. 마우스가 Android 소형 위로 미끄러집니다. 사람의 머리와 손을 배치해도 작은 손이 계속 흔들릴 수 있습니다.

온라인 데모/소스 코드 다운로드

13. Pure CSS3 luminous 로그인 양식

우리는 많은 CSS3 양식을 보았습니다. 모두 매우 아름답게 만들어졌습니다. 오늘 소개된 CSS3 양식은 외관이 멋질 뿐만 아니라 컬러 글로우 애니메이션도 함께 제공됩니다. 마우스가 양식을 활성화하면 양식 주위에 빛나는 색상 그라데이션 애니메이션이 나타납니다. 검은색 배경을 사용하면 전체 CSS3 양식이 특히 밝게 보입니다. 더 중요한 것은 이 CSS3 발광 형식이 기본적으로 JS 코드가 거의 없는 CSS3에서 구현되었으며 CSS3 엔진의 최적화가 매우 분명하다는 것입니다.

온라인 데모/소스 코드 다운로드

14. CSS3 3D 진행률 표시줄 버튼 18가지 아름다운 스타일

웹 페이지에 데이터를 제출합니다. 진행률 표시줄이 자주 표시되지만 대부분의 진행률 표시줄은 팝업 창 등 웹 페이지의 다른 곳에 표시됩니다. 이 CSS3에 의해 구현된 진행 표시줄은 버튼에 표시되어 사용자 제출 진행 상황을 보다 직관적으로 반영할 수 있습니다. CSS3 진행 표시줄 버튼의 스타일은 매우 아름답고 브라우저에 3D 3차원 효과를 줄 수도 있습니다. 또한 진행률 표시줄은 총 18가지 스타일로 다양한 형태로 표시될 수 있습니다.

15. HTML5 물결 애니메이션 특수 효과는 매우 현실적입니다.

실생활에서 물의 효과를 자주 볼 수 있습니다. 파도. 빗방울이 강에 떨어지면 강물에 잔물결이 일어나야 합니다. 오늘 우리는 HTML5를 사용하여 물의 파급 효과를 시뮬레이션했습니다. 강의 그림을 클릭하면 클릭한 곳에서 물결이 시작되어 멀리까지 확장됩니다. HTML5를 사용하여 시뮬레이션한 이 물결 효과는 매우 현실적이지만 약간 CPU를 많이 사용합니다.

온라인 시연 / 소스코드 다운로드

16. HTML5 빗방울 떨어지는 애니메이션은 빗방울을 날게 합니다

사용에 주의가 필요합니다 빗방울의 낙하를 구현하는 HTML5. 1. 빗방울의 크기와 모양 2. 떨어지는 빗방울의 속도를 제어합니다. 이 데모 애니메이션은 빗방울이 떨어지는 애니메이션을 생생하게 시뮬레이션합니다. 마우스가 위로 움직이면 빗방울 3개가 생겨서 아래로 떨어집니다. HTML5 기술은 정말 편리합니다.

온라인 데모/소스코드 다운로드

17. HTML5 Pac-Man 게임 PCMAN

오늘은 또 다른 좋은 HTML5 게임인 HTML5 Eat를 소개하고 싶습니다. Bean-Man 게임에는 화면에 팩맨과 몬스터 무리가 있습니다. 팩맨이 몬스터를 만나 잡아먹히면 이동하고 작은 콩을 먹으려면 팩맨을 제어해야 합니다. , GAME OVER 상태가 됩니다. 이 HTML5 게임에는 완벽하지 않은 한 가지가 있습니다. 즉, 팩맨은 괴물을 만나도 잡아먹힐 수 없다는 것입니다. 관심 있는 학생들은 계속해서 게임을 개선할 수 있습니다. HTML5 게임 개발에는 기술뿐만 아니라 창의성도 필요합니다.

온라인 데모/소스 코드 다운로드

18. HTML5 픽셀 스매싱 그림 애니메이션 사진이 바닥에 흩어져 있습니다

이 HTML5 그림 애니메이션은 특수 효과는 당신에게 줄 것입니다. 사진을 여러 픽셀 입자로 분쇄하는 것은 절대 상상할 수 없습니다. 사진을 클릭하면 이러한 픽셀 입자가 땅에 떨어집니다. 계속 클릭하면 분쇄된 픽셀 입자가 다시 조립됩니다. 완전한 그림. HTML5 기술을 사용하여 이러한 이미지 분쇄 효과를 얻는 것은 매우 간단합니다. 관심 있는 학생들은 소스 코드를 다운로드하여 배울 수 있습니다.

온라인 시연/소스코드 다운로드

19. HTML5 우주 전투기 게임이 재미있고 흥미진진합니다

이것도 웰메이드입니다. HTML5 게임 이 HTML5 게임의 주인공은 영웅적이고 강력한 우주 전투기입니다. 게임에 들어간 후 "Z" 키를 눌러 총알을 발사하고 적 항공기를 파괴하세요. 이 HTML5 전투기 게임의 특징은 다음과 같습니다. 1. 게임 그래픽이 매우 화려하고 사실적이며 사운드 요소가 추가되어 게임을 더욱 매력적으로 만듭니다. 2. 다양한 유형의 적 항공기와 총알 유형을 포함하여 많은 게임 요소가 있습니다. 플레이어가 지루해하지 않도록 해고되었습니다.

온라인 데모/소스 코드 다운로드

20. HTML5 애니메이션 사진 플레이어는 고급스럽고 분위기가 좋습니다.

우리는 많은 사진을 보았습니다. 재생 플러그인(Focus Figure)은 대부분 jQuery를 기반으로 합니다. 오늘 소개된 HTML5 이미지 플레이어는 매우 특별합니다. 이미지 간 전환 시 전환 애니메이션 효과가 있을 뿐만 아니라 전환 시 이미지의 텍스트 이동, 분할, 재그룹화 등 이미지 요소에 애니메이션 효과가 적용됩니다. . 이 HTML5 애니메이션 사진 플레이어는 고급스럽고 고급스러운 것으로 간주될 수 있습니다.

온라인 데모/소스코드 다운로드

위 내용은 매우 멋진 HTML5/CSS3 애플리케이션 플러그인 20개에 대한 자세한 소개(사진)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!