마크업의 구조를 이해하기 위해 잠시 보트에 집중해 보겠습니다.

>

>
>
>

이제 데모 페이지의 첫 번째 배너를 살펴보겠습니다. 배에서 발생하는 세 가지 별도의 애니메이션이 있습니다.

• 애니메이션 - 배가 왼쪽에서 미끄러질 때. 이것은 순서가 지정되지 않은 목록(보트 항목 그룹)에 직접 적용됩니다.
• 애니메이션 - 보트에 흔들리는 효과를 주어 물 위에 떠 있는 보트를 시뮬레이션합니다. 이것은 목록의 요소(보트에)에 직접 적용됩니다.
• 애니메이션 - 물음표를 숨깁니다. 이것은 div(물음표)에 적용됩니다.

멀미가 나지 않는다면 데모 페이지를 다시 한 번 살펴보세요. 보트를 상승시키는 목록 항목(보트)에 적용되는 애니메이션이 그 안의 DIV에도 영향을 미치는 것을 볼 수 있습니다(물음표와 함께). 또한 순서가 지정되지 않은 목록(그룹)에 적용되는 "슬라이드 인" 애니메이션은 목록 요소와 그 안의 DIV(보트 및 물음표)에도 영향을 줍니다. 이것은 우리에게 중요한 관찰을 제공합니다:

자식 요소는 자체 애니메이션 외에도 부모로부터 애니메이션을 상속합니다.이 지식은 우리의 무기고에 추가되었지만 애니메이션을 만들 때 자녀/부모의 수는 당신의 마음을 놀라게 할 것입니다(그리고 할머니의 랩톱에 있는 프로세서)!

CSS

정말 흥미로운 내용을 살펴보고 애니메이션을 만들기 전에 18세기에 갇힌 브라우저의 스타일을 지정해야 합니다.

이전 브라우저의 대체 스타일


우리는 CSS 애니메이션이 존재하지 않는 것처럼 대체 스타일을 생성할 것입니다(CSS 애니메이션이 존재하지 않는다는 생각은 성인을 울게 할 뿐만 아니라 내 옆에 매달리게 만들 것입니다 :)). 즉, 애니메이션이 재생되지 않더라도 배너는 여전히 보기 좋게 표시되어야 합니다. 이렇게 하면 누군가가 이전 브라우저를 사용하여 배너를 볼 때 공백 대신 일반 정적 배너가 표시됩니다.

예: 누군가가 이와 같은 CSS를 사용하면 문제가 발생합니다.

/* 잘못된 방법! */


0% (불투명도: 0 ; )
100%(불투명도: 1 ; )
}

사업부(
불투명도: 0 /* 이 블록은 기본적으로 숨겨져 있습니다!*/

}

사용자의 브라우저가 애니메이션을 지원하지 않는 경우 배너는 사용자에게 보이지 않는 상태로 유지됩니다. 그러면 고객은 손에 전기톱을 들고 판매자 사무실의 문을 부수고 왜 자신의 제품을 판매하지 않았는지 설명할 것을 요구할 것입니다! 그리고 그들이 브라우저가 그렇게 비참할 수 있다는 것을 이해하지 못한다면 그들의 삶은 끔찍하게 끝날 것이고 그들의 마지막 말은 Internet Explorer에서 저주가 될 것입니다 ... :)

하지만 걱정하지 마세요. 확장된 브라우저 지원을 제공할 것입니다.

/* 옳은 길 */

@keyframe 우리의 페이드 인 애니메이션(
0% (불투명도: 0 ; )
100%(불투명도: 1 ; )
}

사업부(
불투명도: 1 /* 이 div는 기본적으로 표시됩니다. */
애니메이션: 우리의 페이드인 애니메이션 1s 1 ;
}

보시다시피 애니메이션 재생에 실패하더라도 DIV는 계속 표시됩니다. 애니메이션을 재생할 수 있으면 DIV가 즉시 숨겨지고 애니메이션이 끝까지 재생됩니다.

이제 애니메이션 배너가 이전 브라우저를 지원하도록 하는 방법을 알았으므로 몇 가지 기본 CSS로 이동해 보겠습니다.

명심해야 할 세 가지 핵심 사항이 있습니다.

