css3 전환을 통한 애니메이션

커서를 가져 가면 애니메이션이 생성됩니다. 애니메이션은 예를 들어 "CSS3"위로 마우스를 가져 가면 전체 모양으로 확장되는 머리 글자 어입니다. 문자 "C"와 "S"사이에 오름차순으로 나타나는 "캐스 캐이 딩 스타일 시트"로 확장해야합니다. 문자가 하나씩 나오면 CSS3를 통해서만 가능합니까? (편집자 노트, 나는 그가 새 글자를 입력 한 것처럼 보이지만 한 번에 모두 표시됩니다.)css3 전환을 통한 애니메이션

출처

2012-03-22 tim

내가 한 번에 하나씩 입력하는 것처럼 보이게하는 새로운 글자를 원한다는 뜻으로 편집했다 (받아 들여지기를 기다린다). – thecoshman

또한 정말로, 플래시를 사용하고 있습니까? 또는 CSS로 실제로 HTML로 의심되는 것입니다. – thecoshman

내가하려는 일을하려는 경우 다음을 수행 할 수 없습니다. CSS를 통해, 다른 어쩌면 많은 어리석은 규칙들.

플래시를 사용하는 경우 무비 클립과 약간의 액션 스크립트를 사용하여 애니메이션을 실행하십시오.

그러나 저는 실제로 HTML/CSS/JS (웹 브라우저 도구)를 사용하고 있다고 생각합니다.이 경우 일부 JavaScript를 사용해야합니다. 나는 Jquery를 살펴볼 것을 제안한다. Jquery는 호버링 효과를 감지하고 그것이 말한 것을 조작하는 것을 아주 쉽게 만들어 줄 좋은 라이브러리이다. 당신은 아마 뭔가를해야합니다

... 당신 스타일 시트에서 다음

<span class="ExpandingAbreviation"> 
    <span class="short">CSS3</span> 
    <span class="Long">cascading style shet</span> 
</span>

만들 긴 숨김 및 jQuery를 통해, 당신은 '짧은'과의 호버 이벤트의 청취자를 설정해야합니다 그것을 숨기고 길게 드러내는 코드를 작성하십시오. 비록 당신이 어떤 영향을 미치는지 정확히 모르겠다.

출처

2012-03-22 08:42:48 thecoshman

같은 것은 Js의 InnerHTML 값 onMouseover()를 변경함으로써 가능하다.

<body> 
<script type=text/javascript> 
function changetext() 
{ 
document.getElementById("change").innerHTML='<p>Cascading Style Sheets<p>' 
} 
</script> 
<div id="change" onmouseover="changetext();">css</div> 
</body>

하지만 저는 css3에서 텍스트를 변경할 수 있다고 생각하지 않습니다. 우리는 좋은 결과를 위해 전환 효과를 추가 할 수 있습니다.

출처

2012-03-22 09:01:05 gout

-1

저는 jsfiddle을 만들었습니다. jsfiddle은 여러분이 좋아하는 것을 만듭니다. 나는 이것이 어떻게 진행되고 있는지를 이해하는 가장 쉬운 방법이라고 생각합니다. 이 기능에 필요한 것은 jQuery뿐입니다. "CSS"를 클릭하기 만하면됩니다.

Js Fiddle

이 (효과를 볼 수있는 단어 CSS 위로 마우스)

http://jsfiddle.net/njZXj/5/

출처

2012-03-22 09:51:03 devsnd

당신은 아마 CSS 3. 여기

하여이 작업을 수행 할 수 있습니다 내가 만든 힌트 이것은 일부 클래스와 범위만으로 만들 수 있습니다. 간단히하기 위해 P-Tag와 Span을 내부적으로 사용했습니다.