Wie erstelle ich einen auf der Hintergrundfarbe basierenden Rahmen in einem Kreis-Div?

Question

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

Answer 1

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.

Demo

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

Answer 2

Einfach hinzufügen .main:hover:after um es anzuzeigen als block im Schwebeflug ARBEITSGEIGE

.main:hover:after{
    display:block; 
}

Answer 3

Versuchen Sie so etwas, so etwas

css:

generasacodicetagpre.

html:

generasacodicetagpre.

Geige

Answer 4

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.

Answer 5

eine Verbesserung (nur für den Aufzeichnungen) auf die Idee eines Kastenschattens, wie er von GCYRILLUS aufgestützt ist

generasacodicetagpre.

feige