"점진적인 색상"에 관해서는 어떻게 생각하십니까?
이 명사를 검색하기 시작했을 때 실제로 동적 구배와 정적 구배의 두 가지 또는 두 가지 형태가 있다는 것을 알았습니다.
소위 다이내믹 그라디언트는 간단한 예를 제시합니다. 정적 구배는 훨씬 간단하지만, 무지개가 하늘에서 나오면, 빨간색, 주황색, 노란색, 녹색, 파란색, 파란색, 보라색 ... 현재 표시된 완제품에서는 부분에서 다른 곳으로의 색상이 다르고 진폭은 비교적 작고 점차적으로 변할 수 있지만 한 가지는 중요합니다. 그것은 이미 존재하여 변화 상태를 형성했으며 더 이상 변경 될 수 없습니다.
이러한 방식으로 먼저 JavaScript를 사용하여 소위 동적 구배를 구현합시다. 역동적 인 이유를 고려하면 사진을 올리지 않을 것입니다. 아이디어를 간단히 소개하겠습니다.
* 동적 구배
코드 사본은 다음과 같습니다.
<span style = "font-size : 12px;"> <html>
...
<body>
<centre>
<div id = "페이드"> </div>
</센터>
</body>
</html> </span>
시청의 편의를 위해, 나는 내장 된 스타일을 작성하거나 외부 링크 스타일을 사용하는 것을 추천하고 있습니다. 다음으로, 나는 단순히 그라디언트 효과를 달성하기 위해 동적으로 작성하겠습니다.
코드 사본은 다음과 같습니다.
<span style = "font-size : 12px;"> <script type = "text/javaScript">
var node = document.getElementById ( "페이드");
var color = "#0000";
var 레벨 = 1;
Window.load = function fading () {
node.style.background = color.+level.toString ()+level.toString ();
레벨 ++;
if (레벨> 16) {
클리어 타임 아웃 (페이딩);
}또 다른{
settimeout (페이딩, 300);
}
}
<cript> </span>
더 이상 말할 필요가없는 것 같습니다.
* 정적 구배
먼저 그림을 첨부하고 효과를 살펴보고 일반적으로 신의 의미를 이해해 봅시다.
호환성을 고려하지 않으면 음, 실제 수정 연구 후에 호환됩니다. 호환성을 고려하지 않고 인터페이스가 약간 부족합니다. 좋아, 먼저이 말을 계속하자. WebKit 커널을 사용하고 있으므로 먼저 소개하는 데 사용합니다.
CSS 스타일 추가 :
배경 : -webkit-gradient (선형, 100% 0%, 0% 0%, (#ffffff), 컬러 스톱 (0.5,#0000ff), (#ffffff));
간단한 설명 :
선형 : 이것은 선형 구배 및 방사형 구배의 두 개념에 직면합니다. 이는 선의 선형 변화와 원처럼 방사형 확산에 지나지 않습니다.
다음 네 가지 값은 각각 해당 방향으로 PX 값을 나타내며, 이는 왼쪽에서 시계 방향으로 회전 순서대로 암기 할 수 있지만 잘라낸 색상을 나타냅니다.
From : 이것은 시작의 색입니다
to : 그리고 동시에 나타나고 그라디언트 끝의 색상이 마침내 완성됩니다.
컬러 스톱 : 라인이있는 위치로 변경 될 때 어떤 색이 나타날지를 나타냅니다. 물론, 그것은 전이 지점에서 전이 지점에서, 전이 지점에서, 전이 지점에서, 전이 지점으로, 이는 주변 영역에서 전환으로 전환된다.
좋아, 나는 많은 것을 이해하고 간단한 다른 기본 코드를 얻을 것이다.
코드 사본은 다음과 같습니다.
필터 : progid : dximagetransform.microsoft.gradient (gradientType = 1, startColorstr =#b8c4cb, endcolorstr =#f6f6f8);/*ie6*/
배경 : -moz-linear-gradient (왼쪽,#ffffff,#ff0000);/*다른 사람이 아닌 다른 사람*/
배경 : -webkit-gradient (선형, 100% 0%, 0% 0%, (#ff0000), (#0000ff)까지);/*다른 사람이 아님 IE6*/
나는 오늘 "말하기"에피소드를 보았다. 좋은 쇼가 있다는 것이 밝혀졌습니다. 너무 낮습니까?