Comment créer un arrière-plan de couleur en fonction de la frontière dans un cercle div?

Question

J'ai essayé de créer un cercle de border devriez regarder de la même couleur que l'div couleur et un espace entre la bordure et div.La en entre l'espace doit afficher la couleur d'arrière-plan de ce que jamais div c'est sur.la couleur de fond est modifiable si nous ne devrions pas coder en dur.

Au lieu de cela, j'ai donné la transparence de l'aide rgba mode.Tous les beaux travaux essaie d'obtenir cet effet sur le vol stationnaire de le cercle, mais je ne pouvais pas en mesure d'obtenir le hover car je suis en train de display:block sur le vol stationnaire et dans l'état normal, il est display:none; Ce sont pour l'après sélecteur donc j'ai essayé cet effet avec le sélecteur.

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>

ÉTAT DU PROBLÈME SUR le vol STATIONNAIRE, il devrait devenir comme CETTE avec des effets si possible Si il n'y a aucun tutoriel pour faire ce que je serai heureux de l'apprendre.Merci

Answer 1

ensemble position:relative; à l' .main et ensemble left/right/top/bottom de la .main:after à zéro et ajouter transition:all ease 0.3s pour animer.

dans le .main:hover:after changement left/right/top/bottom pour -5px.

démo

.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

Ajoutez simplement .main:hover:after pour l'afficher comme block sur le vol stationnaire TRAVAIL DE VIOLON

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

Answer 3

Essayez quelque chose comme ceci

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>

VIOLON

Answer 4

vous pouvez utiliser la boîte de l'ombre au lieu de pseudo-élément :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;

} Si vous il il de la transparence, montrer derrière un dégradé ou une image, vous pouvez toujours utiliser 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%;    
}

Answer 5

Une amélioration (juste pour le record), il a l'idée d'une zone d'ombre que apported par 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;
}

violon