• 이러한 광고는 다양한 웹사이트에서 사용될 수 있으므로, 우리는 모든 CSS 스타일을 매우 구체적으로 만들 것입니다.. id: #ad-1로 각 선택기를 선언하기 시작합니다. 이렇게 하면 기존 스타일 및 요소가 배너 스타일을 방해하지 않도록 할 수 있습니다.
• 우리는 의도적으로 애니메이션 지연 기능 무시애니메이션을 만들 때. 애니메이션 지연 기능과 요소에 대한 디자인을 올바른 방식으로 사용한다면(기본적으로 표시됨) 애니메이션이 최종적으로 재생되기 전에 모든 것이 화면에 표시됩니다. 그렇기 때문에 애니메이션이 즉시 시작되어 필요할 때까지 화면에서 요소를 숨길 수 있습니다. 지속 시간을 늘리고 키프레임을 수동으로 조정하여 애니메이션 지연을 시뮬레이션합니다. 애니메이션 제작을 시작할 때 이에 대한 예를 볼 수 있습니다.
• 가능하다면, 여러 요소에 하나의 애니메이션 사용. 이러한 방식으로 많은 시간을 절약하고 코드 팽창을 줄일 수 있습니다. 지속 시간과 전환을 조정하여 동일한 애니메이션에서 여러 가지 다른 효과를 만들 수 있습니다.

그래서 우리는 광고 배너를 만들기 시작합니다. 내부 요소가 올바르게 배치될 수 있도록 상대 위치(position: relative)가 있는지 확인합시다. 또한 overflow: hidden 속성이 다른 모든 것을 숨기도록 설정되어 있는지 확인해야 합니다.

#ad-1(
너비 : 720px
높이: 300px
왼쪽으로 뜨다 ;
여백: 40px 자동 0 ;
배경 이미지 : url (../images/ad-1/background.png ) ;
배경 위치 : 중앙 ;
background-repeat : 반복하지 않음 ;
오버플로: 숨김
위치 : 상대 ;
상자 그림자: 0px 0px 6px #000 ;
}

#ad-1 #콘텐츠(
너비 : 325px
플로트 : 오른쪽 ;
여백 : 40px ;
텍스트 정렬 : 가운데 ;
z-인덱스: 4 ;
위치 : 상대 ;
오버플로: 보이는
}
#ad-1 h2(
font-family : "Alfa Slab One" , 필기체 ;
색상 : #137dd5 ;
글꼴 크기 : 50px ;
라인 높이 : 50px ;

애니메이션: 지연 페이드 애니메이션 7s 1 이즈 인 아웃; /* H2는 시뮬레이션된 애니메이션 지연으로 페이드 아웃됩니다. */
}
#ad-1 h3(

색상 : #202224 ;
글꼴 크기 : 31px ;
라인 높이 : 31px ;
텍스트 그림자 : 0px 0px 4px #fff ;
애니메이션: 지연 페이드 애니메이션 10초 1 이즈 인 아웃; /* H3는 시뮬레이션된 애니메이션 지연으로 페이드 아웃됩니다. */
}
#ad-1 양식(
여백 : 30px 0 0 6px ;
위치 : 상대 ;
애니메이션: form-animation 12s 1 easy-in-out; /* 이 코드는 이메일 양식을 이동합니다 */
}
#ad-1 #이메일(
너비 : 158px ;
높이 : 48px ;
왼쪽으로 뜨다 ;
패딩: 020px
글꼴 크기 : 16px ;
font-family : "Lucida Grande", sans-serif ;
색상 : #fff ;
텍스트 그림자 : 1px 1px 0px #a2917d ;
테두리-상단-왼쪽 반경: 5px ;
테두리 하단 왼쪽 반경: 5px ;
테두리 : 1px 솔리드 #a2917d ;
개요 : 없음 ;
상자 그림자: -1px -1px 1px #fff ;
배경색 : #c7b29b ;
background-image : linear-gradient(bottom , rgb (216 , 201 , 185 ) 0% , rgb (199 , 178 , 155 ) 100% ) ;
}
#ad-1 #이메일 :포커스(
background-image : linear-gradient(bottom , rgb (199 , 178 , 155 ) 0% , rgb (199 , 178 , 155 ) 100% ) ;

}
#ad-1 #제출(
높이: 50px
왼쪽으로 뜨다 ;
커서 : 포인터 ;
패딩: 020px
글꼴 크기 : 20px ;
font-family : "Boogaloo" , 필기체 ;
색상 : #137dd5 ;
텍스트 그림자 : 1px 1px 0px #fff ;
테두리-위-오른쪽-반경: 5px ;
테두리-하단-오른쪽 반경: 5px ;
테두리 : 1px 솔리드 #bcc0c4 ;
테두리 왼쪽 : 없음
배경색 : #fff ;
background-image : linear-gradient(bottom , rgb (245 , 247 , 249 ) 0% , rgb (255 , 255 , 255 ) 100% ) ;
}
#ad-1 #제출 : 호버(
background-image : linear-gradient(bottom , rgb (255 , 255 , 255 ) 0% , rgb (255 , 255 , 255 ) 100% ) ;
}

