css3 transition 和 animation实现横向、纵向 滚动、走马灯( marquee 在H5已被废弃)

css3 transition 和 animation实现横向、纵向 滚动、走马灯( marquee 在H5已被废弃)

横向:

transition写法

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>marquee</title>
<style type="text/css">
body{
padding: 0;
margin: 0;
}
#demo{
width: 100%;
height: 50px;
background: #eee;
position: fixed;
}
#demo>#spa{
word-break:keep-all;
white-space:nowrap;
position: absolute;
left: 100%;
font-size: 30px;
line-height: 50px;
}
</style>
</head>
<body>
    <div id="demo"><span id='spa' >走马灯效果</span></div>
</body>
<script type="text/javascript">
     var spa = document.getElementById("spa");
     var spaw = spa.offsetWidth;
     var bodyw = document.body.clientWidth;
     var w = 0-(spaw+bodyw);
     spa.style.transform = 'translate(' + w + 'px, 0px)';
     spa.style.transition = 'transform 5s linear';
     window.setInterval(function(){
          spa.style.transform = 'translate(0px, 0px)';
          spa.style.transition = 'transform 0s linear';
          window.setTimeout(function(){
               spa.style.transform = 'translate(' + w + 'px, 0px)';
               spa.style.transition = 'transform 5s linear';
          },100)
     },5000)
</script>
</html>

animation写法

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>marquee</title>
<style type="text/css">
#demo{
width: 100%;
height: 50px;
background: #eee;
position: fixed;
}
#demo>span{
word-break:keep-all;
white-space:nowrap;
position: absolute;
left: 100%;
font-size: 30px;
line-height: 50px;
}
#demo>.a{
-webkit-animation:demo 5s infinite;
-webkit-animation-timing-function:linear;
}
</style>
<style id='asty'></style>
</head>
<body>
    <div id="demo"><span id='spa' class='a'>走马灯效果</span></div>
</body>
<script type="text/javascript">
    var spa = document.getElementById("spa");
    var width = 0-(spa.offsetWidth);
    var style = document.getElementById("asty");
    style.innerHTML = '@-webkit-keyframes demo{from {left: 100%;}to {left: '+width+'px;}}';
    spa.className = 'a';
</script>
</html>

 

 

纵向:

一、逐条无缝滚动(无闪动)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>marquee</title>
    <style type="text/css">
        @-webkit-keyframes scrollText1 {
            0%{
                -webkit-transform: translateY(0px);
            }
            20%{
                -webkit-transform: translateY(-30px);
            }
            40%{
                -webkit-transform: translateY(-60px);
            }
            60%{
                -webkit-transform: translateY(-90px);
            }
            80%{
                -webkit-transform: translateY(-120px);
            }
            100%{
                -webkit-transform: translateY(-150px);
            }
        }

        @keyframes scrollText1 {
            0%{
                transform: translateY(0px);
            }
            20%{
                transform: translateY(-30px);
            }
            40%{
                transform: translateY(-60px);
            }
            60%{
                transform: translateY(-90px);
            }
            80%{
                transform: translateY(-120px);
            }
            100%{
                transform: translateY(-150px);
            }
        }

        .box3{
            position: relative;
            top: 20px;
            left: 20px;
            width: 200px;
            height: 30px;
            overflow: hidden;
            border:1px solid #ccc;
        }

        .border3{
            top: 0px;
            -webkit-animation:scrollText1 8s infinite  cubic-bezier(1,0,0.5,0) ;
            animation:scrollText1 8s infinite  cubic-bezier(1,0,0.5,0) ;
        }

        .border3 div{
            height: 30px;
        }

        .border3:hover{
            animation-play-state:paused;
            -webkit-animation-play-state:paused;
        }
    </style>

</head>
<body>
<div class="box3">
    <div class="border3">
        <div>This is a test 1.</div>
        <div>This is a test 2.</div>
        <div>This is a test 3.</div>
        <div>This is a test 4.</div>
        <div>This is a test 5.</div>
        <div>This is a test 1.</div>
    </div>
</div>
</body>

</html>

 

二、

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>marquee</title>
    <style type="text/css">
        .marquee div {
            display: block;
            width: 100%;
            text-align: center;
            position: absolute;
            overflow: hidden;
            -webkit-animation: marquee 5s linear infinite;
            animation: marquee 5s linear infinite;
        }
        @keyframes marquee {
            0% {
                transform: translateY(-50);
            }
            100% {
                transform: translateY(-230px); // 每行高50
            }
        }
    </style>

</head>
<body>
<div class="marquee">
    <div>
        <p class="label_txt">我是最后一个</p>
        <p>让我掉下眼泪的 不止昨夜的酒</p>
        <p>让我依依不舍的 不止你的温柔</p>
        <p>余路还要走多久 你攥着我的手</p>
        <p>走到玉林路的尽头 坐在(走过)小酒馆的门口</p>
        <p class="label_txt">我是最后一个</p>
    </div>
</div>

 

留下评论