主页 / 问题 / 854165
Accepted
Alexandr_TT
Asked:2020-07-13 19:25:15 +0000 UTC2020-07-13 19:25:15 +0000 UTC

悬停时围绕div圈

  • 772

我有一个太阳形的 div。我只想在悬停时显示一个边框，在对象和边框之间有一个透明的间隙。

在此处输入图像描述

起初我尝试box shadow但无法制作空白区域。它需要纯色。然后我尝试了下面代码中的方式，但没有出现空格。

这是我的代码： 

    .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

当@Janath提出悬停问题时， 围绕 div的圆的松散翻译。

html

4 个回答

  1. 解决方案是background-clip，可以在这里找到：

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

    border有了它，你可以在和下遮挡背景色padding。此属性得到广泛支持：

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

    .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;
}
    <div class="wrapper">
  <div class="sun-quote-pages">   
  </div> 
</div>

    现场演示

    或双边框变体： 

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

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


.wrapper{
  margin-left:150px;
  margin-top:50px;
}
    <div class="wrapper">
  <div class="sun-quote-pages">   
  </div> 
</div>

    现场演示

    当@KIKO Software 贡献者悬停回答时 ，围绕 div的圆形翻译松散。

    • 10
  2. Best Answer

    作为一种选择：

    .sun-quote-pages {
      border-radius: 50%;
        background-color: #f4953b;
        width: 4.1em;
        height: 4.1em;
        transition: 0.5s all;
        position: relative;
    }

    .sun-quote-pages:hover {
         transform: scale(1.3);
    }
    
.sun-quote-pages:after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top:0;
      bottom: 0;
      border-radius: 50%;
      border: 2px solid #f4953b;
      transition: 0.5s all;
}

.sun-quote-pages:hover:after {
      transform: scale(1.15);
}
    

    
    
    .wrapper{
      margin-left:150px;
      margin-top:50px;
    }
    <div class="wrapper">
      <div class="sun-quote-pages">   
      </div> 
    </div>

    • 8 

  3. .sun-quote-pages {

    border-radius: 50%;
    background-color: #f4953b;
    width: 4.1em;
    height: 4.1em;
    padding: 2px;
    border: 2px solid transparent;

    transition: 0.5s;

}

.shadow {
    display: inline-block;
    border-radius: 50%;


}

.sun-quote-pages:hover {

    transform: scale(1.3);
    box-shadow: 0px 0px 0px 5px white, 0px 0px 0px 6px #f4953b;
}


.wrapper {
    margin-left: 150px;
    margin-top: 50px;
}
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper">
 <div class="shadow">
  <div class="sun-quote-pages">   
  </div>
  </div> 
</div>
</body>
</html>

    仅适用于纯背景。不要抛出缺点 - 我写是因为我可以。

    • 7

  4. 这是渐变的另一种 CSS 方式 =)

    let frames = Array(17).fill(0).map((e,i)=>`${i*6.25}%{--c2:hsla(30,100%,60%,${i/17})}`);
document.head.innerHTML += `<style>@keyframes circle {${frames.join('')}}</style>`
    sun {
  --c2: #f930;
  background: radial-gradient(circle at center, 
    #f93f, #f93f 50%, #f930 51%, #f930 54%, var(--c2) 56%, #f930 58%);
  width: 100px;
  height: 100px;
  display: block;
  transition: 1s
}

sun:hover {
  animation: 0.5s circle forwards;
  transform: scale(1.2);
}
    <sun></sun>

    • 2

相关问题