js CSS는 텍스트 확산 및 재구성 애니메이션 특수 효과 코드 공유_javascript 기술을 실현합니다.
- WBOY원래의
- 2016-05-16 15:43:361914검색
텍스트 분산 및 재구성 애니메이션의 특수 효과를 위해 입력 상자에 텍스트를 지정할 수 있습니다. 확인 버튼을 클릭하면 원본 텍스트가 폭발하여 분산되고 새 텍스트가 픽셀 형태로 결합됩니다. , 정말 특별해 보이네요.
작업 렌더링:
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 코드입니다.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.