1. 선형 지식 CSS 배경 : 선형 그라데이션 선형 구배를 반복하는 것은 중복 "이미지"를 만드는
CSS 구문
배경 : 반복 - 선형 - 기울기 ( 각도 | 측으로 - 또는 - 코너 , 컬러 - STOP1 , 컬러 - STOP2 , ...);
| 값 | 기술 |
|---|---|
| 각도 | 경사 방향의 각도로 정의 하였다. 360deg에 0deg에서, 기본값은 180도이다. |
| 측면 또는 코너 | 선형 기울기 시작 위치를 지정했습니다. 두 키워드 : 첫 번째 지정된 수평 위치 (왼쪽 또는 오른쪽)이, 두 번째는 수직 위치 (상단 또는 하단)를 지정했습니다. 주문은 각 키워드는 선택 사항입니다, 무작위입니다. |
| 색상 STOP1, 색상 STOP2, ... | 지정 계조의 시작 및 종료 색 컬러 값 (또는 지정된 백분율 사용) 정지 위치 조성물. |
원리 DIV 아버지와 아들
상위 DIV div의 하부의 폭보다 작을 선형 그라데이션으로 나타낸 서브 DIV 스타일 랜은 회전문 실행의 효과는 상기 변위 부 JS DIV을 제어함으로써 달성된다.
코드
1 <! DOCTYPE HTML > 2 < HTML > 3 < 선두 > 4 < 메타 캐릭터 = "UTF-8" > 5 < 타이틀 > </ 타이틀 > 6 < 스타일 > 7 * { 8 마진 : 0 ; 9 패딩 : 0 ; 10 } 11 체 { 12 신장 : 100 %; (13) 의 폭 : 100 % ; 14 신장 : 100 % ; 15 } 16 .wrap { 17 (18) 의 폭 : 400 픽셀 ; 19 높이 : 40px ; 20 여백 : 0 자동 ; 21 마진 - 가기 : 40px ; 22 국경 : 1 픽셀의 검은 색 ; 23 오버 플로우: 숨겨진 ; 24 } 25 .wrap> .inner { 26 배경 : 반복 선형 구배 (60deg 백색 0 픽셀, 화이트 10px 블랙 10px 블랙 20 픽셀) ; 27 높이 : 40px ; 28 폭 : 600PX ; 29 } 30 31 </ 스타일 > 32 </ 헤드 > 33 < 본문 > 34 < DIV의 클래스 = "랩" > 35 <DIV 클래스 = "내부" > </ DIV > 36 </ DIV > 37 </ 바디 > 38 < 스크립트 타입 = "텍스트 / 자바 스크립트" > 39 VAR 내측 = document.querySelector ( " .wrap> .inner " ); 40 VAR의 플래그 = 0 ; 41 // 鼠标移入 42 VAR의 타이머; 43 inner.onmouseover = 함수 () { 44 타이머 =window.setInternal을 ( 함수 () { 45 에서 플래그 - ; 46은 IF (에서는 플래그 == - 200이다 ) { 47 에서 플래그 = 0 , 48 } 49 inner.style.marginLeft는 = 에서 플래그 + " PX " ; 50 } . 5 ) 51이다 } 52 // 위해 clearInterval 제어하여 setInterval 아웃 마우스 (53)가 inner.onmouseout = 함수 () { 54은 됨 clearInterval (타이머); 55 } 56 57 </ 스크립트 > 58 </ HTML >