在css中製作帶有虛線邊框的圓形並在懸停時進行動畫製作

我正在嘗試爲css圈設置動畫效果。當用戶徘徊它時，圓圈的邊界應該變成虛線，它應該像一個旋轉輪一樣動畫。我可以讓它旋轉一段時間，但我無法找到一種方法來製作動畫，直到鼠標指針懸停在上面爲止，然後當鼠標指針從圓圈中取出並製作虛線邊框時停止動畫。在css中製作帶有虛線邊框的圓形並在懸停時進行動畫製作

HTML

<div> 
</div>

CSS

div { 
    background: red; 
    border: 5px solid green; 
    width: 200px; 
    height: 200px; 
    border-radius: 50%; 
    transition: all 5s ease-in-out; 
} 

div:hover { 
    transform:rotate(180deg); 
    border: 5px dotted blue; 
}

的jsfiddle - >http://jsfiddle.net/uYBKQ/1/

來源

2013-06-21 The Last Coder

你需要CSS動畫。 CSS轉換不會循環。 – Prinzhorn

如何製作虛線邊框？你能幫我:) –

我假設你使用Firefox http://stackoverflow.com/questions/3718215/css3-round-and-dotted-borders – Prinzhorn

你需要CSS動畫。

在你的HTML代碼，把後續類：

<div class="rotate"> 
<!-- The content --> 
</div>

而在你的CSS文件，添加這些規則（這個例子只對WebKit的）：

div:hover { 
    -webkit-animation: rotate 2s linear infinite; 
} 

@-webkit-keyframes rotate { 
    from{ 
     -webkit-transform: rotate(0deg); 
    } 
    to{ 
     -webkit-transform: rotate(180deg); 
    } 
}

這裏有一個DEMO

乾杯，利奧

如果你想在Firefox中工作，只需要廣告d各自的供應商前綴。

來源

2013-06-21 17:19:07 leoMestizo

請記住，這將只會在現代瀏覽器中的詞，你可能會想要查看http://modernizr.com/。 Modernizr用javascript檢查和替換不支持的css3功能。 –

我不能說更好。謝謝@Joe_Maker。 – leoMestizo

我叉你的提琴在這裏：http://jsfiddle.net/vHRat/3/

這裏是更新的CSS：

div { 
    background: red; 
    border: 5px solid green; 
    width: 200px; 
    height: 200px; 
    border-radius: 0%; 
} 

div:hover { 
    border: dotted 5px blue; 
    animation: hover 5s; 
    -webkit-animation: hover 5s; /* Safari and Chrome */ 
} 
@keyframes hover 
{ 
    from {} 
    to { 
     transform:rotate(360deg); 
     -ms-transform:rotate(360deg); /* IE 9 */ 
     -webkit-transform:rotate(360deg); /* Safari and Chrome */ 
    } 
} 
@-webkit-keyframes hover /* Safari and Chrome */ 
{ 
    from {} 
     to { 
      transform:rotate(360deg); 
      -ms-transform:rotate(360deg); /* IE 9 */ 
      -webkit-transform:rotate(360deg); /* Safari and Chrome */ 
     } 
}

而且什麼它的價值，如果你改變了邊界半徑爲0，你可以清楚地看到旋轉。邊框顯示爲實心，並且由於旋轉，該圓圈顯示爲靜態。

來源

2013-06-21 17:22:16 NullHappens

在css中製作帶有虛線邊框的圓形並在懸停時進行動畫製作

回答

相關問題