當懸停在圓圈（黃色）外部邊界（高度和寬度）內時需要從中心增加（有生命力）並在相同位置圓圈？

Question

當內圓（黃色）的外部邊界（高度和寬度）懸停需要增加（動畫）從中心位置的中心和圓（黃色）的內部邊界

{ 
 
    background-color: yellow; 
 
    border-radius: 50%; 
 
    border: 1px solid grey; 
 
    padding: 10px; 
 
} 
 

 
.circle { 
 
    position: absolute; 
 
    border: 5px solid #000; 
 
    border-radius: 50%; 
 
    width: 40px; 
 
    height: 40px; 
 
    transition: width 0.5s, height 0.5s; 
 
} 
 

 
.circle:hover { 
 
    width: 60px; 
 
    height: 60px; 
 
}

<div class="circle"> 
 
    <span><a><i class="icon_social fa fa-facebook-square"></i></a></span> 
 
</div>

Answer 1

你可以寫CSS即

 

 
html { 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
*, *:before, *:after { 
 
    -moz-box-sizing: inherit; 
 
    -webkit-box-sizing: inherit; 
 
    box-sizing: inherit; 
 
} 
 
.circle { 
 
    border-radius: 50%; 
 
    height: 40px; 
 
    margin-top: 20px; 
 
    position: relative; 
 
    transition: all 0.5s ease 0s; 
 
    width: 40px; 
 
} 
 
.circle::before { 
 
    border: 4px solid #000; 
 
    border-radius: 50%; 
 
    bottom: 0; 
 
    content: ""; 
 
    height: 100%; 
 
    left: 0; 
 
    margin: auto; 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
    -webkit-transition: all 0.5s ease 0s; 
 
    transition: all 0.5s ease 0s; 
 
    width: 100%; 
 
} 
 
.circle:hover::before { 
 
    -webkit-transform: scale(1.2); 
 
    transform: scale(1.2); 
 
} 
 
.circle span { 
 
    display: block; 
 
    height: 100%; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    width: 100%; 
 
} 
 
.circle a { 
 
    left: 50%; 
 
    margin: auto; 
 
    position: absolute; 
 
    text-align: center; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 
i { 
 
    background-color: yellow; 
 
    border: 1px solid grey; 
 
    border-radius: 50%; 
 
    display: block; 
 
    padding: 10px; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
}

<div class="circle"> 
 
    <span><a><i class="icon_social fa fa-facebook-square"></i></a></span> 
 
</div>

Answer 2

它可以幫助你..！

* {box-sizing: border-box;} 
 
.holder {position: relative; display: inline-block; padding: 10px; border-radius: 50%; margin: 100px;} 
 
.circle {position: absolute; top: 0px; left: 0px; border: solid 5px #000; width: 100%; height: 100%; border-radius: 50%; transition: all 0.3s ease;} 
 
i {background: yellow; padding: 10px; border-radius: 50%;} 
 
.circle:hover {transform: scale(1.2);}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class="holder"> 
 
\t <i class="fa fa-facebook-square"></i> 
 
\t <div class="circle"></div> 
 
</div>