js最简单的文字特效(js打字特效)

http://www.itjxue.com  2023-01-27 18:37  来源:未知  点击次数: 

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文字切换效果

style

#ul1{ margin:0px 0px; list-style:none;}

.ul2{ margin:0px 0px; list-style:none; background-color:#00FFCC;}

a{ cursor:pointer;}

.axy{ display:none;}

/style

script

function x(y)

{

var uy="u"+y;

var zky="zk"+y;

var sjy="sj"+y;

var desd=document.getElementById(uy).style.display;

//alert(desd);

if((desd=='')||(desd=='block')){

document.getElementById(uy).style.display='none';

document.getElementById(zky).style.display='block';

document.getElementById(sjy).style.display='none';}

else if(desd=='none'){

document.getElementById(uy).style.display='block';

document.getElementById(zky).style.display='none';

document.getElementById(sjy).style.display='block';

}

}

/script

ul id="ul1"

lia id="zk1" onclick="x(1)" class="axy"1展开/aa id="sj1" onclick="x(1)"1缩进/aul id="u1"class="ul2"li11/lili12/li/ul/li

lia id="zk2" onclick="x(2)" class="axy"2展开/aa id="sj2" onclick="x(2)"2缩进/aul id="u2"class="ul2"li21/lili22/li/ul/li

li3/li

li4/li

li5/li

lia id="zk6" onclick="x(6)" class="axy"6展开/aa id="sj6" onclick="x(6)"6缩进/aul id="u6"class="ul2"li61/lili62/li/ul/li

li7/li

li8/li

li9/li

li10/li

/ul

js 给页面内文字高光特效

如果不想动复制过来的内容,(可能内容比较多,也不好找,改动又可能会影响其他)

那就将你自己写的div 都添加一个class, 设置文字格式,如font-size,font-color等。

div class="norm"blabla/div

style里可能需要这些:

.norm {

font-family:Verdana, Geneva, sans-serif;

size:12px;

color:black;

opacity:1;

moz-opacity:1;

filter:false;

}

(责任编辑:IT教学网)

更多

推荐新书快递文章