2014-02-28 4 views
0

나는 만든 WordPress cild 테마에서 CSS3 애니메이션 치트 시트를 justinaguilar로 사용하려고합니다. 이것은 CSS, 스타일 시트 등으로 그립에 도달하려고 애 쓰고있는 나의 첫 번째 하위 테마입니다.WordPress 자식 테마의 CSS3 애니메이션 사용

그래서 나는 적절하게로드되도록 animations.css를 포함 시켰습니다. 그런 다음 내 스타일로 객체를 생성했습니다 .CSS,

#object { 
background: url('../marias_child/images/logo_3redbags.png') no-repeat; 
width: 500px; 
height: 1500px; 
position: relative; 
visibility: visible; 
} 

나는 다음 편집기에서 워드 프레스 페이지에서 개체를 포함하는 사업부를 사용과 같이, 그것을 애니메이션을하는 데 필요한 클래스를 호출 :

<div id="object" class="tossing"> 

모두 최대 괜찮습니다 지금, 내가 뭘하려고하는지는 내 테마에 미리 정의 된 기존 객체를 대상으로 지정하는 것입니다. 위젯을 제공하고 그것에 애니메이션을 적용하십시오. 이게 내가 style.css에서하는 일인가요? 그렇다면 어떻게 시도할까요? 나는 선택기 .widget.offer-widget.bs를 찾았지만 스타일 시트를 사용하여 애니메이션을 적용하는 방법을 전혀 알지 못합니다.

매우 간단해야하지만 아직 학습 중입니다.

감사합니다.

답변

0

예, 하위 테마의 style.css에 '애니메이션'을 추가하고 스타일로 기존 위젯 클래스를 재정의해야합니다. firebug 확장 프로그램을 사용하여 변경하려는 클래스를 확인하십시오.

자녀 테마에있는 style.css에 대한 예제 코드는 다음과 같습니다 그것은 클래스 또는 ID를 사용하고있을 수 있습니다

.widgetclass{ 
background: url('../marias_child/images/logo_3redbags.png') no-repeat; 
width: 500px; 
height: 1500px; 
position: relative;enter code here 
visibility: visible; 
} 

.

+0

좋습니다. 따라서 style.css의 widgetclass를 대상으로하지만 설명하는 "enter code here"부분은 어떻게됩니까? 내가 그 animation.css의 "속임수"시트에서 애니메이션 클래스를 사용해야한다는 것을 기억하십시오. 이 부분은 여전히 ​​이해가되지 않습니다. "tossing"을 사용하여 어떻게 움직일 수 있습니까? 시간 내 줘서 고마워. – Tpsaras

+0

CSS 애니메이션을 볼 필요가 있습니다. 구글 그것을보고 다음, 애니메이션을 추가하십시오. – Neeraj