이제 물의 스타일을 지정하고 적절한 애니메이션을 호출합니다.

#ad-1 ul#물(
/* 물에 대한 다른 애니메이션을 추가하려면(예: 수평으로 이동) 여기에서 추가할 수 있습니다. */
}
#ad-1 li#water-back(
너비 : 1200px
높이 : 84px ;
배경 이미지 : url (../images/ad-1/water-back.png ) ;

z-인덱스: 1 ;
위치 : 절대 ;
하단: 10px
왼쪽 : -20px
애니메이션: water-back-animation 3s 무한 이즈 인 아웃; /* 물 튀는 효과 */
}
#ad-1 li#워터프론트(
너비 : 1200px
높이 : 158px ;
배경 이미지 : url( ../images/ad-1/waterfront.png) ;
배경 반복 : 반복 x ;
z-인덱스: 3 ;
위치 : 절대 ;
하단 : -70px ;
왼쪽 : -30px
애니메이션: water-front-animation 2s 무한 이즈 인 아웃; /* 또 다른 물 튀는 효과 - 약간 다릅니다. 약간의 관점을 제공하기 위해 이 애니메이션을 조금 더 빠르게 만들 것입니다. */
}

이제 보트와 모든 요소에 대한 스타일을 만들어 보겠습니다. 다시 적절한 애니메이션을 호출합니다.

#ad-1 ul#보트(
너비 : 249px ;
높이: 215px
z-인덱스: 2 ;
위치 : 절대 ;
하단: 25px
왼쪽: 20px
오버플로: 보이는
애니메이션: 보트 인 애니메이션 3s 1 이즈아웃; /* 그룹을 처음으로 이동 */
}
#ad-1 ul#보트 리(
너비 : 249px ;
높이: 215px
배경 이미지 : url (../images/ad-1/boat.png ) ;
위치 : 절대 ;
하단: 0px
왼쪽: 0px
오버플로: 보이는
애니메이션: 보트 애니메이션 2s 무한 이지 인 아웃; /* 물 위에서 흔들리는 보트의 모방 - 유사한 애니메이션이 이미 물 자체에 사용되었습니다. */
}
#ad-1 #물음표(
너비: 24px
높이: 50px
배경 이미지 : url( ../images/ad-1/question-mark.png) ;
위치 : 절대 ;
오른쪽 : 34px ;
상단 : -30px ;
애니메이션: 지연 페이드 애니메이션 4s 1 이즈 인 아웃; /* 물음표 숨기기 */
}

마지막으로 클라우드 그룹과 하나의 클라우드에 대한 스타일을 생성합니다. 또한 지속적인 스크롤 효과를 줄 멋진 애니메이션을 트리거할 것입니다. 다음은 어떤 일이 일어날지 보여줍니다.



스타일은 다음과 같습니다.

