js最简单的文字特效(js打字特效)
js+css实现文字散开重组动画特效代码分享
文字散开重组动画这款特效我们可以在输入框中指定任意文字,点击确定按钮后,就会将原先的文字爆炸散去,新的文字以像素点的形式组合起来,看起来非常棒。
运行效果图:
这是输入HAPPY后安按钮后效果,当然可以随便输文字
好酷的特效,连中文都支持,看如下图:
为大家分享的文字散开重组动画特效代码如下
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;
}