45fan.com - 路饭网

搜索: 您的位置主页 > 电脑频道 > 编程代码 > 阅读资讯:js+css如何实现散开和动画效果?

js+css如何实现散开和动画效果?

2015-09-10 19:13:52 来源:www.45fan.com 【

js+css如何实现散开和动画效果?

文字散开重组动画这款特效我们可以在输入框中指定任意文字,点击确定按钮后,就会将原先的文字爆炸散去,新的文字以像素点的形式组合起来,看起来非常棒。

运行效果图:

js+css如何实现散开和动画效果?

这是输入HAPPY后安按钮后效果,当然可以随便输文字

js+css如何实现散开和动画效果?

好酷的特效,连中文都支持,看如下图:

js+css如何实现散开和动画效果?

为大家分享的文字散开重组动画特效代码如下

 

<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实现文字散开重组动画特效代码,希望大家可以喜欢。


本文地址:http://www.45fan.com/bcdm/20659.html
Tags: 实现 文字 JS+CSS
编辑:路饭网
推广内容
推荐阅读
热门推荐
推荐文章
关于我们 | 联系我们 | 友情链接 | 网站地图 | Sitemap | App | 返回顶部