当前位置: 首页 > 编程笔记 >

js+css实现文字散开重组动画特效代码分享

古扬
2023-03-14
本文向大家介绍js+css实现文字散开重组动画特效代码分享,包括了js+css实现文字散开重组动画特效代码分享的使用技巧和注意事项,需要的朋友参考一下

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

运行效果图:

这是输入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变形金刚文字特效代码分享,包括了js变形金刚文字特效代码分享的使用技巧和注意事项,需要的朋友参考一下 为大家分享的js变形金刚文字特效代码如下 -----------------------------------------------效果演示----------------------------------------------- 运行效果图: 以上就是为大家分享的jav

  • 本文向大家介绍JS+CSS实现过渡特效,包括了JS+CSS实现过渡特效的使用技巧和注意事项,需要的朋友参考一下 最近在玩一个叫Baba is you的游戏,很羡慕里面的一个转场特效,所以试着做了一下。主要使用了JS和CSS,特效主要是用CSS实现的。 HTML代码 css代码 这是效果图,点击文字会执行效果一次。 效果JS的解析都写在注释里了,CSS就是使用@keyframes来实现效果,也不是什

  • 本文向大家介绍js焦点文字滚动效果代码分享,包括了js焦点文字滚动效果代码分享的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了js焦点文字滚动效果。分享给大家供大家参考。具体如下: 效果描述: 今天推荐的这个又是一个原生的js焦点图效果 默认自动切换,也可以手动切换 javascript代码采用函数式对象编程,也就是javascript编程中的Module模式 基本用法很简单,主要特点有三

  • 本文向大家介绍jQuery实现分章节锚点“回到顶部”动画特效代码,包括了jQuery实现分章节锚点“回到顶部”动画特效代码的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery实现分章节锚点“回到顶部”动画特效。分享给大家供大家参考,具体如下: 这里演示基于jquery实现的分章节动画实现“回到顶部”的效果,可通过 网页顶部的数字序号直接进入网页的章节,当处于第二章节的时候,网页右侧

  • 本文向大家介绍JS实现转动随机数抽奖特效代码,包括了JS实现转动随机数抽奖特效代码的使用技巧和注意事项,需要的朋友参考一下 大家都玩过抽奖游戏,或者梦想抽到大奖吧,但是有没有想过抽奖游戏是怎么实现的呐?今天就给大家分享一款转动随机数抽奖的JS特效代码。 实现代码如下 实现的效果图: 现在抽奖游戏应用的非常广泛,我们每个人都会接触到,尤其是节假日的时候各大商场都会组织这种类型的游戏活动吸引顾客,我上

  • 本文向大家介绍iOS实现滚动字幕的动画特效,包括了iOS实现滚动字幕的动画特效的使用技巧和注意事项,需要的朋友参考一下 效果图 开始上代码 滚动字幕的原理是用timer定时器间隔一定的时间来驱动scrollView上的内容偏移,来实现滚动的效果,原理比较简单,关键是有些细节需要处理好,实现流畅效果的同时要考虑到性能优化 这里是.h文件的接口方法及属性,可适应大部分自定义场景 实现滚动字幕的思路和无