CSS3網頁制作實例:模仿新浪微博首頁變化信息

2024-07-11 09:01:39

字體：大中小

來源：轉載

供稿：網友

武林網(www.49028c.com)文章簡介：css3模仿新浪微博主登陸頁.

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>css3模仿新浪微博主登陸頁-webjx.com</title>
<meta name="keywords" content="transform animation WEB編程前端開發 CSS3培訓 css3實例">
<meta name="description" content="對于設計人員和開發人員來說，CSS一直是web設計過程中重要的一部分，隨著CSS3的出現以及越來越多的瀏覽器對它的支持，設計師們有了更多的選擇。用純CSS也可以實現各種各樣很酷的效果了，甚至是動畫。雖然有些效果不能跨瀏覽器運行，有些只是展示并沒什么實際用途，但僅用CSS實現出的這些效果似乎沒什么可以挑剔的。..所以本站為css3愛好者提供css3實例！">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="expires" content="0">
<meta name="generator" content="Editplus ">
<meta name="author" content="Author：webjx">
<meta name="robots" content="ALL">
<meta name="copyright" content="">
    <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 class="tips">
   由于個人喜好只做safari實例。<br>
   <p class="bredcolor">css3小技巧:</p>
   這個案例其實最主要的是要把下面的數據移到上面，動畫的變化過程是先變高在變透明度，這個先后順序要用到animation的延時<br>
   qq群:197326136
</section>
<section id="sina_all">
        <ul id="idcontent">
            <li>1考試#根據《注冊會計師法》規定：具有高等?？埔陨蠈W校畢業學歷、或者具有會計或者相國公民，可以申請參加注冊會計師全國統一考試。</li>
            <li>2考試#根據《注冊會計師法》規定：具有高等專科以上學校畢業學歷、或者具有可以申請參加注冊會計師全國統一考試。</li>
            <li>3考試#根據《注冊會計師法》規定：具有高等?？埔陨蠈W校畢業學歷、或者具有計師全國統一考試。</li>
            <li>4考試#根據《注冊會計師法》規定：具有高等?？埔陨蠈W校畢業者相關專業中級以上技術職稱的中國公民，可以申請參加注冊會計師全國統一考試。</li>
            <li>5考試#根據《注冊會計師法》規定：具有高等專科以上學校畢業學歷、或者職稱的中國公民，可以申請參加注冊會計師全國統一考試。</li>
            <li>1考試#根據《注冊會計師法》規定：具有高等?？埔陨蠈W校畢業學歷、或者具有會計或者相關專業中注冊會計師全國統一考試。</li>
        </ul>
    </section>
    <script>
    function $(id){
        return typeof id === "string" ? document.getElementById(id) : id;
    }
    (function(window,undefined){
        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>

上一篇：CSS+JS網頁制作實例:新聞列表鼠標滑過顯示詳情

下一篇：使用em創建Media Queries模板代碼片段