[CSS]動的に動く要素でマスキングを行う方法は無いでしょうか？

Question

実現したい事の追記と、最新のソースを更新しました。

---

タグで描画している部分のみ、backgroundに敷いている要素を表示し、それ以外は透明にする方法は無いでしょうか？
もちろん、必要であればjsを使うことは構いません。

やりたいこと

波紋のように、ドーナッツ常にマスキングしたいと考えています。
ドーナッツの内側は、background-colorを指定するのではなく、透過させたいです。

実現したいイメージ

下記のように、枠の部分のみ背景を表示したいと考えています。
枠内部は投下されていて、枠の裏にある要素が見えるようにしたいです。

拙い説明画像で申し訳ありません。

ソースコード

HTML

cardというクラスが内側に表示される要素で、
rippleというのが枠の要素になります。

<div class="card"></div>
<div class="ripple">
  <div class="ripple_circle"></div>
</div>

css

説明用のコード自体はSCSSです。

body {
  margin: 0;
  display: grid;
  height: 100vh;
  place-items: center;
  background-color: #000;
}

// 真ん中に表示する要素
.card {
  height: 100px;
  width: 100px;
  background-color: red;
  margin-top: 20px;
}

// 枠要素
.ripple {
  position: absolute;
  width: 400px;
  height: 400px;
  top: 50%;
  left: 50%;
  background: url(https://dl.dropbox.com/s/wwvut9frq0k4ukf/3_512.jpg);
  clip-path:  circle(50px at 50% 50%);
  transform: translate(-50%, -50%);
  animation: wow 2s ease-out forwards infinite;
  &_circle {
    position: absolute;
    width: 100%;
    height: 100%;
    &::after {
      content: '';
      position: absolute;
      border-radius: 50%;
      top: 50%;
      left: 50%;
      background-color: rgba(0,0,0,0);
      background-clip: padding-box;
      transform: translate(-50%, -50%);
      animation: riple01 2s ease-out forwards infinite;
    } 
  }
}

@keyframes wow {
  0%{
    clip-path:  circle(0px at 50% 50%);
  }
  20%{
    clip-path:  circle(50px at 50% 50%);
  }
  100%{
    clip-path:  circle(200px at 50% 50%);
  }
}

@keyframes riple01 {
  0% {
  }
  20% {
    width: 0;
    height: 0;
  }
  100% {
    width: 100%;
    height: 100%;
  }
}

codepen

下記で動的に動く要素については確認できます。
https://codepen.io/websandbag/pen/RejOZp

追記

jjj_aaa様よりご共有いただいたソースを参考に、白い枠に要素を表示する事は実現方法を追記しました。
枠の後ろにある要素を透過する事はまだ実現できていません。

https://codepen.io/websandbag/pen/EdogaM

上記のソースでは、透過したい部分を半透明にしています。
実際は、半透明の部分を透明して後ろに配置している赤い要素を見えるようにしたいです。

Answer 1

汚いですが以下でどうでしょうか。アニメーションwowを追加してclip-pathであれこれしてます。
codepen

一応やりたいことはできてるぽいですが、思ってる実装とは違うかも・・保守性も低い！

border部分だけ親CSSを透過設定みたいなことができればいいんですけどねぇ～

追伸：きたねぇSCSSもはっときます。もし使ってくれるならきれいにしたりしてください！

body {
  margin: 0;
  display: grid;
  height: 100vh;
  
  place-items: center;
  
  background-color: #000;
}

.ripple {
  position: absolute;
  width: 400px;
  height: 400px;
  top: 50%;
  left: 50%;
  background: url(https://dl.dropbox.com/s/wwvut9frq0k4ukf/3_512.jpg);
    clip-path:  circle(50px at 50% 50%);
    transform: translate(-50%, -50%);
    animation: wow 2s ease-out forwards infinite;
  &_circle {
    position: absolute;
    width: 100%;
    height: 100%;
    &::after {
    content: '';
    	position: absolute;
    border-radius: 50%;
    top: 50%;
    left: 50%;
      background-color: black;
      background-clip: padding-box;
      transform: translate(-50%, -50%);
      animation: riple01 2s ease-out forwards infinite;
    } 
  }
}

@keyframes wow {
  0%{
  clip-path:  circle(0px at 50% 50%);
  }
  20%{
  clip-path:  circle(50px at 50% 50%);
  }
  100%{
  clip-path:  circle(200px at 50% 50%);
  }
}

@keyframes riple01 {
  0% {
  }
  20% {
    width: 0;
    height: 0;
  }
  100% {
    width: 100%;
    height: 100%;
  }
}

Comments

[hasshy]

ご回答ありがとうございます！
実現したい内容です。
しかも、codepenのソースをフォークして描いていただいたのですね。
ありがとうございます。助かります。

clip-pathで、円形にマスキングできたんですね…。
勉強になります。

[hasshy]

ソースコードも私のソースを継承して作っていただいて見やすいです。
ありがとうございます。

[退会済みユーザー]

よかったです。
一応補足で、、、「きたねぇ」ってのは私が書いた部分(重複プロパティとかあるかも＋インデントもハチャメチャが押し寄せてきている)で、継承元のhasshy様のSCSSのことでないのであしからず。

[hasshy]

承知です。
泣いている場合じゃないですね。

[hasshy]

ソースを拝見させていただき、色々検討して見たのですが、
枠の内側を透過して、後ろの要素を表示するのは出来なさそうですね…。

> border部分だけ親CSSを透過設定みたいなことができればいいんですけどねぇ～
この一言に尽きますね…。

[iev39526]

横からすいません。
z-indexで赤い要素を前に出して、それに枠と同じようにアニメーションをかけるとか、そういうことでは実現できないでしょうか？
素人考えなので合っているかわからないですが…。
https://codepen.io/anon/pen/pxpRvE

[hasshy]

>> iev39526
いえいえ、ご助言いただけるだけでありがたいです。
コードもフォークして、改良していただきありがとうございます！

拝見させていただきました。
確かに、おっしゃる通り枠に合わせて中の要素も伸縮させる方法もありますね。
枠と同じ原理で、後ろの要素も徐々に見せる方法はありかもしれません。

ただ、検証では1つしか波紋を作っていませんが、最終的には複数の波紋を組み合わせて使用します。
こちらの説明不足で、申し訳ありません。
アニメーションの開始もスピードも異なったり、後ろの要素が可変なので難しいですね。

[iev39526]

>> hasshyさん
そういっていただけると嬉しいです^^。

なるほど…。複数の波紋を表現したかったのですね。
となると、Pure CSSで行うには少しハードルの高いアニメーションだと思います。

そこまで複雑になるのであれば、「一部(もしくは全体)のパーツをSVGで作って、それをCSSやJSなどでガチャガチャ動かす」という方向で実装していくほうが、後々の変更などへの対応も楽かな、と思いました(これもまた、素人考えですが;)。

これ以上jjj_aaaさんの回答を汚してしまうといけないので、これにて失礼します～。

Answer 2

こういうことでしょうか？

body {
  margin: 0;
  display: grid;
  height: 100vh;
  place-items: center;
  background-color: #000;
}

.ripple {
  position: absolute;
  width: 400px;
  height: 400px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  &_circle {
    position: absolute;
    width: 100%;
    height: 100%;
    &::after {
  	  content: '';
    	position: absolute;
	    border-radius: 50%;
  	  top: 50%;
  	  left: 50%;
  	  border: 0px solid #ffffff;
      transform: translate(-50%, -50%);
      animation: riple01 2s ease-out forwards infinite;
    } 
  }
}

@keyframes riple01 {
  0% {
    border: 0 solid #f8bbd0;
    background: #000 url(https://dl.dropbox.com/s/wwvut9frq0k4ukf/3_512.jpg);
  }
  20% {
    width: 0;
    height: 0;
    border: 50px solid #fff;
  }
  100% {
    width: 100%;
    height: 100%;
    border: 0px solid #fff;
    background: #000 url(https://dl.dropbox.com/s/wwvut9frq0k4ukf/3_512.jpg);
  }
}

Comments

[kei344]

コードブロックのラベルはCSSでなくSCSSでは？

[root_jp]

変更しました。ご指摘ありがとうございます。

[hasshy]

ご回答いただきありがとうございます！
下記に再現させていただきました。
https://codepen.io/websandbag/pen/zmpvxP

説明不足で申し訳ございませんが、実現したいものとは違います。
枠の内側ではなく、枠自体に背景を表示したいです。