1
擬似セレクタを使用して、CSSクラスにリップル効果を設定しました。 私はそのアニメーションを要素自体の背後から実行したいと思いますが、その方法を見つけることはできません。アニメーション用の擬似要素スタッキング
.button {
\t width: 50px;
\t height: 50px;
\t background: lightblue;
\t position: absolute;
\t top: 50px;
\t left: 50px;
}
i.ripple:before {
\t content: "";
\t position: absolute;
\t border-radius: 50%;
\t width: 30px;
\t height: 30px;
\t background: darkorange;
\t animation: ripple 2s ease-in infinite;
}
@keyframes ripple {
\t 0% {transform: scale(1);opacity: .5;}
\t 100% {transform: scale(8);opacity: 0;}
}<i class="ripple button">test</i>あなたが例を実行する場合は、オレンジ色の円が.buttonクラスから青いボックスの上にある、私はそれが背後になりたいことがわかります。
私はこの問題がこの他の質問に関連していると思います： ::before pseudo-element stacking order issue しかし、それは分かりません。
HM、それは作業を行いますが、私のボタンクラスは、zインデックスを持つ：1。 （例ではありませんが、それは私のせいです）、この解決策を邪魔しているようです。 – Dunnow
@Dunnowこれはこのhtml構造では不可能です。 '.button'の中にテキストを入れるために要素を追加し、バックグラウンド等を設定して、擬似要素がその背後に行くようにする必要があります。ボタンは積み重ね順序を作成するので（*配置され、z-インデックスを持つことでその子が後ろに出ることができ、疑似要素は子要素*です） –
さて、私はZ-インデックスを削除しようとします： 1を自分のコードから取り出し、-1をリップル自体に適用します。ありがとう。 – Dunnow