jquery implements overlay 3D text effects code sharing

jquery implements overlay 3D text effects code sharing_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Release： 2016-05-16 15:43:37

Original

1932 people have browsed it

Jquery implements overlay 3D text effects. The effect is very cool, and the implementation code is also very simple. It does not use HTML5 and CSS3 elements, and is purely implemented with Jquery code.

Operation rendering: -----------------------------Effect demonstration----- --------------------------

The jquery implementation code for overlaying 3D text effects shared with you is as follows

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery实现叠层3D文字特效</title>
 
<style type="text/css">
*{margin:0px; padding:0px;}
body{background:#FFF;}
.box{height:160px; width:800px; position:absolute; top:50%; left:50%; margin:-90px 0 0 -320px;}
p{color:#7a9c07; font-size:160px; position:absolute; top:0px; left:0px;letter-spacing:10px; cursor:pointer;}
</style>
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
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"});
 });
  
});
</script>
</head>
 
<body>
<div class="box">
 <p>脚本之家</p>
</div>
</body>
</html>

Copy after login

The above is the jquery code to implement overlay 3D text special effects shared with you. I hope you like it.