首先非常感谢网友天蝎的无私分享,这是他分享在JquerySchool网站上的第一款原创作品,此Jquery特效实现叠层3D文字,效果非常酷,实现代码也很简单,没有用HTML5和CSS3元素,纯粹用Jquery代码实现。
功能代码如下:
function move(){
var i;
var a=0;
for(i=$(".box p").size();i>0;i--){
a=a+1;
$(".box p").eq(i).css({left:a*1,top:a*(-1),opacity:i*0.02});
$(".box p").eq(i).animate({left:a*(-1),top:a*(-1),opacity:i*0.02},3000);
$(".box").animate({"margin-left":"-350px"},3000);
$(".box p").eq(i).animate({left:a*1,top:a*(-1),opacity:i*0.02},3000);
$(".box").animate({"margin-left":"-290px"},3000);
};
};
$(document).ready(function(){
var p=0;
for(p=0;p<5;p++)
{
$(".box").append($(".box p").clone());
};
move();
setInterval(move,6100);
$(".box p").click(function(){
$(".box p").text("叠层3D文字").css({"font-size":"110px"});
$(".box").css({"margin-top":"-50px"});
});
});
效果如下:
如果您觉得本作品对您的学习有所帮助:
关键字:
网友天蝎 文字特效 图片3D旋转 360度旋转 3D特效 3D效果