圓形按鈕CSS加載動畫

我想創建一個網站來使用我的Kinect。我的手是鼠標，所以當按鈕被激活時，我創建了一個指示器。圓形按鈕CSS加載動畫

我首先想到的是一個圓形按鈕，帶有2px白色邊框，使用懸停效果。將鼠標懸停在按鈕上2秒鐘時，邊框或邊框內的線條應變爲不同的顏色，例如藍色，以指示進度/時間傳遞。

將鼠標懸停在按鈕上方2秒鐘後，它應該得到一個單擊事件，以導航到另一個頁面，例如。

當我停止按鈕時，加載過程應該慢慢向後。

我的代碼：http://jsfiddle.net/nick_craver/9pzVQ/1/

<a href="#" class="menu-arrow" onclick="showMenu('mnu_searches', event, 0, this)">Hover me!</a> 

<script> 
    $(function() { 
     $("a.menu-arrow").hover(function() { 
     $.data(this, "timer", setTimeout($.proxy(function() { 
      $(this).click(); 
     }, this), 2000)); 
     }, function() { 
     clearTimeout($.data(this, "timer")); 
     }); 
    }); 

    function showMenu() { 
     alert("showMenu function fired"); 
    } 
</script>

的圖：http://imgur.com/RdYotvd

來源

2017-02-10 Qataz

我希望我理解你的權利。我用純粹的JavaScript和一點點的CSS來吸引人的按鈕效果。

var button = document.getElementById('button'); 
 
var timer; 
 

 
button.addEventListener('mouseover',function(){ 
 
\t timer = setTimeout(function(){ 
 
    \t alert('load new website now!'); 
 
    },2000); 
 
}); 
 

 
button.addEventListener('mouseout',function(){ 
 
\t clearTimeout(timer); 
 
    //location.replace("http://imgur.com/RdYotvd"); 
 
})

.menu-arrow{ 
 
    display:inline-block; 
 
    margin:10px; 
 
    border: solid 4px white; 
 
    border-radius:5px; 
 
    background-color:white; 
 
    padding:5px; 
 
    transition: border-color 2s ease-in-out; 
 
} 
 

 
.menu-arrow:hover{ 
 
    border-color:#33aaff; 
 
}

<a href="#" id="button" class="menu-arrow" onclick="showMenu('mnu_searches', event, 0, this)">Hover me!</a>

來源

2017-02-10 21:53:16

功能上的褪色是很大的，我想更多的是這樣的： https://youtu.be/_MTLU5Qddqs?t=41s 我希望這個例子更明確地 – Qataz

圓形按鈕CSS加載動畫

回答

相關問題