アニメーション丸いボタンの周りのバー

Question

ボタンを押すと、ボタンの周りのバーがアニメーション化されるべきであるということを達成しようとしています。

これは私がボタンの周囲のローディングバーを作成する方法CSS3のロジックを考えることはできませんよ、私のボタンのCSS

button { 
 
    border: none; 
 
    cursor: pointer; 
 
    color: white; 
 
    width: 60px; 
 
    height: 60px; 
 
    border-radius: 50%; 
 
    font-size: 22px; 
 
    box-shadow: 2px 2px 4px rgba(0, 0, 0, .4); 
 
    background: #2196F3; 
 
} 
 

 
button { 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

 
button:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    width: 5px; 
 
    height: 5px; 
 
    background: rgba(255, 255, 255, .5); 
 
    opacity: 0; 
 
    border-radius: 100%; 
 
    transform: scale(1, 1) translate(-50%); 
 
    transform-origin: 50% 50%; 
 
} 
 

 
@keyframes ripple { 
 
    0% { 
 
    transform: scale(0, 0); 
 
    opacity: 1; 
 
    } 
 
    20% { 
 
    transform: scale(25, 25); 
 
    opacity: 1; 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    transform: scale(40, 40); 
 
    } 
 
} 
 

 
button:focus:not(:active)::after { 
 
    animation: ripple 1s ease-out; 
 
}

<button> 
 
+ 
 
</button>

https://jsfiddle.net/k1a3ha4c/2/

です。誰も助けることができますか？

Answer 1

要素の前に疑似を追加し、ローダーの作成方法についてw3schools guideに従うことができます。

例では、擬似::before要素が作成され、ボタンがクリックされるとスピンアニメーションが呼び出され、イージーインアウト効果で要素が回転します。 animation: spin 1s cubic-bezier(0.46, 0.03, 0.52, 0.96) 1;

例：

button { 
 
    border: none; 
 
    cursor: pointer; 
 
    color: white; 
 
    width: 60px; 
 
    height: 60px; 
 
    border-radius: 50%; 
 
    font-size: 22px; 
 
    box-shadow: 2px 2px 4px rgba(0, 0, 0, .4); 
 
    background: #2196F3; 
 
    outline: none; 
 
} 
 

 
button { 
 
    position: relative; 
 
    // overflow: hidden; 
 
} 
 

 
button:after { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 60px; 
 
    height: 60px; 
 
    top: -5px; 
 
    left: -5px; 
 
    transform-origin: 50% 50%; 
 
    border: 5px solid rgba(0, 0, 0, 0); 
 
    border-top: 5px solid #008744; 
 
    border-radius: 50%; 
 
    opacity: 0; 
 
} 
 

 
button:before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    width: 5px; 
 
    height: 5px; 
 
    background: rgba(255, 255, 255, .5); 
 
    opacity: 0; 
 
    border-radius: 50%; 
 
    transform: scale(1, 1) translate(-50%); 
 
    transform-origin: 50% 50%; 
 
} 
 

 
@keyframes ripple { 
 
    0% { 
 
    transform: scale(0, 0); 
 
    opacity: 1; 
 
    } 
 
    20% { 
 
    transform: scale(15, 15); 
 
    opacity: 1; 
 
    } 
 
    100% { 
 
    transform: scale(20, 20); 
 
    opacity: 0; 
 
    } 
 
} 
 

 
@keyframes spin { 
 
    0% { 
 
    opacity: 1; 
 
    transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    opacity: 1; 
 
    transform: rotate(360deg); 
 
    } 
 
} 
 

 
button:focus:not(:active)::before { 
 
    animation: ripple 1s ease-out; 
 
} 
 

 
button:focus:not(:active)::after { 
 
    animation: spin 1s cubic-bezier(0.46, 0.03, 0.52, 0.96) 1; 
 
}

<button> 
 
+ 
 
</button>

・ホープ、このことができます！