懸停時圍繞div旋轉

Question

我有一個太陽形div。 我只想在懸停邊框和對象之間的透明間隙懸停時顯示邊框。

首先，我嘗試使用盒子陰影，但不能產生白色間隙。 它需要純色，然后我嘗試這種方式。 但差距並沒有出現。

這是我的代碼。

  .sun-quote-pages{ border-radius: 50%; background-color: #f4953b; width: 4.1em; height: 4.1em; border: 2px solid transparent; transition: transform 0.5s ease, background 0.5s ease, box-shadow 0.5s ease; } .sun-quote-pages:hover { transform: scale(1.3); border: 2px solid #f4953b; margin: 2px; padding: 2px; } .wrapper{ margin-left:150px; margin-top:50px; } 

  <div class="wrapper"> <div class="sun-quote-pages"> </div> </div> 

我在這里錯過了什么？

的jsfiddle

Answer 1

解決方案是在這里找到的'background-clip'：

https://css-tricks.com/transparent-borders-with-background-clip/

有了它，您可以防止背景顏色在邊框和填充下流動。 它得到廣泛支持：

https://caniuse.com/#search=background-clip

所以你的CSS會變成：

.sun-quote-pages{
  border-radius: 50%;
    background-color: #f4953b;
    width: 4.1em;
    height: 4.1em;
    padding: 2px; 
    border: 2px solid transparent;
    background-clip: content-box;
    transition: transform 0.5s ease, border 0.5s ease;
}

.sun-quote-pages:hover {
    border: 2px solid #f4953b;
    transform: scale(1.3);
}


.wrapper{
  margin-left:150px;
  margin-top:50px;
}

請參閱： https ： //jsfiddle.net/auzjv4rp/11

或者為什么沒有雙邊框？

請參閱： https ： //jsfiddle.net/auzjv4rp/13

Answer 2

 .sun-quote-pages:hover { transform: scale(1.3); } .sun-quote-pages:hover::after { border: 2px solid #f4953b; } .sun-quote-pages{ width: 4.1em; height: 4.1em; margin: 20px auto; border-style: ridge; border: 2px solid transparent; border-spacing:10px; border-radius: 50%; position:relative; background-color: #f4953b; transition: transform 0.5s ease, background 0.5s ease, box-shadow 0.5s ease; } .sun-quote-pages:after { content: ''; position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px; border: 2px solid transparent; border-radius: 50%; } .wrapper{ margin-left:150px; margin-top:50px; } 

  <div class="wrapper"> <div class="sun-quote-pages"> </div> </div> <style> 

嘗試這個..

Answer 3

嘗試這個

 .sun-quote-pages{ border-radius: 50%; background-color: #f4953b; width: 4.1em; height: 4.1em; border: 2px solid transparent; transition: transform 0.5s ease, background 0.5s ease, box-shadow 0.5s ease; position:relative; box-sizing: border-box; } .sun-quote-pages:hover { border: solid 2px #f4953b; padding: 5px; background-clip: content-box; /* support: IE9+ */ background-color: #f4953b; transform: scale(1.3); } .wrapper{ margin-left:150px; margin-top:50px; } 

 <div class="wrapper"> <div class="sun-quote-pages"> </div> </div> 

小提琴： https ： //jsfiddle.net/fpow9ahc/

Answer 4

您可以像使用:before屬性一樣實現。 添加以下CSS並嘗試：

.sun-quote-pages:before{
    content: "";
    position: absolute;
    top: -5px;
    right: -5px;
    bottom: -5px;
    left: -5px;  
    border-radius: 50%;
}

.sun-quote-pages:hover:before {
    border: 2px solid #f4953b;
}

見JSfiddle： https ：//jsfiddle.net/qsb6y0rc/75/

Answer 5

您可以使用width: 0 background-color ， shadow和border創建sun元素

<div class="sun"></div>

.sun {
    background-color: #f4953b;
    height: 80px;
    width: 80px;
    box-sizing: border-box;
    border-radius: 50%;
    box-shadow: 0 0 0 3px #f3f5f6 inset;
    border: solid 0 #f4953b;
    transition: border-width 0.3s linear;
}

然后在懸停時，只需為border-width設置動畫：

.sun:hover {
    border-width: 3px;
}

這是一個有效的演示 ：

Answer 6

你可以使用css偽選擇器:after ，其大小比原始元素大。 設置此元素transparent背景和與原始元素相同的邊框顏色，如下所示：

 body { background: gray; } .sun-quote-pages{ border-radius: 50%; background-color: #f4953b; width: 70px; height: 70px; transition: transform 0.5s ease, background 0.5s ease; } .sun-quote-pages::after { content: "\\00a0"; display: block; background: transparent; height: 80px; width: 80px; border-radius: 50%; border:2px solid #f4953b; opacity: 0; box-sizing: border-box; transition: opacity 0.5s ease 0.5s; transform: translate(-5px,-5px); } .sun-quote-pages:hover { transform: scale(1.3); } .sun-quote-pages:hover::after { opacity: 1; } .wrapper{ margin-left:150px; margin-top:50px; } 

 <div class="wrapper"> <div class="sun-quote-pages"> </div> </div> 

Answer 7

這是一個使用radial-gradient的想法

 .sun-quote-pages { border-radius: 50%; background: radial-gradient(circle at center,#f4953b 54%,transparent 56%,transparent 65%,#f4953b 66%); background-color: #f4953b; width: 4.1em; height: 4.1em; border: 2px solid transparent; transition: transform 0.5s ease, background 0.5s ease, box-shadow 0.5s ease; } .sun-quote-pages:hover { transform: scale(1.3); background-color:transparent; } .wrapper { margin-left: 150px; margin-top: 50px; } 

 <div class="wrapper"> <div class="sun-quote-pages"> </div> </div>