jQuery+CSS3文字跑马灯特效

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery+CSS3文字跑马灯特效的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery+CSS3文字跑马灯特效</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="marquee">
	<div><span>欢迎访问内容</span></div>
	<div aria-hidden="true"><span>欢迎访问内容</span></div>
</div>
<form onsubmit="setText(event)">
	<label for="textsource">使用你自己的文本</label>
	<input type="text" id="textsource" value="欢迎访问内容" autocapitalize="characters" pattern=".{5,60}" title="5-30个字符长度">
	<input type="submit" class="btn" value="使用">
</form>
<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
		function setText(event){
		  event.preventDefault();
		  leftText.innerText = textsource.value.toUpperCase();
		  rightText.innerText = textsource.value.toUpperCase();
		}
		var leftText = document.querySelector("#marquee div:first-of-type span");
		var rightText = document.querySelector("#marquee div:last-of-type span");
		var textsource = document.getElementById("textsource");
		setText();
</script>
</body>
</html>

CSS代码(style.css):

body{background:#494A5F;color:#D5D6E2;font-weight:500;font-size:1.05em;font-family:"Microsoft YaHei","����","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif,FreeSans,Arimo;}
a{color:#2fa0ec;outline:none;text-decoration:none;}
a:hover,a:focus{color:#74777b;text-decoration:none;}
@font-face{font-family:Agency;}
body{font-family:"Microsoft YaHei","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif;marging:0;}
#marquee{margin-top:3rem;-webkit-perspective:500px;perspective:500px;font-size:0;font-family:"Microsoft YaHei","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif;}
#marquee div{display:inline-block;height:12rem;width:30rem;position:relative;}
#marquee div:first-of-type{background:#e5233e;-webkit-transform-origin:top right;transform-origin:top right;-webkit-transform:rotateY(-40deg);transform:rotateY(-40deg);color:#fff;}
#marquee div:last-of-type{background:#b31e31;-webkit-transform-origin:top left;transform-origin:top left;-webkit-transform:rotateY(45deg);transform:rotateY(45deg);color:#f8c9d9;}
#marquee div{font-size:8rem;overflow:hidden;}
#marquee div span{position:absolute;width:400%;line-height:1.4;}
@-webkit-keyframes leftcrawl{to{-webkit-transform:translateX(-100rem);transform:translateX(-100rem);}
}
@keyframes leftcrawl{to{-webkit-transform:translateX(-100rem);transform:translateX(-100rem);}
}
@-webkit-keyframes rightcrawl{to{-webkit-transform:translateX(-130rem);transform:translateX(-130rem);}
}
@keyframes rightcrawl{to{-webkit-transform:translateX(-130rem);transform:translateX(-130rem);}
}
#marquee div:first-of-type span{-webkit-transform:translateX(60rem);transform:translateX(60rem);-webkit-animation:leftcrawl 14s linear infinite;animation:leftcrawl 14s linear infinite;text-shadow:4px 0px 4px rgba(0,0,0,0.3);}
#marquee div:last-of-type span{-webkit-transform:translateX(30rem);transform:translateX(30rem);-webkit-animation:rightcrawl 14s linear infinite;animation:rightcrawl 14s linear infinite;}
form{margin-top:3rem;background:#334;padding:1rem;text-align:center;color:#fff;}
input[type="text"]{padding:.5rem;font-size:1.2rem;width:22rem;}
input[type="text"]{padding:.5rem;}
label{margin:1rem;}
@media all and (max-width:993px){#marquee{-webkit-perspective:none;perspective:none;}
#marquee div:last-of-type{opacity:0;height:0;}
#marquee div:first-of-type{width:80%;}
}

附件:下载该文件资源,减少时间成本(增值服务)