Wie erstelle ich einen auf der Hintergrundfarbe basierenden Rahmen in einem Kreis-Div?
Frage
Ich habe versucht, einen Kreis zu erstellen, der border
sollte in der gleichen Farbe wie die Div-Farbe aussehen und zwischen dem Rand und dem Div ein Leerzeichen sein.Der Zwischenraum sollte die Hintergrundfarbe des jeweiligen Divs anzeigen, auf dem es sich befindet.Die Hintergrundfarbe ist veränderbar, daher sollten wir sie nicht fest codieren.
Stattdessen habe ich Transparenz mit gegeben rgba
Modus.Alles funktioniert gut. Ich versuche, diesen Effekt beim Schweben des Kreises zu erzielen, aber ich konnte den Schwebeflug nicht hinbekommen, weil ich es versuche display:block
Im Schwebeflug und im Normalzustand ist es so display:none;
Dies gilt für den After-Selektor, daher habe ich diesen Effekt mit dem After-Selektor ausprobiert.
Code 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>
PROBLEMSTATUSIm Schwebeflug sollte es so aussehen DAS Mit Effekten, wenn möglich, wenn es ein Tutorial gibt, um dies zu tun, werde ich gerne lernen.Danke
Lösung
Satz position:relative;
zum .main
und eingestellt left/right/top/bottom
des .main:after
auf Null setzen und addieren transition:all ease 0.3s
zum Animieren.
im .main:hover:after
ändern left/right/top/bottom
Zu -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;
}
Andere Tipps
Einfach hinzufügen .main:hover:after
um es anzuzeigen als block
im Schwebeflug ARBEITSGEIGE
.main:hover:after{
display:block;
}
Sie können den Kästchen-Shadow statt Pseudo-Element verwenden: http://jsfiddle.net/ku6bq/24/
generasacodicetagpre.} Wenn Sie es transparent und hinter einem Farbverlauf oder einem Bild zeigen, verwenden Sie möglicherweise den Box-Shadow: http://jsfiddle.net/ku6bq/25/ http://jsfiddle.net/ku6bq/26/
generasacodicetagpre.eine Verbesserung (nur für den Aufzeichnungen) auf die Idee eines Kastenschattens, wie er von GCYRILLUS aufgestützt ist
generasacodicetagpre.