ID非公開

2022/1/16 14:42

44回答

CSSで以下の実装は可能でしょうか。もし可能でしたらご教示お願いします!

HTML、CSS | JavaScript116閲覧

ベストアンサー

0
画像

この返信は削除されました

ThanksImg質問者からのお礼コメント

皆さんご対応いただきありがとうございました!皆さんの凄い発想力をお借りできて良かったです。

お礼日時:1/19 0:41

その他の回答(3件)

0

ID非公開さん >・・・・ボタン押下時、中レイヤーに丸い穴が空き、下レイヤーが見える。・・・・・・ ご参考に↓ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> .wrap{ background:#eee; height: 300px; width: 300px; } .mask { width:100%; height:100%; background:#fdd; clip-path: circle(0px); } .acd-check{display: none; } .acd-label{ background: #33c; color: #fff; padding: 4px 8px; display: block; } .acd-check:checked + .acd-label + .mask{ clip-path: circle(100px at 50% 50%); /* 半径 中心座標 */ } </style> </head> <body> <section class="wrap"> <input id="acd-check1" class="acd-check" type="checkbox"> <label class="acd-label" for="acd-check1">ボタン</label> <div class="mask"> <br><br> cssのwidthって左上からのサイズになっちゃうけど、<br> 右からのサイズにできないんですかね?<br><br> cssのwidthって左上からのサイズになっちゃうけど、<br> 右からのサイズにできないんですかね?<br><br> </div> </section> <br> <section class="wrap"> <input id="acd-check2" class="acd-check" type="checkbox"> <label class="acd-label" for="acd-check2">ボタン</label> <div class="mask"> <img src="https://s.yimg.jp/images/ks/official/nt/grd/prf_150.png" > </div> </body> </html>

0

実用性は全くありませんが https://jsfiddle.net/chiebu/vLk7fmy5/ _html <div> <div><p> button </p></div> <div><img src="https://picsum.photos/536/354" alt=""></div> </div> _css div { width: 536px; height: 354px; position: relative; display: flex; align-items: center; justify-content: center; color: #fff; } p { border-radius: 2px; background: plum; padding: .25em 2em; cursor: pointer; box-shadow: 0 10px 10px 8px rgba(0, 0, 0, .15); } div>div { position: absolute; top: 0; left: 0; } div:nth-of-type(1) { z-index: 2; } div:nth-of-type(2) { z-index: 1; } div:nth-of-type(1) { background: rgba(0, 0, 0, 1) radial-gradient(rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 1) 5%) center center no-repeat; background-size: 100% } /* div:nth-of-type(1):hover, */ div:nth-of-type(1):active { background-color: rgba(0, 0, 0, 0); animation: 3s mask; animation-fill-mode: forwards; } @keyframes mask { from { background-size: 100% 100% } to { background-size: 4000% 4000% } }

0

>CSSで以下の実装は可能でしょうか。もし可能でしたらご教示お願いします! >上(ボタン)、中(マスク)、下(コンテンツ)の3レイヤーつくる。 >初期表示は中レイヤーの無地背景と上レイヤーのボタンのみが見える。 >ボタン押下時、中レイヤーに丸い穴が空き、下レイヤーが見える。 はい、どうぞ。 改造するにはCSSの知識が必要です。 改造は自己責任で行って下さい、改造して正常に表示できないとか言われても当方は一切 関知しません。 (ググるのも勉強の内です)本気で勉強したいなら1行1行ググりながら挙動を考察して下さい。 そんなクソみていなこと やってらんね、と言う場合はメンターを雇って下さい。 https://ideone.com/Hy5ZNP