実現したい事の追記と、最新のソースを更新しました。
タグで描画している部分のみ、backgroundに敷いている要素を表示し、それ以外は透明にする方法は無いでしょうか?
もちろん、必要であればjsを使うことは構いません。
やりたいこと
波紋のように、ドーナッツ常にマスキングしたいと考えています。
ドーナッツの内側は、background-colorを指定するのではなく、透過させたいです。
実現したいイメージ
下記のように、枠の部分のみ背景を表示したいと考えています。
枠内部は投下されていて、枠の裏にある要素が見えるようにしたいです。
拙い説明画像で申し訳ありません。
ソースコード
HTML
cardというクラスが内側に表示される要素で、
rippleというのが枠の要素になります。
html
1<div class="card"></div> 2<div class="ripple"> 3 <div class="ripple_circle"></div> 4</div> 5
css
説明用のコード自体はSCSSです。
scss
1body { 2 margin: 0; 3 display: grid; 4 height: 100vh; 5 place-items: center; 6 background-color: #000; 7} 8 9// 真ん中に表示する要素 10.card { 11 height: 100px; 12 width: 100px; 13 background-color: red; 14 margin-top: 20px; 15} 16 17// 枠要素 18.ripple { 19 position: absolute; 20 width: 400px; 21 height: 400px; 22 top: 50%; 23 left: 50%; 24 background: url(https://dl.dropbox.com/s/wwvut9frq0k4ukf/3_512.jpg); 25 clip-path: circle(50px at 50% 50%); 26 transform: translate(-50%, -50%); 27 animation: wow 2s ease-out forwards infinite; 28 &_circle { 29 position: absolute; 30 width: 100%; 31 height: 100%; 32 &::after { 33 content: ''; 34 position: absolute; 35 border-radius: 50%; 36 top: 50%; 37 left: 50%; 38 background-color: rgba(0,0,0,0); 39 background-clip: padding-box; 40 transform: translate(-50%, -50%); 41 animation: riple01 2s ease-out forwards infinite; 42 } 43 } 44} 45 46@keyframes wow { 47 0%{ 48 clip-path: circle(0px at 50% 50%); 49 } 50 20%{ 51 clip-path: circle(50px at 50% 50%); 52 } 53 100%{ 54 clip-path: circle(200px at 50% 50%); 55 } 56} 57 58@keyframes riple01 { 59 0% { 60 } 61 20% { 62 width: 0; 63 height: 0; 64 } 65 100% { 66 width: 100%; 67 height: 100%; 68 } 69}
codepen
下記で動的に動く要素については確認できます。
https://codepen.io/websandbag/pen/RejOZp
追記
jjj_aaa様よりご共有いただいたソースを参考に、白い枠に要素を表示する事は実現方法を追記しました。
枠の後ろにある要素を透過する事はまだ実現できていません。
https://codepen.io/websandbag/pen/EdogaM
上記のソースでは、透過したい部分を半透明にしています。
実際は、半透明の部分を透明して後ろに配置している赤い要素を見えるようにしたいです。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/10/16 08:47
2018/10/16 08:50
退会済みユーザー
2018/10/16 08:54
2018/10/16 09:03
2018/10/16 10:52
2018/10/16 11:06
2018/10/16 12:13
2018/10/16 12:32 編集