T之家12月9日消息 微軟對Chromium開源項目非常感興趣，因為該項目對Edge和Chrome都有利。微軟最新的功能請求之一就是希望通過部署Edge HTML風格的滾動特性從而讓Chromium的滾動變得更加靈敏。

微軟打算將Impulse樣式（即EdgeHTML樣式）滾動動畫加入到Chromium中，微軟已經將該滾動動畫移植到了基于Chromium的Edge瀏覽器的Dev Canary通道中。默認情況下，Edge瀏覽器中啟用了脈沖樣式的滾動動畫。對于Chrome，該功能可能會在未來幾天內出現在試驗版瀏覽器中。

微軟表示，Impulse-style (也就是EdgeHTML-style)滾動動畫將提供更靈敏的滾動體驗，用戶啟用后鼠標滾輪的每個刻度都試圖模仿基于物理的內容，內容會開始快速移動然后逐漸變慢。換句話說，由于開始時的快速加速，該模式會給人一種更靈敏的感覺。

此外微軟還在推行另一項稱之為“percent-based scrolling”（基于百分比的滾動）的滾動方案，該模式允許瀏覽器將鼠標滾輪或者鍵盤滾動解釋為預期滾動條的百分比。微軟目前正努力將經典版Edge瀏覽器的優秀特性移植到Chromium平臺上，包括這項基于百分比的滾動方式。

景：最近在學習CSS3，看到了一個小案例，通過自己的學習，動手實現了它，現在把它分享出來。

鐘表效果

實現過程

1.首先我們需要在頁面中寫出一個靜態的鐘表效果。首先我們需要一個表盤div wrap 對其進行簡單的樣式設置，用border-radius屬性將其設置成圓形。

<div id="wrap"></div>
 #wrap{width:200px; height:200px; border:2px solid #000; margin:100px auto;border-radius:50%; position:relative;}

2.接下來我們用ul和li來寫表盤中的刻度，對其進行簡單的樣式設置。其中需要注意的是，我們用 -webkit-transform-origin:center 100px;來設置我們的旋轉基點。然后利用 -webkit-transform: rotate(0);讓我們的li旋轉相應的角度形成相應的刻度。

 <ul id="list">
 <li></li> <!--刻度-->
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 </ul> #wrap ul{margin:0; padding:0; height:200px; position:relative; list-style:none;} #wrap ul li{width:2px; height:6px; background:#000; position:absolute; left:99px; top: 0;-webkit-transform-origin:center 100px;} #wrap ul li:nth-of-type(1){-webkit-transform: rotate(0);} #wrap ul li:nth-of-type(2){-webkit-transform: rotate(6deg);} #wrap ul li:nth-of-type(3){-webkit-transform: rotate(12deg);} 
 #wrap ul li:nth-of-type(4){-webkit-transform: rotate(18deg);} #wrap ul li:nth-of-type(5){-webkit-transform: rotate(24deg);} #wrap ul li:nth-of-type(6){-webkit-transform: rotate(30deg);} #wrap ul li:nth-of-type(7){-webkit-transform: rotate(36deg);} #wrap ul li:nth-of-type(8){-webkit-transform: rotate(42deg);} #wrap ul li:nth-of-type(5n+1){ height:12px;}

3.其中我們設計到了css3的選擇器nth-of-type() ，它規定其屬于其父元素的第幾個li元素。

當然，我們不可能將表盤的刻度都統統去設置li的樣式去完成。我們后面需要用js去渲染它。

在渲染之前，我們需要去寫上我們的秒針、分針、時針。分別是div hour、min、sec，并且我們對其進行樣式的設置。為了美化一下，我們再寫一個div icon，圓點。并對其進行簡單樣式設置。

 <div id="hour"></div>
 <div id="min"></div>
 <div id="sec"></div>
 <div class="icon"></div>
 #hour{width:6px; height:45px; background:#000; position:absolute; left:97px; top:55px;-webkit-transform-origin:bottom ;}
 #min{width:4px; height:65px; background:#999; position:absolute; left:98px; top:35px;-webkit-transform-origin:bottom ;}
 #sec{width:2px; height:80px; background:red; position:absolute; left:99px; top:20px;-webkit-transform-origin:bottom ;}
 .icon{width:20px; height:20px; background:#000; border-radius:50%; position:absolute; left:90px; top: 90px;}

4.接下來我們來寫一下讓鐘表動起來的JavaScript，首先用js去獲取各個div。

 var oList=document.getElementById("list");//獲取到刻度
 var oCss=document.getElementById("css"); var oHour=document.getElementById("hour");//獲取時針
 var oMin=document.getElementById("min");//獲取分針
 var oSec=document.getElementById("sec");//獲取秒針
 var oLi=""; var sCss="";

5.接下來去渲染表盤的刻度。

 for (var i=0;i<60;i++) { //一個表盤總共是60個刻度
 sCss+="#wrap ul li:nth-of-type("+(i+1)+"){-webkit-transform: rotate("+i*6+"deg);}";
 oLi+="<li></li>";
 };
 oList.innerHTML=oLi;
 oCss.innerHTML+=sCss;//表盤刻度渲染完成

6.接下來我們去寫一個鐘表表針根據時間變動的函數，先利用new Date（）獲取時間，然后通過去改變表針的樣式去讓表針根據時間去轉動，秒針一秒相當于旋轉6度，分鐘一秒相當轉動6度，時針轉動1秒相當于轉動30度。

function toTime(){ var oDate=new Date();//獲取當前時間
 var iSec=oDate.getSeconds();//獲取當前秒
 var iMin=oDate.getMinutes()+iSec/60;//獲取當前分
 var iHour=oDate.getHours()+iMin/60;//獲取當前時
 oSec.style.WebkitTransform="rotate("+iSec*6+"deg)";//秒針轉動角度1秒6度 (表盤一圈360度一圈60秒所以一秒6度)
 oMin.style.WebkitTransform="rotate("+iMin*6+"deg)";//分鐘轉動角度1分6度 (表盤一圈360度一圈60分所以一分6度)
 oHour.style.WebkitTransform="rotate("+iHour*30+"deg)";//時針轉動角度一小時30度(表盤一圈360度一圈12小時所以一小時30度)
 };

7.最后我們來開一個定時器，讓函數隔一秒執行一次。

 toTime();
 setInterval(toTime,1000);

至此一個鐘表效果就寫完了，下面是全部源代碼

效果源碼