#ad-1 #구름(
위치 : 절대 ;
상단 : 0px ;
Z-인덱스 : 0
애니메이션: 클라우드 애니메이션 30년대 무한 선형; /* 구름을 왼쪽으로 무한히 이동 */
}
#ad-1 #cloud-group-1(
너비 : 720px
위치 : 절대 ;
왼쪽: 0px
}
#ad-1 #cloud-group-2(
너비 : 720px
위치 : 절대 ;
왼쪽 : 720px ;
}
#ad-1 .cloud-1(
너비 : 172px
높이 : 121px ;
배경 이미지 : url (../images/ad-1 /cloud-1 .png) ;
위치 : 절대 ;
상단 : 10px ;
왼쪽: 40px ;
}
#ad-1 .cloud-2(
너비 : 121px ;
높이: 75px
배경 이미지 : url (../images/ad-1 /cloud-2 .png) ;
위치 : 절대 ;
상단 : -25px ;
왼쪽: 300px
}
#ad-1 .cloud-3(
너비 : 132px ;
높이: 105px
배경 이미지 : url (../images/ad-1 /cloud-3 .png) ;
위치 : 절대 ;
상단 : -5px ;
왼쪽 : 530px ;
}

으윽! 여기에는 많은 CSS 코드가 있었습니다. 그러나 가장 흥미로운 것은 그 이상입니다!

생기


기억하십시오: 이 시점까지는 실제 애니메이션이 없었습니다. 지금 배너를 본다면 오래된 브라우저에서도 표시되는 정적 광고를 보게 될 것입니다. 에서지금CSS 코드에서 이미 호출한 애니메이션을 실제로 만들 것입니다.

이제 배너가 제대로 표시되었으므로 이 정적 광고를 멋지게 꾸며봅시다! 코드로 바로 가보겠습니다. 어떤 일이 일어날지 댓글로 알려드리겠습니다.

결론

이 튜토리얼의 과정에서 우리는 이전 브라우저를 지원하는 애니메이션을 만들기 위한 핵심 사항을 배웠습니다.

1. 자식 요소는 자체 애니메이션과 함께 부모의 애니메이션을 상속합니다. 이것을 사용하여 더 복잡한 애니메이션을 만들 수 있습니다.
2. 광고 스타일의 경우 광고가 다른 사이트 스타일에 의해 무시되지 않도록 매우 구체적인 선택기를 사용해야 합니다.
3. 애니메이션이 재생되지 않아도 광고가 보기 좋게 보이도록 요소의 스타일을 지정해야 합니다.
4. 가능하면 여러 요소에 동일한 애니메이션을 사용하여 시간을 절약하고 코드 팽창을 방지합니다.
5. 우리는 혐오와 분노에 주먹을 휘두르며 인터넷 익스플로러를 '18세기 브라우저'라고 부르곤 한다. :)

CSS 실험에 행운을 빕니다.

CSS3를 이용하여 광고 배너를 만들어 봅시다. 현재 Firefox 및 WebKit 브라우저만 CSS3 애니메이션을 완벽하게 지원합니다. 그러나 배너가 다른 브라우저에서 작동하도록 하는 것만으로도 충분합니다. 그러나 최신 CSS 기술을 실험하는 모든 곳(특히 IE 7 이상)에서 뛰어난 성능을 기대하지 마십시오.

메모:페이지의 공간을 절약하기 위해 모든 브라우저 공급업체 접두사가 생략되었습니다. 소스 코드를 참조하십시오.

HTML 마크업

먼저 HTML에서 배너의 구조를 살펴보겠습니다. 이 시점에서 애니메이션이 어떻게 작동할지 상상해야 합니다.

잃어버린?

진정하세요 - 도와드리겠습니다.



마크업 구조에 대한 더 깊은 이해를 위해 보트에 집중해 보겠습니다.

보트와 함께 세 가지 애니메이션이 발생합니다.

왼쪽에 보트의 슬립. 정렬되지 않은 목록(그룹)에 적용됩니다.

물 위에서 흔들리는 보트의 시뮬레이션. 목록 항목(보트)에 적용됩니다.

물음표의 등장. div 요소(물음표)에 적용됩니다.

데모 페이지를 보면 목록 항목(보트)의 애니메이션이 그 안의 div 요소(물음표)에도 영향을 주는 것을 알 수 있습니다. 또한 순서가 지정되지 않은 목록의 "슬립" 애니메이션은 목록 항목(보트 및 물음표)에 영향을 줍니다.

따라서 다음과 같이 결론을 내릴 수 있습니다. 자식 요소자신의 동작과 함께 부모 애니메이션을 수신합니다. 이제 부모/자식 구조를 열거하는 것만 남아 있습니다.

CSS

애니메이션 생성 분석을 시작하기 전에 다음을 제공해야 합니다. 이전 버전과 호환이전 브라우저와 함께.

