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

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

WBOY원래의: 2016-05-16 15:43:361847검색

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

작업 렌더링:

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 코드입니다.

성명：

이전 기사：JS는 웹 페이지 상단에서 아래로 슬라이드되는 전국 도시 전환 내비게이션 효과를 구현합니다_javascript 기술다음 기사：JS는 웹 페이지 상단에서 아래로 슬라이드되는 전국 도시 전환 내비게이션 효과를 구현합니다_javascript 기술

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

관련 기사