CSS3+Jquery实现banner图特效

2015-4-18 12:59:12 人评论 次浏览 分类:关键帧特效

代码分析:


 /*CSS 部分*/
 /*左侧文字动画函数Class*/
 .leftslidesty{-webkit-animation : leftslide .5s ease-in forwards;}
 /*右侧文字动画函数Class*/
 .rightslidesty{-webkit-animation : rightslide .5s ease-in forwards;}

 /*左侧文字动画函数*/
 @-webkit-keyframes leftslide{
	0%{left:-600px;top:124px;}
	100%{left:199px;top:124px;}
 } 
 /*右侧文字动画函数*/
 @-webkit-keyframes rightslide{
	0%{right:-600px;top:231px;}
	100%{right:199px;top:231px;}
 }
 
 
 /*JS部分*/
 /*页面一加载执行*/
$(document).ready(function(){
	$(".lefttext").addClass("leftslidesty");
	$(".righttext").addClass("rightslidesty");
});

演示地址:

http://www.sipeng.net/ParentPage/htmlcontent/effectspage/slideText/slidetext.html


上一篇:CSS3+jquery实现悬停特效

下一篇:没有了

共有访客发表了评论 网友评论

验证码: 看不清楚?