하위 호환성

마크업을 CSS 애니메이션전혀 존재하지 않습니다. 누군가가 이전 브라우저에서 페이지를 보는 경우 빈 공백이 아닌 정상적인 정적 이미지가 표시됩니다.

예: CSS를 사용해야 합니까? 아래와 같이 문제가 발생합니다.

/* 적절하지 않다! */ @keyframe our-fade-in-animation ( 0% (opacity:0;) 100% (opacity:1;) ) div ( opacity: 0; /* 이 div는 기본적으로 숨겨져 있습니다. - 죄송합니다!*/ animation: 우리의 -fade-in-animation 1s 1; )

브라우저가 애니메이션을 지원하지 않는 경우 div 요소는 사용자에게 보이지 않는 상태로 유지됩니다.

이것이 우리가 이전 브라우저와의 역호환성을 보장하는 방법입니다.

/* TRUE */ @keyframe our-fade-in-animation ( 0% (opacity:0;) 100% (opacity:1;) ) div ( opacity: 1; /* 이 div는 기본적으로 표시됩니다. */ animation: 우리의 -fade-in-animation 1s 1; )

이제 애니메이션 실행에 실패하더라도 div 요소가 렌더링됩니다. 그리고 안에 최신 브라우저 div는 애니메이션 중에 먼저 숨겨집니다.

기초

이제 우리는 이전 버전과의 호환성을 보장하는 방법을 알고 있습니다(실제 프로젝트로 작업할 때 문제를 피하는 데 도움이 됨). 이제 CSS 코드의 기반을 만들 차례입니다.

3가지 사항을 기억해야 합니다.

배너는 다른 사이트에서 사용되기 때문에 우리는 모든 CSS 선택기를 특별하게 만들 것입니다.모두 #ad-1로 시작합니다. 따라서 우리는 코드와 사이트 코드가 겹치지 않도록 노력할 것입니다.

우리는 의도적으로 애니메이션 지연을 무시합니다.설정에서. 기본 요소 가시성으로 스타일을 설정할 때 애니메이션 지연을 사용하면 애니메이션이 완료된 후 그림의 일부가 갑자기 사라지거나 나타나므로 배너 구조가 깨집니다. 애니메이션 지연은 지속 시간 및 프레임 설정으로 시뮬레이션됩니다.

가능할 때 여러 요소에 하나의 애니메이션을 사용합니다.따라서 시간을 절약하고 코드 크기를 줄입니다.

그래서 우리는 배너의 기초를 만듭니다. 내부 요소를 올바르게 배치할 수 있도록 상대 위치로 설정해 보겠습니다. 또한 요소 범위를 벗어나는 모든 것을 숨깁니다.

#ad-1 (너비: 720px; 높이: 300px; float: 왼쪽; 여백: 40px auto 0; background-image: url(../images/ad-1/background.png); background-position: center; background -반복: 반복 없음, 오버플로: 숨김, 위치: 상대, 상자 그림자: 0px 0px 6px #000; )

그런 다음 텍스트 및 입력 필드의 스타일을 설정합니다. 적절한 애니메이션을 호출합니다. 또한 콘텐츠가 겹치지 않도록 움직이는 부분에 대해 가장 높은 z-색인이 있는지 확인해야 합니다.

