实现页面的3D效果
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实现3D的跑马灯动画特效</title>
<link rel="stylesheet" href="css/style.css">
<!--[if lt IE9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="marquee">
<div><span>欢迎访问html5tricks</span></div>
<div aria-hidden="true"><span>欢迎访问html5tricks</span></div>
</div>
<form onsubmit="setText(event)">
<label for="textsource">使用你自己的文本</label>
<input type="text" id="textsource" value="欢迎访问html5tricks" 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:
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%;
}
}
