CSS3 전환 효과로 멋진 페이드 효과 만들기
웹 디자이너는 CSS3가 등장 할 때 그들이 만든 페이지를 오랫동안 제어하려고했습니다. CSS3에 도입 된 새로운 스타일 덕분에 웹 전문가는 Photoshop과 유사한 효과를 페이지에 추가 할 수있었습니다. 여기에는 그림자 및 광선 , 둥근 모서리 등의 속성이 포함되었습니다. CSS3는 또한 사이트에서 멋진 인터랙션을 만드는 데 사용할 수있는 애니메이션과 같은 효과를 도입했습니다.
CSS3를 사용하여 웹 사이트의 요소에 추가 할 수있는 아주 멋진 시각적 효과는 불투명도 및 전환 특성을 조합하여 페이드 인 및 페이드 아웃하는 것입니다. 이는 사이트 방문객이 해당 요소 위로 마우스를 이동하는 것과 같은 무언가를 수행 할 때 초점이 맞춰지는 변색 된 영역을 만들어 페이지를보다 인터랙티브하게 만드는 쉽고 잘 지원되는 방법입니다.
이 상호 작용하는 시각적 효과를 웹 페이지의 다양한 요소에 추가하는 것이 얼마나 쉬운 지 살펴 보겠습니다.
마우스를 올리면 불투명도가 변경됩니다.
고객이 해당 요소 위로 마우스를 가져 가면 이미지의 불투명도를 변경하는 방법부터 살펴 보겠습니다. 이 예제 (HTML은 아래에 나와 있습니다)에서 greydout의 class 속성과 함께 이미지를 사용하고 있습니다.
회색으로 표시하기 위해 CSS 스타일 시트에 다음 스타일 규칙을 추가합니다.
.greydout {
-webkit-opacity : 0.25;
-moz-opacity : 0.25;
불투명도 : 0.25;
}
이러한 불투명도 설정은 25 %로 변환됩니다. 즉, 이미지가 일반 투명도의 1/4로 표시됩니다. 투명도가없는 완전히 불투명 한 것은 100 %이고 0 %는 완전히 투명합니다.
그런 다음, 마우스를 마우스로 가리키면 이미지가 선명하게 보이도록 (또는 더 정확하게, 완전히 불투명 해 지도록)하려면 : hover 가상 클래스를 추가합니다.
.greydout : hover {
-webkit-opacity : 1;
-moz-opacity : 1;
불투명도 : 1;
}
이 예제에서는 해당 브라우저의 이전 버전에 대한 이전 버전과의 호환성을 보장하기 위해 공급 업체의 접두사 버전을 사용하고 있습니다. 이것이 좋은 연습이지만 실제로는 브라우저가 불투명도 규칙을 잘 지원하고 있으며 해당 접두사 접두사를 삭제하는 것이 안전합니다. 여전히 이전 버전의 브라우저에 대한 지원을 원할 경우 이러한 접두어를 포함하지 않아도됩니다. 정상적인 접두어가 붙지 않은 스타일로 선언문을 끝내는 가장 좋은 방법을 따르십시오.
이것을 사이트에 배치하면이 불투명도 조정이 매우 갑작스러운 변화라는 것을 알 수 있습니다. 처음에는 회색이었고 그 다음에는 중간 상태가 없었습니다. 이것은 가벼운 스위치와 같습니다 - 켜기 또는 끄기. 이것은 당신이 원하는 것일 수도 있지만, 좀 더 점진적인 변화를 실험하고 싶을 수도 있습니다.
정말 멋진 효과를 추가하고 점차적으로 페이드를 만들려면 .greydout 클래스에 transition 속성을 추가하고 싶습니다.
.greydout {
-webkit-opacity : 0.25;
-moz-opacity : 0.25;
불투명도 : 0.25;
-webkit-transition : 모든 3s 용이함;
-moz-transition : 모든 3s 용이함;
-ms-transition : 모든 3s 용이함;
-o-transition : 모든 3s 용이함;
전환 : 모든 3s 용이함;
}
이 코드를 사용하면 갑작스러운 전환 만이 아니라 변화가 점진적으로 전환됩니다.
다시 한번, 우리는 여러 공급 업체의 접두사 규칙을 사용하고 있습니다. 전환은 불투명도만큼 잘 지원되지 않으므로 이러한 접두사는 의미가 있습니다.
이러한 상호 작용을 계획 할 때 기억해야 할 점 중 하나는 터치 스크린 장치가 "호버 (hover)"상태가 아니기 때문에 이러한 효과가 휴대 전화와 같은 터치 스크린 장치를 사용하는 사람에게는 손실된다는 것입니다. 전환은 종종 발생하지만 너무 빠르게 발생하므로 실제로 볼 수 없습니다. 좋은 보너스 효과로 추가하는 것이 좋지만 내용을 이해해야 할 필요가있는 변경은 피하십시오.
페이드 아웃 가능
변색 된 이미지로 시작할 필요가 없으며, 완전히 불투명 한 이미지에서 페이드 아웃하기 위해 전환 및 불투명도를 사용할 수 있습니다. 동일한 이미지 사용, withfadeout 클래스 만 사용 :
class = "withfadeout">
이전과 마찬가지로 : : 호버 선택기를 사용하여 불투명도를 변경합니다.
.withfadeout {
-webkit-transition : 모든 2-in-out;
-moz-transition : 모두 2-in-out;
-ms-transition : 모두 2-in-out;
-o-transition : 모든 2-in-out;
트랜지션 : 모두 2 인 인 아웃.
}
.withfadeout : hover {
-webkit-opacity : 0.25;
-moz-opacity : 0.25;
불투명도 : 0.25;
}
이 예제에서는 이미지가 완전 불투명에서 다소 투명하게 전환됩니다. 첫 번째 예제의 반대입니다.
이미지 너머로 간다.
이러한 시각적 전환과 페이드를 이미지에 적용 할 수는 있지만 CSS 효과가있는 이미지 만 사용하는 것은 아닙니다. CSS 스타일의 버튼을 쉽게 클릭하여 고정 할 수 있습니다. : active 가상 클래스를 사용하여 불투명도를 설정하고 단추를 정의하는 클래스에 전환을 놓습니다. 어떤 일이 발생하는지 보려면이 버튼을 클릭 한 상태로 유지하십시오.
위에 마우스를 올리거나 클릭 할 때 본질적으로 모든 시각적 요소가 흐려질 수 있습니다. 이 예제에서는 마우스가 위에있을 때 div의 불투명도와 텍스트의 색을 변경합니다. CSS는 다음과 같습니다.
#myDiv {
너비 : 280px;
배경색 : # 557A47;
color : #dfdfdf;
패딩 : 10px;
-webkit-transition : 모든 4s 용이함 0s;
-moz-transition : 모든 4s 용이함 0s;
-ms-transition : 모두 4s 용이함 0s;
-o-transition : 모든 4 초 완화 0;
전환 : 모두 4 초 완화 0;
}
#myDiv : 마우스 오버 {
-webkit-opacity : 0.25;
-moz-opacity : 0.25;
불투명도 : 0.25;
색상 : # 000;
}
네비게이션 메뉴는 배경색 페이딩 효과를 얻을 수 있습니다.
이 간단한 네비게이션 메뉴에서 메뉴 항목 위로 마우스를 가져 가면 배경색이 천천히 들락날락합니다. 다음은 HTML입니다.
- 집
- CSS3 자습서
- CSS3 속성
CSS는 다음과 같습니다.
ul # sampleNav {list-style : none; }
ul # sampleNav li {
디스플레이 : 인라인;
왼쪽으로 뜨다;
패딩 : 5px 15px;
여백 : 0 5px;
-webkit-transition : 모두 2s linear입니다.
-moz-transition : 모두 2s linear입니다.
-ms-transition : 모두 2s linear입니다.
-o-transition : 모두 2s linear;
transition : 모두 2s linear;
}
ul # sampleNav li a {텍스트 장식 : 없음; }
ul # sampleNav li : hover {
배경색 : # DAF197;
}
브라우저 지원
이미 몇 번 만져 보았 듯이이 스타일은 브라우저 지원 기능이 뛰어나므로 아무런 공감없이 자유롭게 사용할 수 있습니다. 이것에 대한 유일한 예외는 이전 버전의 Internet Explorer이지만, Microsoft가 최근에 IE 11의 모든 버전에 대한 지원을 끝내기로 한 최근의 결정에 따라 이러한 오래된 브라우저는 점차 문제가되고 있습니다. 주요한 문제는 아니어야한다. 이러한 종류의 효과를 즐거운 상호 작용으로 한정하고 기능을 작동 시키거나 핵심 내용을 밝히기 위해 의존하지 않는 한, 효과를 지원하지 않는 구형 브라우저는 덜 즐거운 경험이되지만 브라우저 사용자는 차이점을 알아 두십시오. 특히 사이트를 정상적으로 사용하고 필요한 정보를 얻을 수 있다면 더욱 그렇습니다.
추가 재미, 두 이미지 스왑
한 이미지를 다른 이미지로 사라지게하는 방법의 예가 있습니다. HTML 사용 :
그리고 다른 하나가 완전히 불투명 한 상태에서 완전히 투명하게 만드는 CSS와 두 가지를 전환하는 CSS :
.swapMe img {-webkit-transition : 모두 1 단계입니다. -moz-transition : 모든 1-in-out; -ms-transition : 모든 1-in-out; -o-transition : 모든 1-in-out; 트랜지션 : 모든 1-in-out; } .swap1, .swapMe : 마우스를 가져 가면 .swap2 {-webkit-opacity : 1; -moz-opacity : 1; 불투명도 : 1; } .swapMe : 가져 오기 .swap1, .swap2 {-webkit-opacity : 0; -moz-opacity : 0; 불투명도 : 0; }