#ad-1 #content ( 너비: 325px; float: right; margin: 40px; text-align: center; z-index: 4; position: relative; overflow: visible; ) #ad-1 h2 ( font-family: "Alfa Slab One", 필기체, 색상: #137dd5, 글꼴 크기: 50px, 선 높이: 50px, 텍스트 그림자: 0px 0px 4px #fff, 애니메이션: 지연 페이드 애니메이션 7s 1 easy-in-out; /* 가짜 지연으로 h2 표시 */ ) #ad-1 h3 ( font-family: "Boogaloo", cursive; color: #202224; font-size: 31px; line-height: 31px; text-shadow: 0px 0px 4px #fff; 애니메이션: 지연된 페이드 애니메이션 10초 1 이즈 인 아웃; /* 시뮬레이션된 지연과 함께 h3 표시 */ ) #ad-1 양식 ( 여백: 30px 0 0 6px; 위치: 상대; 애니메이션: 양식 애니메이션 12s 1 easy-in-out; /* 시뮬레이션된 지연이 있는 이메일 주소를 입력하기 위해 양식을 밀어서 */ ) #ad-1 #email ( 너비: 158px; 높이: 48px; float: 왼쪽; 패딩: 0 20px; font-size: 16px; font-family: "Lucida Grande", sans-serif; color: #fff; text-shadow: 1px 1px 0px #a2917d; border-top-left-radius: 5px; borde r-바닥-왼쪽-반경: 5px; 테두리:1px 솔리드 #a2917d; 개요: 없음; 상자 그림자: -1px -1px 1px #fff; 배경색: #c7b29b; 배경 이미지: 선형 그래디언트(하단, rgb(216,201,185) 0%, rgb(199,178,155) 100%); ) #ad-1 #email:focus ( background-image: linear-gradient(bottom, rgb(199,178,155) 0%, rgb(199,178,155) 100%); ) #ad-1 #submit ( 높이: 50px; float: 왼쪽 ; 커서: 포인터; 패딩: 0 20px; 글꼴 크기: 20px; 글꼴 패밀리: "Boogaloo", 필기체; 색상: #137dd5; 텍스트 그림자: 1px 1px 0px #fff; 테두리 상단 오른쪽 반경: 5px ; border-bottom-right-radius: 5px; border:1px solid #bcc0c4; border-left: 없음; background-color: #fff; background-image: linear-gradient(bottom, rgb(245,247,249) 0%, rgb( 255,255,255) 100%); ) #ad-1 #submit:hover ( background-image: linear-gradient(하단, rgb(255,255,255) 0%, rgb(255,255,255) 100%); )

이제 물의 스타일을 지정하고 적절한 애니메이션을 호출해 보겠습니다.

#ad-1 ul#water( /* 다른 물 애니메이션이 필요하면 여기에 추가할 수 있습니다. */ ) #ad-1 li#water-back ( 너비: 1200px; 높이: 84px; background-image: url(. . /images/ad-1/water-back.png); background-repeat: repeat-x; z-index: 1; 위치: 절대; 하단: 10px; 왼쪽: -20px; 애니메이션: water-back-animation 3s /* 튀는 파도의 모방 */ ) #ad-1 li#water-front ( 너비: 1200px; 높이: 158px; background-image: url(../images/ad-1/water) -전면 .png), 배경 반복: 반복 x, Z 인덱스: 3, 위치: 절대, 하단: -70px, 왼쪽:-30px, 애니메이션: water-front-animation 2s 무한 이즈 인 아웃, / * 다른 튀는 파도 애니메이션은 원근감 효과를 만들기 위해 조금 더 빠르게 실행됩니다. */ )

보트 및 해당 요소의 스타일을 설정합니다. 적절한 애니메이션도 호출합니다.

#ad-1 ul#boat ( 폭: 249px; 높이: 215px; Z-색인: 2; 위치: 절대; 하단: 25px; 왼쪽: 20px; 오버플로: 가시적; 애니메이션: 보트인애니메이션 3s 1 이즈아웃 ; /* 광고가 시작될 때 그룹을 밀어 넣습니다. */ ) #ad-1 ul#boat li ( 너비: 249px; 높이: 215px; background-image: url(../images/ad-1/boat.png); position: absolute; bottom: 0px; left: 0px; overflow: visible; animation: boat-animation 2s Infinity easy-in-out; /* 물 위에서 보트가 흔들리는 것을 시뮬레이션 - 물 자체에 이미 사용된 애니메이션과 유사합니다. */ ) #ad-1 #question-mark ( 너비: 24px; 높이: 50px; background-image: url(../images/ad-1/question-mark.png); 위치: 절대; 오른쪽: 34px; 상단: -30px, 애니메이션: 지연 페이드 애니메이션 4s 1 이즈 인 아웃, /* 물음표 페이드 인 */ )

이제 구름의 스타일을 만들어 보겠습니다. 그들을 위해 우리는 끝없는 움직임의 효과와 함께 애니메이션을 사용할 것입니다. 그림은 아이디어의 본질을 보여줍니다.



다음은 CSS 코드입니다.

