Окружность вокруг div при наведении курсора

#html #css #css3 #html5 #анимация

У меня есть 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;
    }
    

      
   
      
 
    


  

Что мне здесь не хватает?  

Jsfiddle
    

Ответы

Ответ 1

Как вариант:



.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;
    }

      
   
      
 
    


Ответ 2

Решением является 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;
}

  
   
  
 





Live Demo 

Или вариант с двойной границей: 



.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;
}

  
   
  
 





Live Demo

Источник ответа


Ответ 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;
}



    
    
    



 

  
   
  
  
 







Работает только на однотонном фоне.Минусами не кидайтесь - написал потому что мог.


Ответ 4

Вот еще CSS способ на градиенте =)



let frames = Array(17).fill(0).map((e,i)=>`${i*6.25}%{--c2:hsla(30,100%,60%,${i/17})}`);
document.head.innerHTML += ``
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);
}