超小代码实现文字动画，出自1K写出3D圣诞树的作者

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Who am I</title>
<style type="text/css">
body
{
font-family: '微软雅黑';
line-height: 2;
font-size: 18px;
color: #444;
}
b{font-weight:normal;}
</style>
</head>
<body>
<div id="avata" style="width:50%;word-wrap:break-word;cursor:pointer;" onclick="anim()">手册网，www.CodeFans.net，编程源码，设计素材，书籍教程，网页模板、网页特效，常用软件。</div>
<script type="text/javascript">/*<![CDATA[*/
var d='43#43643F44)44745!45345G:%6?>6E/6JH6P,JU96X1JF8(F89F9#F90F9HF:1F:AX01X0?X0OX18X23X2DX3/X3@1%E6%@:45?@C?A+;&2>CODA0I@JO%6M71LFAW*1V9BU0+55D56.56=56O578;@>AJ>H9*N**SO>Y&BXO,XO?Y()Y(;1B46)43$F3%03%B3&,3&=3&O1E86E9=J#=J5=JE=>C=?-=??=@(=@:82#C;7H;,JB@JC,JC=JCOJD:JE#JE4DF<O7<U(<ZA<U&BTO,TO>U((U(OU):U*$43#43643F44)44745!45345G:%6?>6E/6JH6P,JU96X1JF8(F89F9#F90F9HF:1F:AX01X0?X0OX18X23X2DX3/X3@1%E6%@:45?@C?A+;&2>CODA0I@JO%6M71LFAW*1V9BU0+55D56.56=56O578;@>AJ>H9*N**SO>Y&BXO,XO?Y()Y(;1B46)43$F3%03%B3&,3&=3&O1E86E9=J#=J5=JE=>C=?-=??=@(=@:82#C;7H;,JB@JC,JC=JCOJD:JE#JE4DF<O7<U(<ZA<U&BTO,TO>U((U(OU):U*$43#43643FU(OU):U*$';
var xo=[], yo=[], xd=[], yd=[], e=[], an=-1, dir=-1 , t=0;
var e;
function i()
{
	var n=0, g=document.getElementById('avata'), l=g.innerHTML, s='';
	while (n<l.length)
	{
		var r=l.charAt(n);
		if (r==' ') {s+=r; n++}
		if (r=='<') while (l.charAt(n-1)!='>') s+=l.charAt(n++);
		s+='<b>'+l.charAt(n++)+'</b>';
	}
	g.innerHTML=s;
	e=document.getElementById('avata').getElementsByTagName('b');
	for (n=0; n<e.length; n++)
	{
		xo[n]=e[n].offsetLeft;
		yo[n]=e[n].offsetTop;
		var p=d.charCodeAt(n*3)*1600+d.charCodeAt(n*3+1)*40+d.charCodeAt(n*3+2)-78768;
		yd[n]=p%500;
		xd[n]=(p-yd[n])/500;
	}
	for (n=0; n<e.length; n++)
	{
		e[n].style.position='absolute';
		e[n].style.left=xo[n]+'px';
		e[n].style.top=yo[n]+'px';
	}
}
function ani()
{	t=parseInt(e.length/4)+2;
	for (var n=0; n<t; n++)
	{
		m=e.length-1-n;
		if ((an-n<=30)&&(an-n>=0))
		{
			var b=(Math.cos((((an-n)*Math.PI)/30))+1)/2;
			var a=1-b;
			for (i=0; i<=t; i+=t)
			{
				e[n+i].style.left=((yd[n+i]+111)*a+xo[n+i]*b)+'px';
				e[n+i].style.top=((xd[n+i]+74)*a+yo[n+i]*b)+'px';
				e[m-i].style.left=((yd[m-i]+111)*a+xo[m-i]*b)+'px';
				e[m-i].style.top=((xd[m-i]+74)*a+yo[m-i]*b)+'px';
			}
		}
	}
	an+=dir;
	if ((an-t<=30)&&(an>=0))
	{
		window.setTimeout("ani()", 30);
	}
}
function anim()
{
	dir*=-1;
	if ((an<0)||(an-t>30)) ani();
}
i();
/*]]>*/
</script>
</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

超小代码实现文字动画，出自1K写出3D圣诞树的作者

分类

CSS3

描述

超小代码实现的文字动画功能，代码基本上都来自 Román Cortés,就是那个只用了1K字符写出3D圣诞树的家伙。 <br>　　不佩服不行啊，够牛悍！