<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1, maxium-scale=1,user-scalable=no">
<title>bootstrap</title>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<style>
body{
background: #494A5F;
color: #D5D6E2;
}
.marquee{
-webkit-perspective:500px;
font-size: 0;
}
.marquee>div{
width:30rem;
height:12rem;
display:inline-block;
position:relative;
background: #e5233e;
overflow: hidden;
}
.marquee div:first-child{
transform:rotateY(-30deg);
transform-origin:right top;
}
.marquee div:last-child{
transform:rotateY(30deg);
transform-origin:left top;
background: #b31e31;
}
.marquee div span{
position:absolute;
line-height:12rem;
background:transparent;
font-size:3rem;
}
.marquee div:first-child span{
transform:translateX(60rem);
animation:crawLeft 12s linear infinite;
}
.marquee div:last-child span{
transform:translateX(30rem);
animation:crawRight 12s linear infinite;
}
@keyframes crawLeft{
to{
transform:translateX(-100rem);
}
}
@keyframes crawRight{
to{
transform:translateX(-130rem);
}
}
#revolve{
width:300px;
height:300px;
border:1px solid #a5faa5;
margin:10%;
position:relative;
-webkit-perspective:500px;
}
.wrapper{
width:100px;
height:100px;
border:1px solid #a5faa5;
position:absolute;
transform-style: preserve-3d;
}
.wrapper>div{
position:absolute;
width:100px;
height:100px;
border:1px solid #a5faa5;
color:white;
opacity:0.8;
}
.test1{
transform:translateZ(100px);
background:darkseagreen;
}
.test2{
transform:rotateY(60deg) translateZ(100px);
background:pink;
}
.test3{
transform:rotateY(120deg) translateZ(100px);
background:orangered;
}
.test4{
transform:rotateY(180deg) translateZ(100px);
background:orange;
}
.test5{
transform:rotateY(240deg) translateZ(100px);
background:paleturquoise;
}
.test6{
transform:rotateY(300deg) translateZ(100px);
background:hotpink;
}
</style>
<script src="../jquery-2.2.4.js" type="text/javascript"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script>
$(function(){
var i=0;var t=null;
function revolve(){
t= window.requestAnimationFrame(revolve);
i++;
$(".wrapper").css({transform:"rotateY("+(i*(-40))+"deg)"});
}
})
</script>
</head>
<body>
<div class="marquee">
<div><span>欢迎访问html5tricks</span></div>
<div aria-hidden="true"><span>欢迎访问html5tricks</span></div>
</div>
<div id="revolve">
<div class="wrapper">
<div class="test1"></div>
<div class="test2"></div>
<div class="test3"></div>
<div class="test4"></div>
<div class="test5"></div>
<div class="test6"></div>
</div>
</div>
</body>
</html>
走马灯的实现
最新推荐文章于 2025-02-12 14:16:23 发布
