jQuery 구현 입체 문자 그 라 데 이 션 효과

먼저 두 개의 그림 을 캡 처 해 보 세 요.


잘 나 왔 죠?이 글씨체 들 이 그림 이 라 고 착각 하 는 것 은 아 닙 니까?이것 은 사진 이 아니 라 JS 로 이 루어 진 온라인 프레젠테이션 입 니 다http://demo.jb51.net/js/gradient-test/demo.htm다음은 실현 과정 과 원 리 를 간단하게 공유 하 겠 습 니 다.우 리 는 클 라 스 를 통 해 어떤 문자 가 이 효 과 를 증가 시 켜 야 하 는 지 를 표시 합 니 다.여 기 는 rainbows 를 사용 합 니 다.CSS 코드:
 
<span class="rainbows">© 2009 Dragon Interactive. All Rights Reserved.</span>
여기 서 하 이 라이트 와 shadow 라 는 두 클 라 스 의 의 미 를 설명 합 니 다.사실은 말 그대로 이해 할 수 있 습 니 다.이 두 클 라 스 는 글씨체 의 입체 성 을 높이 기 위해 설정 한 것 입 니 다.하 나 는 흰색 의 하 이 라이트 이 고 하 나 는 검은색 그림자 입 니 다.JS 부분:
 
.rainbows{position:relative;display:block;} .rainbow { background: transparent; display: block; position: relative; height: 1px; overflow: hidden; z-index: 5; } .rainbow span { position: absolute; display: block; top: 0; left: 0px; } .rainbows .highlight { color: #fff; display:block; position: absolute; top: -2px; left: 0px; z-index: 4; } .rainbows .shadow { color: #000; display:block; position: absolute; opacity: 0.5; filter:alpha(opacity=50); top: 2px; left: 2px; z-index: 3; }.rainbows{position:relative;display:block;}
.rainbow {
background: transparent;
display: block;
position: relative;
height: 1px;
overflow: hidden;
z-index: 5;
}

.rainbow span {
position: absolute;
display: block;
top: 0;
left: 0px;
}

.rainbows .highlight {
color: #fff;
display:block;
position: absolute;
top: -2px;
left: 0px;
z-index: 4;
}

.rainbows .shadow {
color: #000;
display:block;
position: absolute;
opacity: 0.5;
filter:alpha(opacity=50);
top: 2px;
left: 2px;
z-index: 3;
}
코드 가 많 지 않 은 것 같 지만 원 리 를 알 고 싶다 면 이 코드 를 진지 하 게 이해 해 야 합 니 다.JS/CSS 를 결합 하면 다음 과 같은 대략적인 사고방식 을 알 수 있다.프로그램 은 먼저 글씨체 가 있 는 용기 의 높이 N 을 계산 한 다음 에 용기 의 내용 을 비우 고 N 개의 span 을 추가한다.모든 span 내용 은 원래 용기 의 문자 이 고 각 span 의 색깔 은 그 라 데 이 션 색 에 따라 계산 하 며 그 중의 문자 포 지 셔 닝 은 이전의 span 의 문자 에 비해 픽 셀 을 위로 옮긴다.CSS 에서 볼 수 있 듯 이 모든 span 의 높이 는 1 이다.이렇게 해서 우 리 는 N 의 서로 다른 색깔 의 1px span 을 통 해 글씨 체 를'조합'한 다음 에'하 이 라이트/그림자'를 더 하면 된다jQuery 기반 입체 문자 그 라 데 이 션 효과

좋은 웹페이지 즐겨찾기