文章簡介：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="www.webjx.com">
<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考試#根據《注冊會計師法》規定：具有高等專科以上學校畢業學歷、或者具有會計或者相國公民，可以申請參加注冊會計師全國統一考試。</li>
<li>2考試#根據《注冊會計師法》規定：具有高等專科以上學校畢業學歷、或者具有可以申請參加注冊會計師全國統一考試。</li>
<li>3考試#根據《注冊會計師法》規定：具有高等專科以上學校畢業學歷、或者具有計師全國統一考試。</li>
<li>4考試#根據《注冊會計師法》規定：具有高等專科以上學校畢業者相關專業中級以上技術職稱的中國公民，可以申請參加注冊會計師全國統一考試。</li>
<li>5考試#根據《注冊會計師法》規定：具有高等專科以上學校畢業學歷、或者職稱的中國公民，可以申請參加注冊會計師全國統一考試。</li>
<li>1考試#根據《注冊會計師法》規定：具有高等專科以上學校畢業學歷、或者具有會計或者相關專業中注冊會計師全國統一考試。</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>