創建虛擬邊框

我想創建虛擬邊框，但是我遇到了一些問題：我使用了類似的東西。創建虛擬邊框

HTML：

<div class="rotate"> 
</div>

CSS：

.rotate { 
     background: red; 
     border: 5px solid green; 
     width: 200px; 
     height: 200px; 
     border-radius: 50%; 
    } 

    .rotate:hover { 
     -webkit-animation: rotate 2s linear infinite; 
     border: 5px dotted blue; 
    } 

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

問題是，我想是兩個div的另一個內（一個大，一個小）就像兩個圓在另一個內部。但是，如果我用這個代碼，它不只是旋轉的邊界......它旋轉在div裏面太...

來源

2014-03-25 Ionut Florin Lupu

顯然你只使用Chrome。你有沒有在Firefox上試過你的演示？ http://jsbin.com/qisir/1/edit :)是的，很好的虛線邊框！ –

@Roko C. Buljan：這是問題所在，請參閱？我只想在一個時間旋轉一圈：http://jsbin.com/xoneruju/5/watch –

@ RokoC.Buljan我希望你明白我現在想在這裏完成什麼.. –

Chrome example

你的問題是，你的孩子DIV已經內一個hovered - >rotatingDIV所以......對非嵌套元素
使用位置絕對：

<div class="rotate1"></div> 
<div class="rotate2"></div>

CSS：

.rotate1, 
.rotate2{ 
    position:absolute; 
    left:0; 
    right:0; 
    margin:0 auto; 
    background: red; 
    border: 5px dashed black; 
    border-radius: 50%; 
} 
.rotate1 { 
    width: 400px; 
    height: 400px; 
} 
.rotate2 { 
    width: 200px; 
    height: 200px; 
    top:100px 
} 

.rotate1:hover, 
.rotate2:hover{ 
    -webkit-animation: rotate 12s linear infinite; 
    border: 5px dashed blue; 
} 

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

你甚至都不需要特殊班級爲您.rotate元素1和2。只需rotate。
Here's an example。

來源

2014-03-25 23:28:00

謝謝！非常感謝！：D這就是我需要的。 –

不客氣。很高興我可以幫你 –

你真的很喜歡寫複雜的CSS :) http://jsbin.com/xoneruju/10/edit –

創建虛擬邊框

回答

相關問題