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

2020-01-27 14:16:36

字体：大中小

来源：转载

供稿：网友

CSS3模仿新浪微博主页文字滚动，最主要的是要把下面的数据移到上面，动画的变化过程是先变高在变透明度，这个先后顺序要用到animation的延时作者讨论qq群:197326136。

<!DOCTYPE HTML><html lang="en-US"><head><title>css3模仿新浪微博主页文字滚动</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;line-height: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错新网提供编程源码、网站源码、网页素材、书籍教程、网站模板、网页特效代码等，做有质量的学习型源码下载站。。</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>

上一篇：css3仿制js的弹力效果

下一篇：使用css3的transform制作apple的展示台效果

学习交流

phpwind的rewrite重写原理

phpwind的rewrite重写原理...

热门图片

猜你喜欢的新闻

猜你喜欢的关注