cicrle animation with css

Question

애니메이션을 that처럼 만들고 싶습니다. 그러나 그것은 그렇게 보이지 않습니다. 여기 내 code의 바이올린입니다. 도와주세요.

.effect-1 { 
    position: relative; 
    height: 100px; 
    width: 100px; 
    margin: 100px; 
    border-radius: 50%; 
    display: block; 
    text-align: center; 
    line-height: 100px; 
    background-color: black; 
} 

.effect-1::after { 
    position: absolute; 
    top: -10px; 
    left: -10px; 
    height: 100%; 
    width: 100%; 
    padding: 10px; 
    border-radius: 50%; 
    box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.8); 
    transform: scale(0.7, 0.7); 
    transition: all 0.2s; 
} 

Answer 1

내가 변환하는 반면 (즉, 레이아웃의 흐름에 영향을 미칠 것이기 때문에) 규모가 대신 픽셀 높이/폭을 변경하는, 호버에 transform 속성을 변경하는 것이 좋습니다

제대로 개체에 대한 사용자 정의 계층 작성 또한

.effect { 
 
    position: relative; 
 
    height: 100px; 
 
    width: 100px; 
 
    line-height: 100px; 
 
    border-radius: 50%; 
 
    display: block; 
 
    text-align: center; 
 
    background-color: black; 
 
    color: white; 
 
    font-size: 2em; 
 
    text-decoration: none; 
 
    margin: 1em; 
 
} 
 

 
.effect::before { 
 
    content: ''; 
 
    position: absolute; 
 
    top:0; bottom: 0; left: 0; right: 0; 
 
    margin: auto; 
 
    height: 100%; width: 100%; 
 
    border:5px solid black; 
 
    border-radius: inherit; 
 
    box-sizing: border-box; 
 
    transform: scale(0.5); 
 
    transition: .3s; 
 
} 
 

 
.effect:hover::before { 
 
    transform: scale(1.2); 
 
}

<a href="#" class="btn effect">M</a>

를 전환 속성해야 최적의 결과를 얻으려면 호버 상태 대신 정적 상태에 추가하십시오.

Answer 2

흠 - 당신이 sample page에서 CSS 코드를 복사하지 않았는지 확실하지. 그것은 즉시 작동합니다 https://jsfiddle.net/063djx57/1/

한 가지 중요한 점은, .effect-1:after {position: absolute;}