#ad-1 #clouds ( 위치: 절대; 상단: 0px; z-색인: 0; 애니메이션: cloud-animation 30s 무한 선형; /* 구름을 왼쪽으로 스크롤하고 재설정하고 반복합니다. */ ) #ad-1 #cloud-group -1 ( 너비:720px; 위치: 절대; 왼쪽:0px; ) #ad-1 #cloud-group-2 ( 너비: 720px; 위치: 절대; 왼쪽: 720px; ) #ad-1 .cloud-1 ( 너비 : 172px; 높이: 121px; 배경 이미지: url(../images/ad-1/cloud-1.png); 위치: 절대; 상단: 10px; 왼쪽: 40px; ) #ad-1 .cloud-2 ( 너비: 121px; 높이: 75px; 배경 이미지: url(../images/ad-1/cloud-2.png); 위치: 절대; 상단: -25px; 왼쪽: 300px; ) #ad-1 . 클라우드-3 (폭: 132px; 높이: 105px; 배경 이미지: url(../images/ad-1/cloud-3.png); 위치: 절대; 상단: -5px; 왼쪽: 530px; )

애니메이션

알림:이 시점부터 실제로 애니메이션되는 것은 없습니다. 지금 배너를 보시면 정지된 이미지를 보실 수 있습니다. 위의 코드에서 호출된 애니메이션이 생성되는 곳입니다.

이제 아름다운 정적 이미지에 생기를 불어넣어 보겠습니다.

/* 시뮬레이션된 지연이 있는 애니메이션은 여러 요소를 표시하는 데 사용됩니다. 지연 시뮬레이션은 애니메이션의 80%가 계속되는(즉시가 아니라) 프로세스를 시작하여 수행됩니다. 지연을 시뮬레이션할 수 있는 방법은 다음과 같습니다. */ @keyframes delay-fade-animation ( 0% (불투명도: 0;) 80% (불투명도: 0;) 100% (불투명도: 1;) ) /* 표시를 위한 애니메이션 와 형태 이메일 주소및 버튼. 또한 시뮬레이션된 지연을 사용합니다. */ @keyframes form-animation ( 0% (불투명도: 0; 오른쪽: -400px;) 90% (불투명도: 0; 오른쪽: -400px;) 95% (불투명도: 0.5; 오른쪽: 20px; ) 100% (불투명도: 1; 오른쪽: 0px;) ) /* 이 애니메이션은 비디오 시작 부분에서 보트를 화면 밖으로 가져오는 데 사용됩니다. */ @keyframes boat-in-animation ( 0% (왼쪽: -200px;) 100% (left : 20px;) ) /* 구름에 대한 애니메이션. 첫 번째 구름 그룹은 중앙에서 움직이기 시작하고 두 번째 그룹은 화면 오른쪽으로 이동합니다. 첫 번째 그룹이 화면에서 천천히 제거되고 두 번째 그룹이 오른쪽에 나타납니다. 왼쪽 그룹이 완전히 숨겨지면 구름은 빠르게 원래 위치로 돌아갑니다. */ @keyframes cloud-animation ( 0% (left: 0px;) 99.9999% (left: -720px;) 100% (left: 0px; ) ) / * 마지막 세 애니메이션은 거의 동일합니다. 차이점은 요소의 위치에 있습니다. 그들은 파도가 튀는 것을 모방합니다. */ @keyframes boat-animation ( 0% (하단: 0px; 왼쪽: 0px;) 25% (하단: -2px; 왼쪽: -2px;) 70% (하단: 2px; 왼쪽) : - 4px;) 100% (하단: -1px; 왼쪽: 0px;) ) @keyframes water-back-animation ( 0% (하단: 10px; 왼쪽: -20px;) 25% (하단: 8px; 왼쪽: - 22픽셀; ) 70% (하단: 12픽셀; 왼쪽: -24픽셀;) 100% (하단: 9픽셀; 왼쪽: -20픽셀;) ) @keyframes water-front-animation ( 0% (하단: -70픽셀; 왼쪽: -30픽셀) ;) 25%(하단: -68픽셀, 왼쪽: -32픽셀;) 70%(하단: -72픽셀, 왼쪽: -34픽셀;) 100%(하단: -69픽셀, 왼쪽: -30픽셀;) )

결론

이 단원에서는 몇 가지 주요 개념을 배웠습니다.

