公司发展历程大事记效果

1、新建html文档。

2、书写hmtl代码。

<div class="bg"> <img src="images/bg04.jpg

<header class="top" id="top"> 

 <div class="music" id="bgMusicSwitch" title="停止背景音乐">

  <div class="triangle"></div>

  <div class="pause pause1"></div>

  <div class="pause pause2"></div>

 </div>

</header>

<section id="timeline" class="timeline">

 <div id="line" class="line_white"> </div>

 <div id="impress">

  <div id="timeList">

   <div class="step year"  data-x="-600" data-y="0" data-scale ="0.5" id="0">

    <div class="year2012"> 2012 </div>

    <div class="list_show"> 2012，开源中国快速发展的一年<br/>

    </div>

   </div>

   <div class="timeList_item step"  data-x="0" data-y="0"  id="1">

    <div class="circle"> 02/29 </div>

    <h2 class="timeList_item_title"> 全面启用HTTPS登陆 </h2>

    <div class="list_show show1" > <img src="images/event1.jpg

     <h2><a href="#">全面启用HTTPS登陆</a></h2>

     彻底保护你的密码不被嗅探和盗用<br/>

      OSCHINA采用商业证书，值得信赖

    </div>

   </div>

   <div class="timeList_item step"  data-x="200" data-y="0" id="2">

    <div class="circle"> 03/10 </div>

    <h2 class="timeList_item_title"> 空间自定义风格 </h2>

    <div class="list_show"> <img src="images/event2.jpg">

     <h2><a href="#">全面启空间自定义风格</a></h2>

     <p class="m160">Less CSS 框架开发<br/>

      7种方案随心选择

    </div>

   </div>

3、书写css代码。

.impress-enabled .step.active .show3 p { top: 90px; }

.impress-enabled .step.active .show4 img { left: auto; right: 0; width: 400px; }

.impress-enabled .step.active .show4 h2 { left: 0; top: 0; }

.impress-enabled .step.active .show4 p, .impress-enabled .step.active .show4 p img { left: 0; }

.impress-enabled .step.active .show4 p { top: 90px; }

.impress-supported .list_show p img { width: 460px; }

.impress-enabled .step.active .show5 img { left: auto; right: 0; width: 300px; box-shadow: 5px 0 10px rgba(0, 0, 0, .2); }

.impress-enabled .step.active .show5 h2 { left: 0; top: 0; }

.impress-enabled .step.active .show5 p, .impress-enabled .step.active .show5 p img { top: 40px; left: 0; width: 700px; }

.impress-enabled .step.active .list_show p.m160, .impress-enabled .step.active .show1 p.m160, .impress-enabled .step.active .show2 p.m160, .impress-enabled .step.active .show3 p.m160, .impress-enabled .step.active .show4 p.m160, .impress-enabled .step.active .show5 p.m160 { top: 160px; }

.impress-enabled .step.active .list_show p.end { top: 0; left: 0; font-size: 36px; }

.gotop { display: none; }

.impress-supported .refresh img { width: 160px; height: 160px; opacity: 0.8; left: 290px; top: 100px; cursor: pointer; }

.impress-not-supported .refresh { display: none; }

.impress-not-supported .gotop { position: fixed; width: 60px; height: 60px; right: 120px; bottom: 60px; }

.impress-not-supported .gotop img { background: transparent;  filter:

progid:DXImageTransform.Microsoft.gradient(startColorstr=#51ffffff, endColorstr=#51ffffff);

background: rgba(255, 255, 255, .2); border-radius: 10px; padding: 10px; }

4、书写并添加js代码。

<script src="js/jquery-1.8.3.min.js"></script>

<script> 

   (function() {

     if (! 

     /*@cc_on!@*/

     0) return;

     var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', ');

     var i= e.length;

     while (i--){

         document.createElement(e[i])

     } 

})() 

</script>

5、代码整体结构。

6、查看效果。