走马灯的实现

最新推荐文章于 2025-02-12 14:16:23 发布

原创最新推荐文章于 2025-02-12 14:16:23 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

CSS 专栏收录该内容

1 篇文章

订阅专栏

该博客展示了如何使用HTML5和CSS3实现走马灯（轮播）效果。通过CSS3的transform属性和关键帧动画创建了水平滚动的文字走马灯，以及3D旋转的图片展示效果。

<!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>