js CSS는 텍스트 확산 및 재구성 애니메이션 특수 효과 코드 공유_javascript 기술을 실현합니다.

WBOY
풀어 주다: 2016-05-16 15:43:36
원래의
1856명이 탐색했습니다.

텍스트 분산 및 재구성 애니메이션의 특수 효과를 위해 입력 상자에 텍스트를 지정할 수 있습니다. 확인 버튼을 클릭하면 원본 텍스트가 폭발하여 분산되고 새 텍스트가 픽셀 형태로 결합됩니다. , 정말 특별해 보이네요.

작업 렌더링:

HAPPY를 입력하고 버튼을 설치한 후의 효과입니다. 물론 어떤 텍스트도 입력할 수 있습니다

중국어까지 지원되는 멋진 특수 효과는 아래 사진을 참조하세요.

모두가 공유하는 텍스트 분산 및 재구성 애니메이션 특수 효과의 코드는 다음과 같습니다

<html>

<head>

<meta charset="UTF-8">

<title>文字散开重组动画特效</title>

<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />

</head>

<body>

<canvas id="text" width="500" height="100"></canvas>

<canvas id="stage" width="500" height="100"></canvas>

<form id="form">
  <input type="text" id="inputText" value="脚本之家" />
  <input type="submit" value="TRY IT" />
</form>

<script src='js/EasePack.min.js'></script>
<script src='js/TweenLite.min.js'></script>
<script src='js/easeljs-0.7.1.min.js'></script>
<script src='js/requestAnimationFrame.js'></script>
<script src="js/index.js"></script>

</body>
</html>
로그인 후 복사

위 내용은 여러분께 공유해 드리는 텍스트 분산 및 재구성 애니메이션 특수 효과 코드를 구현하기 위한 js CSS 코드입니다.

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