CSS3模仿新浪微博主页文字滚动_CSS相关

CSS3模仿新浪微博主页文字滚动: 发布时间：2020-01-09编辑：脚本学堂

CSS3模仿新浪微博主页文字滚动，把下面的数据移到上面，动画变化过程是先变高再变透明度，用到animation的延时。

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<title>css3模仿<a href=http://www.sina.com.cn target=_blank class=infotextkey>新浪</a>微博主页文字滚动</title>
<style type="text/css">
    *{margin:0;padding:0px;}
    body{background:#b1b1b1;font-family:Arial;font-size:14px;color:#202020;}
    li{list-style:none;border-bottom:1px #333333 dashed;padding:5px;}
    .tips{width:600px;margin:0 auto;<a href=http://www.jb200.com/article/15092.html target=_blank class=infotextkey>line-height</a>:24px;padding-top:10px;font-size:14px;}
    .bredcolor{color:#fff;}
    #sina_all{width:500px;height:300px;overflow:hidden;margin:0 auto;line-height:26px;}
    .idcontent_chang{-webkit-animation:idcontent_height .7s linear,idcontent_opacity .5s linear .7s;}
    @-webkit-keyframes idcontent_height{
        0%{height:0px;opacity:0;}
        100%{height:200px;height:52px;opacity:0;}
    }
    @-webkit-keyframes idcontent_opacity{
        0%{opacity:0;}
        100%{opacity:1;}
    }
    </style>
</head>
<body>
<section id="sina_all">
        <ul id="idcontent">
            <li>1<a href=http://www.jb200.com/jb/ target=_blank class=infotextkey>脚本</a>学习网，欢迎光临。
。</li>
            <li>2考试#根据《注册会计师法》规定：具有高等专科以上学校毕业学历、或者具有可以申请参加注册会计师全国统一考试。</li>
            <li>3[HTML5] css3模仿新浪微博主登陆页。</li>
            <li>4我猜人就是这样子吧。</li>
            <li>5脚本学习网，欢迎光临。</li>
          </ul>
    </section>
    <script>
    function $(id){
        return typeof id === "string" ? document.getElementById(id) : id;
    }
    (function(){
        var aLi = $('idcontent').getElementsByTagName('li');
        setInterval(function(){
            var firstLi = aLi[aLi.length-1];
            $('idcontent').insertBefore(firstLi,aLi[0]);
            firstLi.className = 'idcontent_chang';
        },2000);
    })();
    </script>
</body>
</html>

提示：可修改代码后再运行!

上一篇：借助jquery实现的CSS3时钟式进度条
下一篇：CSS3实用纸张特效，卷边效果

与 CSS3模仿新浪微博主页文字滚动有关的文章

本文标题：CSS3模仿新浪微博主页文字滚动
本页链接：http://www.jb200.com/tx/137.html

浏览排行

栏目分类

热点文章

1css实现网站导航之横向导航

CSS3模仿新浪微博主页文字滚动