この効果を実現する方法を聞いてもいいですか? _html/css_WEB-ITnose

マウスを動かすと黒いマスクの下にあるものを見ることができます。これを CSS3 で実装するにはどうすればよいですか?

ディスカッションへの返信 (解決策)

以前にも似たようなことをやったことがありますが、正確な実装方法はわかりません。そのときに Google でインスピレーションを見つけました

js を使用する必要があると思います

。専門家の説明を待ちましょう

一緒に学びましょう

css3を使わない方が面倒です

黒い長方形を4つ用意します（サイズは伸縮可能です）
黒い長方形の画像を用意します。中央に透明な円があります

上記の 5 つのユニットの配置:Absolute zindex -max

4 つの長方形と黒いグラフィックをテストして、画面全体を覆う大きな長方形を形成します (写真は中央にあります)。
(基本的に上、中央(写真の左、右、下))

マウスの座標を使用して実際の位置を決定します 画像の残りの座標は、他の 4 つの長方形のサイズと座標を調整することです

それcss3を使わない方が面倒です css3用のマスクを使うだけです

黒い四角形を4つ用意します（サイズは伸縮可能です）
黒い四角形の真ん中に透明な円の画像を用意します 1つ

上記の5つの単位を配置します。絶対 zindex-max

4 つの長方形と黒いグラフィックをテストして、画面全体を覆う大きな長方形を形成します (画像は中央にあります) 欠陥はありません
(基本的に上、中央 (左の図、右) )。 ... - - それなら真ん中に透明な円を入れた大きな画像も使えます

css3を使わない方が面倒です css3用のマスクを使うだけです

黒い長方形を4つ用意します(サイズは伸縮可能です)
準備します黒 長方形の中央にある透明な円の画像

上記の 5 つの単位の配置: 絶対 zindex-max

4 つの長方形と黒いグラフィックをテストして、画面全体を覆う大きな長方形 (中央の画像) を形成します。欠陥はありますか
(基本 それが上、中央 (左の写真、右) 下です)...

そうですね... 私も昨夜この方法を思いつきました、そしてそれはいまいましい IE と互換性があります。
しかし、CSS3 を使用してこの効果を実現できますか?
その方法を知りたい。 。 。

css3にはマスクスタイル(Flashのマスクレイヤーのようなもの)があります

検索すれば分かります

ただし互換性が良くないので利用価値はあまりありません