码迷,mamicode.com
首页 > Web开发 > 详细

纯css3跑马灯demo

时间:2017-09-02 12:54:28      阅读:466      评论:0      收藏:0      [点我收藏+]

标签:otn   diy   vss   rto   rc4   owa   jic   vdi   idm   

我们写跑马灯一般都是用js控制定时器不断循环产生,但是定时器消耗比较大,特别是程序中很多用到定时器的时候,感觉有的时候比较卡。但是css3样式一般不会。这里主要的思路就是用css3代替js定时器实现一个简单的跑马灯。
 
1、基本思路
     这次demo主要是通过css3中的animation动画实现,借助transform中的translateY属性的增减实现dom位置的变化,让它跑起来。
技术分享
---------------------------html----------------------------
<div class="marquee">
    <div>
        <p>让我掉下眼泪的 不止昨夜的酒</p>
        <p>让我依依不舍的 不止你的温柔</p>
        <p>余路还要走多久 你攥着我的手</p>
        <p>让我感到为难的 是挣扎的自由</p>
        <p>分别总是在九月 回忆是思念的愁</p>
        <p>深秋嫩绿的垂柳 亲吻着我额头</p>
        <p>在那座阴雨的小城里 我从未忘记你</p>
        <p>成都 带不走的 只有你</p>
        <p>和我在成都的街头走一走</p>
        <p>直到所有的灯都熄灭了也不停留</p>
        <p>你会挽着我的衣袖 我会把手揣进裤兜</p>
        <p>走到玉林路的尽头 坐在(走过)小酒馆的门口</p>
        <p>我是最后一个</p>
    </div>
</div>
----------------------------css-----------------------------
.marquee div {
    display: block;
    width: 100%;
    text-align: center;
    position: absolute;
    overflow: hidden;
    -webkit-animation: marquee 15s linear infinite;
    animation: marquee 15s linear infinite;
}
@keyframes marquee {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-650px); // 每行高50
    }
}
技术分享

 

     这段代码比较容易理解,就是在进度0的时候位移为0,进度100%的时候位移100%。根据css3动画原理,在100%的时候无限循环状态下,动画会自动重叠到进度0的状态,进而实现循环动画。
     但是通过实际观察可以发现,过渡效果很不好,100%-0%的时候会出现闪跳的状态,为此我们将0%以及100%状态下的位置重新计算,并在进度0前面添加一个末位项,如下
技术分享
---------------------------html----------------------------
<div class="marquee">
    <div>
        <p class="label_txt">我是最后一个</p>        
        <p>让我掉下眼泪的 不止昨夜的酒</p>
        <p>让我依依不舍的 不止你的温柔</p>
        <p>余路还要走多久 你攥着我的手</p>
        <p>让我感到为难的 是挣扎的自由</p>
        <p>分别总是在九月 回忆是思念的愁</p>
        <p>深秋嫩绿的垂柳 亲吻着我额头</p>
        <p>在那座阴雨的小城里 我从未忘记你</p>
        <p>成都 带不走的 只有你</p>
        <p>和我在成都的街头走一走</p>
        <p>直到所有的灯都熄灭了也不停留</p>
        <p>你会挽着我的衣袖 我会把手揣进裤兜</p>
        <p>走到玉林路的尽头 坐在(走过)小酒馆的门口</p>
        <p class="label_txt">我是最后一个</p>
    </div>
</div>
----------------------------css-----------------------------
.marquee div {
    display: block;
    width: 100%;
    text-align: center;
    position: absolute;
    overflow: hidden;
    -webkit-animation: marquee 15s linear infinite;
    animation: marquee 15s linear infinite;
}
@keyframes marquee {
    0% {
        transform: translateY(-25);
    }
    100% {
        transform: translateY(-675px); // 每行高50
    }
}
技术分享

     实际观察可以发现,这样效果就好很多。原理的根本就是让闪跳的前一帧和后一帧的位置重合,而此时下一条文本还没有完全露出,视觉上基本

达到无缝连接状态。如果容器内会同时出现两条或以上文本内容时,可以在class="label_txt"位置再添加首尾项,实现动画的链接。综上我们就实现了完全由css3达成的跑马灯效果。
------------------------------------分割线------------------------------------------
     虽然我们达到了这个目的,但是代码中还有不少问题。由于css3无法获取dom节点数量,因此100%进度时的位移量只能写死。
  • less在部分插件中可以实现获取dom相关内容,但是还是需要引入js,本质上还是通过js获取dom数量
  • 另一种思路就是保留固定长度,通过js填充或打乱重选保证dom数量。比如我们设置一个的位移量等于14个dom节点的高度,在配置内容不足时,通过js循环一下补充到14个。而一旦大于就只能删除一部分了或者随机填充。
-----------------------------------峰回路转分割线----------------------------------
js可以直接操作keyframe内部的属性!!!!666,这样的话就简单啦。页面初始化的时候
技术分享
var cssRule;
 
// Returns a reference to the specified CSS rule(s).
 
function getRule() {
  var rule;
  var ss = document.styleSheets;
  for (var i = 0; i < ss.length; ++i) {
      // loop through all the rules!
      for (var x = 0; x < ss[i].cssRules.length; ++x) {
          rule = ss[i].cssRules[x];
          if (rule.name == "marquee" && rule.type == CSSRule.KEYFRAMES_RULE) {
              cssRule = rule;
          }
      }
  }
}
 
cssRule.deleteRule("0");
cssRule.deleteRule("1");
cssRule.appendRule("0% { transform: translateY(-150px); opacity: 0; }");
cssRule.appendRule("100% { transform: translateY(0px); opacity: 1; }"); 
技术分享
     通过cssRule对象更新不同进度的状态即可。但值得注意的是仅仅是删除的时候动画效果并不会改变,要在添加上替换的才会其效果哦~~
 
 
测试:
<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>CSS3实现跑马灯效果</title>
        <style>
            .marquee div {
                display: block;
                width: 100%;
                text-align: right;
                position: absolute;
                overflow: hidden;
                -webkit-animation: marquee 15s linear infinite;
                animation: marquee 15s linear infinite;
            }
            
            @keyframes marquee {
                0% {
                    transform: translateX(195);
                }
                100% {
                    transform: translateX(-100%); // 每行高50
                }
            }
        </style>
        <script>
        </script>
    </head>

    <body>
        <div class="marquee">
            <div>
                <p>让我掉下眼泪的 不止昨夜的酒</p>
                <p>让我依依不舍的 不止你的温柔</p>
                <p>余路还要走多久 你攥着我的手</p>
                <p>让我感到为难的 是挣扎的自由</p>
                <p>分别总是在九月 回忆是思念的愁</p>
                <p>深秋嫩绿的垂柳 亲吻着我额头</p>
                <p>在那座阴雨的小城里 我从未忘记你</p>
                <p>成都 带不走的 只有你</p>
                <p>和我在成都的街头走一走</p>
                <p>直到所有的灯都熄灭了也不停留</p>
                <p>你会挽着我的衣袖 我会把手揣进裤兜</p>
                <p>走到玉林路的尽头 坐在(走过)小酒馆的门口</p>
                <p>我是最后一个</p>
            </div>
        </div>
    </body>

</html>

 

技术分享
 
 

纯css3跑马灯demo

标签:otn   diy   vss   rto   rc4   owa   jic   vdi   idm   

原文地址:http://www.cnblogs.com/qlqwjy/p/7466268.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!