1. 하위 요소는 애니메이션과 함께 상위 요소의 애니메이션을 받습니다.
2. 배너를 만들 때 기존 CSS 프로젝트와 코드가 겹치지 않도록 고유한 ID를 사용하도록 노력해야 합니다.
3. 이전 버전과의 호환성을 보장하기 위해 애니메이션을 사용할 수 없는 것처럼 요소를 배치하고 스타일을 지정해야 합니다.
4. 가능하면 여러 요소에 대해 하나의 애니메이션을 사용해야 합니다.

의심할 여지 없이 가장 밝은 것 중 하나 2012년 트렌드에 대한 개발입니다 CCS3, HTML5. 오늘 우리는 크고 매우 유용한 개요예" 20+: 창의적이고 유용한 CSS3 자습서″에 제공 얼룩덜룩 한 소년. 모든 예제는 JavaScript 없이 청소, 제시된 수업에는 다운로드할 수 있는 데모 및 기성 CSS3 파일이 있습니다.

우리는 이러한 트릭과 기술이 웹 개발자에게 유용할 것이라고 확신합니다!

CSS3 수업 :

1. CSS3 사진 갤러리, 슬라이더, 이미지 효과

1.1.CSS3 슬라이더

믿기 ​​어렵지만 다양한 효과를 가진 이 슬라이더는 CSS3 전용으로 제작되어 매우 인상적입니다.

1.2. CSS3 슬라이더 효과가 있는 전체 화면 웹 사이트 배경

웹 디자이너는 오랫동안 웹 사이트에 대해 다양한 배경을 실험해 왔지만 지금까지는 순수 CSS거의 할 수 없었고 JS를 사용해야 했습니다. 이제 CSS3를 사용하면 사이트의 배경을 원하는 대로 처리할 수 있습니다. 하나의 배경에 큰 고화질 사진이 있을 수 있고, 여러 배경을 다양한 효과로 변경할 수 있으며, 화면 매개변수에 따라 배경 확장성을 사용할 수 있습니다. 일반적으로 창의적인 사이트에 대한 놀라운 기회입니다.

1.3. CSS3의 라이트박스

이 튜토리얼을 통해 순수 CSS에 다양한 효과가 있는 라이트박스(Lightbox)를 만드는 방법을 배울 수 있습니다.

1.4. CSS3 이미지 속성

이 튜토리얼은 둥근 모서리, 그림자 및 기타 효과와 같은 이미지 속성에 대한 새로운 CSS3 기능을 보여줍니다.

1.5. 애니메이션 CSS3 배너

1.6.CSS3 로딩 바

1.7. CSS3가 포함된 3D 리본



데모 보기 또는 CSS3 코드 파일 다운로드 →

2. CSS3 메뉴, 탐색 및 버튼

2.1. CSS3의 Apple.com 메뉴

CSS3에서 유명한 Apple.com 메뉴를 만들기 위한 튜토리얼.

2.2. 애니메이션 CSS3 가로 메뉴

다양한 효과로 애니메이션 CSS3 메뉴를 만드는 방법을 보여주는 간단한 자습서입니다.

2.3. CSS3의 애니메이션 세로 메뉴

2.4. 애니메이션 CSS3 버튼

애니메이션 크리에이티브 버튼의 7가지 예가 있는 훌륭한 튜토리얼.

2.5. CSS3 이미지가 포함된 크리에이티브 애니메이션 메뉴

이 수업에서는 제시된 10가지 예에서 눈이 번쩍 뜨입니다. 이러한 복잡한 크리에이티브 메뉴는 JS의 도움으로 독점적으로 만들어졌습니다. 감동적인!

2.6. CSS3를 사용한 원형 탐색 효과

이미지가 있는 원 형태로 선택한 탐색 항목 위로 마우스를 가져가면 비정상적인 효과가 나타납니다. 우리는 참고!

2.7. CSS3의 드롭다운 메뉴

CSS3에서 하위 수준이 있는 간단한 드롭다운 메뉴를 구현하기 위한 자습서입니다.

2.8. 애니메이션 전환이 있는 CSS3 탐색

3. CSS3에 대한 다양한 효과

3.1. jQuery가 없는 애니메이션 CSS3 툴팁