CSS3網(wǎng)頁(yè)制作實(shí)例:模仿新浪微博首頁(yè)變化信息

2024-07-11 09:01:39

字體：大中小

供稿：網(wǎng)友

武林網(wǎng)(www.survivalescaperooms.com)文章簡(jiǎn)介：css3模仿新浪微博主登陸頁(yè).

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>css3模仿新浪微博主登陸頁(yè)-webjx.com</title>
<meta name="keywords" content="transform animation WEB編程前端開發(fā) CSS3培訓(xùn) css3實(shí)例">
<meta name="description" content="對(duì)于設(shè)計(jì)人員和開發(fā)人員來(lái)說(shuō)，CSS一直是web設(shè)計(jì)過(guò)程中重要的一部分，隨著CSS3的出現(xiàn)以及越來(lái)越多的瀏覽器對(duì)它的支持，設(shè)計(jì)師們有了更多的選擇。用純CSS也可以實(shí)現(xiàn)各種各樣很酷的效果了，甚至是動(dòng)畫。雖然有些效果不能跨瀏覽器運(yùn)行，有些只是展示并沒(méi)什么實(shí)際用途，但僅用CSS實(shí)現(xiàn)出的這些效果似乎沒(méi)什么可以挑剔的。..所以本站為css3愛好者提供css3實(shí)例！">
<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">
   由于個(gè)人喜好只做safari實(shí)例。<br>
   <p class="bredcolor">css3小技巧:</p>
   這個(gè)案例其實(shí)最主要的是要把下面的數(shù)據(jù)移到上面，動(dòng)畫的變化過(guò)程是先變高在變透明度，這個(gè)先后順序要用到animation的延時(shí)<br>
   qq群:197326136
</section>
<section id="sina_all">
        <ul id="idcontent">
            <li>1考試#根據(jù)《注冊(cè)會(huì)計(jì)師法》規(guī)定：具有高等專科以上學(xué)校畢業(yè)學(xué)歷、或者具有會(huì)計(jì)或者相國(guó)公民，可以申請(qǐng)參加注冊(cè)會(huì)計(jì)師全國(guó)統(tǒng)一考試。</li>
            <li>2考試#根據(jù)《注冊(cè)會(huì)計(jì)師法》規(guī)定：具有高等專科以上學(xué)校畢業(yè)學(xué)歷、或者具有可以申請(qǐng)參加注冊(cè)會(huì)計(jì)師全國(guó)統(tǒng)一考試。</li>
            <li>3考試#根據(jù)《注冊(cè)會(huì)計(jì)師法》規(guī)定：具有高等專科以上學(xué)校畢業(yè)學(xué)歷、或者具有計(jì)師全國(guó)統(tǒng)一考試。</li>
            <li>4考試#根據(jù)《注冊(cè)會(huì)計(jì)師法》規(guī)定：具有高等專科以上學(xué)校畢業(yè)者相關(guān)專業(yè)中級(jí)以上技術(shù)職稱的中國(guó)公民，可以申請(qǐng)參加注冊(cè)會(huì)計(jì)師全國(guó)統(tǒng)一考試。</li>
            <li>5考試#根據(jù)《注冊(cè)會(huì)計(jì)師法》規(guī)定：具有高等專科以上學(xué)校畢業(yè)學(xué)歷、或者職稱的中國(guó)公民，可以申請(qǐng)參加注冊(cè)會(huì)計(jì)師全國(guó)統(tǒng)一考試。</li>
            <li>1考試#根據(jù)《注冊(cè)會(huì)計(jì)師法》規(guī)定：具有高等專科以上學(xué)校畢業(yè)學(xué)歷、或者具有會(huì)計(jì)或者相關(guān)專業(yè)中注冊(cè)會(huì)計(jì)師全國(guó)統(tǒng)一考試。</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網(wǎng)頁(yè)制作實(shí)例:新聞列表鼠標(biāo)滑過(guò)顯示詳情

下一篇：使用em創(chuàng)建Media Queries模板代碼片段