Come creare un bordo basato sul colore di sfondo in un div cerchio?
Domanda
Ho cercato di creare un cerchio che border
dovrebbe avere lo stesso colore di div color e uno spazio tra il bordo e div.Lo spazio intermedio dovrebbe mostrare il colore di sfondo di ciò che è mai div.il colore di sfondo è variabile, quindi non dovremmo hardcode esso.
Invece ho dato trasparenza usando rgba
modalità.Tutto funziona bene sto cercando di ottenere questo effetto al passaggio del cerchio ma non sono riuscito a ottenere il passaggio del mouse perché sto cercando di display:block
al passaggio del mouse e in stato normale è display:none;
Questo è per il selettore after quindi ho provato questo effetto con after selector.
CODICE CSS
.main{
width:80px;
height:80px;
border-radius:100%;
background-color:#007eff;
text-align:center;
line-height:80px;
}
.main:hover + .main:after{
display:block;
}
.main:after{
width:86px;
height:86px;
border-radius:100%;
background:rgba(255,255,255,0.1);
border:2px solid #007eff;
position:absolute;
content:"";
z-index:-1;
top:3px;
left:3px;
display:none;
}
body{
background-color:#888;
}
HTML
<div class="main"><i class="fa fa-camera-retro fa-lg"></i>
</div>
STATO DEL PROBLEMA AL PASSAGGIO del MOUSE dovrebbe diventare come QUESTO con effetti se possibile Se c'è qualche tutorial per fare questo sarò felice di imparare.Grazie
Soluzione
impostare position:relative;
alla .main
e impostare left/right/top/bottom
del .main:after
a zero e aggiungere transition:all ease 0.3s
per animare.
nel .main:hover:after
cambiare left/right/top/bottom
per -5px
.
.main{
width:80px;
height:80px;
border-radius:100%;
background-color:#007eff;
text-align:center;
line-height:80px;
position:relative;
margin:6px;
}
.main:after{
border-radius:100%;
background:rgba(255,255,255,0.1);
border:2px solid #007eff;
position:absolute;
content:"";
z-index:-1;
top:0px;
left:0;
bottom:0;
right:0;
transition:all ease 0.3s;
}
.main:hover:after{
top:-5px;
bottom:-5px;
right:-5px;
left:-5px;
}
Altri suggerimenti
Basta aggiungere .main:hover:after
per visualizzarlo come block
al passaggio del mouse VIOLINO DI LAVORO
.main:hover:after{
display:block;
}
Prova qualcosa del genere
CSS :
.main{
width:80px;
height:80px;
border-radius:100%;
background-color:#007eff;
text-align:center;
line-height:80px;
}
.main:hover:after{
width:86px;
height:86px;
border-radius:100%;
background:rgba(255,255,255,0.1);
border:2px solid #007eff;
position:absolute;
content:"";
z-index:111;
top:3px;
left:3px;
}
body{
background-color:#888;
}
HTML :
<div class="main"><i class="fa fa-camera-retro fa-lg"></i>
</div>
puoi usare box-shadow invece pseudo-elemento :http://jsfiddle.net/Ku6BQ/24/
.main {
width:80px;
height:80px;
border-radius:100%;
background-color:#007eff;
text-align:center;
line-height:80px;
}
.main:hover {
box-shadow: 0 0 0 4px #888888, 0 0 0 6px #007eff;
}
body {
background-color:#888;
} Se è trasparente e mostra dietro un gradiente o un'immagine, è comunque possibile utilizzare box-shadow : http://jsfiddle.net/Ku6BQ/25/ http://jsfiddle.net/Ku6BQ/26/
.main {
width:80px;
height:80px;
border-radius:100%;
box-shadow:inset 0 0 0 100px #007eff;
text-align:center;
line-height:80px;
}
.main:hover {
border:4px transparent solid;
margin:-4px;
box-shadow: 0 0 0 2px #007eff,
inset 0 0 0 100px #007eff;;
}
html {
background :#888 url(http://lorempixel.com/200/200/nature) repeat;
height:100%;
}
Un miglioramento (solo per la cronaca) sull'idea di un'ombra di scatola come apported da GCyrillus
.main {
width:80px;
height:80px;
border-radius:100%;
background-color:#007eff;
text-align:center;
line-height:80px;
border: solid 4px transparent;
background-clip: padding-box;
box-shadow: 0 0 0 0px white;
-webkit-transition: all 1s;
transition: all 1s;
}
.main:hover {
box-shadow: 0 0 0 6px #007eff;
}
body {
background-color:#888;
}