이제 전환 효과를 배웠으므로 애니메이션 효과를 만드는 것에 대한 인식을 갖기 시작했으며 더 눈부신 가제트를 깨달을 것입니다. 웹 페이지에 전환 애니메이션 효과를 추가하면 사람들이 아름답게 보이고 뻣뻣하지 않으며 잘 보이게됩니다. 애니메이션은 웹 페이지의 아름다움의 주요 표현 중 하나입니다. 다음은 달성하기 위해 전환 효과를 사용하는 복권의 몇 가지 예입니다.
먼저 렌더링을 봅시다 :
이 구현에는 일부 JS 코드가 필요합니다.
필수 사진 :
이 사진은 pointer.png의 위치에 있습니다.
Turntable-bg.jpg이 그림은 배경 위치의 배경 이미지입니다.
이 사진은 Turntable.png 위치에 있습니다.
이 세 사진이 필요합니다. 구현하려면이 세 장의 사진을 저장하여 소개하십시오. 그렇지 않은 경우 해당 이미지 이름으로 수정하여 동일한 파일에 넣으십시오.
암호:
<! docType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> 릴리스 복권 </title> <!-여기에 css 부분-> <style> #bg {width : 650px; 높이 : 600px; 여백 : 0 Auto; 배경 : URL (Turntable-bg.jpg) No-Repeat; 위치 : 상대; } img [src^= "포인터"] {위치 : 절대; z- 인덱스 : 10; 상단 : 155px; 왼쪽 : 247px; } img [src^= "Turntable"] {위치 : 절대; Z- 인덱스 : 5; 상단 : 60px; 왼쪽 : 116px; 전환 : 모두 4S; . var oturntable = document.getElementsByTagName ( "IMG") [1]; var cat = 51.4; var num = 0; var offon = true; document.title = ""; opointer.onclick = function () {if (offon) {oturntable.style.transform = "rotate (0deg)"; Offon =! Offon; 평가 (); }} 함수 rationing () {var timer = null; var rdm = 0; ClearInterval (타이머); TIMER = setInterVal (function () {if (math.floor (rdm/360) <3) {rdm = math.floor (math.random ()*3600);} else {oturntable.style.transform = "rotate ("+rdm+"deg)"; settimeout (optunction () {! num = rdm%360; if (num <= cat*5) {num <= cat*6) {num <= cat*7); } </script> </body> </html>CSS 및 HTML 코드는 주로 전환 설정을 달성하고 캐스케이드 포지셔닝을 구현하기위한 CSS 및 HTML 코드가 많지 않으므로 요소는 요소 및 이벤트의 클릭을 얻을 수 있도록 위치되므로 클릭 포인터가 회전하므로 클릭 이벤트를 포인터에 추가해야합니다. 클릭이 없으면 함수 Rating ()를 호출 할 수 없습니다. 이 함수는 턴테이블의 회전을 수행하고 포인터가 중지되는 위치를 결정한 다음 해당 컨텐츠를 나타냅니다. 함수에서 회전을 구현하는 과정은 턴테이블의 요소를 얻은 다음 JS를 사용하여 CSS 변환 (rotate)의 속성을 제어하는 것입니다. 이 속성을 사용하여 CSS의 회전 효과를 직접 달성하지 못했습니까? 의사 클래스 선택기 인 호버 및 전환 속성으로 구현됩니다. 따라서 CSS는 숫자 작동 및 마우스 클릭을 구현할 수 없으므로 JS가 CSS 속성을 구현하고 제어하여 클릭 회전의 기능을 실현하도록합니다. 그러나 타이머의 사용은 타이머를 언급하지 않습니다. 아이디어는 JS를 사용하여 숫자 작동, 마우스 클릭 및 CSS 속성 제어를 구현하여 회전의 효과를 달성하는 것입니다.
Math.random ()은 랜덤 숫자의 생성이며 Math.floor ()는 아래쪽으로 둥글게됩니다.
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.