Tencent Weiyun ブラック マスク ガイド マスクの改善 CSS 実装_html/css_WEB-ITnose

1. Weiyun の実装

Web サイトに変更があった場合、ユーザーに新しい操作位置を理解してもらうために、ガイドが追加されることがよくあります。黒色の半透明マスクを使用し、注意が必要な領域をくりぬきます。

そして、先週の金曜日に威雲に行ったとき、リーダー層も見たので、また職業病を犯し、他の人がどのようにそれを達成したかを学びに行きました。観察の結果は次のとおりです。

中空マスキング効果を実現するために、作者は子供の頃から積み木を組み立てる才能を活かし、2 層の HTML 構造を使用して内部層を形成しました。 5つの独立した領域をつなぎ合わせます。中央の空洞領域は画像を使用して影を実装します。

最終的な効果は製品のニーズを満たしていますが、ユーザーにとっては目的は達成されています。ただし、コードの品質、潜在的なエクスペリエンス向上の可能性、および使用シナリオの幅広さの点では、まだはるかに弱いです。

たとえば、プロンプト領域の 1 つが非常に大きい場合、中央の空洞領域のサイズを変更する必要がありますか?その背後にある背景画像はどうすればよいでしょうか?新しい画像を作成するときに、background-size:cover が使用されているのを見た人がいます。IE7 と IE8 についてはどうですか?ああ、もしかしたら Weiyun は IE7 と IE8 を制御する必要がないかもしれません。

IE7 と IE8 を制御する必要がない場合、ここでの実装はさらに単純に見えます。実際に効果を実現するには、ラベルのレイヤー 1 つと空のラベルのレイヤー 1 つだけが必要で、画像は必要ありません。

2. 私の気づき

は主に考え方の変化にあります。ブロックを構築するというアイデアは誰にとっても比較的容易であり、日常の認識と一致していますが、コードレベルでは、このような大きな半透明のマスクレイヤーを使用して考え方を変えることができます。常に背景色のブロックについて考える必要はありません。従来の考え方を打ち破って、それを非常に大きな境界線 (通常は 1 ピクセルの境界線を使用します) として考えることができます。このようにすると、自然に中空の効果が得られます。 。

下図のように

しかし、中央の空洞部分は現在正方形になっていますが、これを丸くする方法はありますか?

もちろん、方法 1 では、要素に非常に大きな丸い角を設定します。ただし、境界線を画面全体に表示するには、境界線のサイズを大幅に大きくする必要があります。ただし、ページに影響を与えないようにするには、スクロール バーの場合は別のラベルのレイヤーをネストする必要がありますが、これは面倒に思えます。

方法 2 は、方法 1 のいくつかの側面を逆に考えたもので、以下を使用します。現在の要素を外側の制限ラベルとして使用し、適応サイズの角丸効果を実現するために大きなサイズの疑似要素を再生成します。これは、HTML がクリーンで冗長ではなく、CSS が 1 つのステップで配置されるという点で優れています。 (コードは以下に示されています);

.cover::before {    content: '';    width: 100%; height:100%;    border-radius: 50%;    border: 400px solid #000;    position: absolute;    left: -400px; top: -400px;    /* 自己瞎填的参数，示意 */    box-shadow: inset 0 0 5px 2px rgba(0,0,0,.75);}

ご覧のとおり、上記の疑似要素の各パラメータは固定パラメータ値であり、外部要素のサイズとは関係がありません。外部要素のサイズが 400 を超えない限り、正の楕円の内側の影を持つ中空の図形が常に存在します (余分な部分は .cover によって隠されるため)。丸みを帯びた角との関係を理解するために。通常の楕円については、以前の記事「秋の月はいつですか? CSS3 の境界半径についてどれくらい知っていますか?」を参照してください。

百聞は一見に如かず、聞くことは信じる、ここをクリックしてください: Web サイトのガイダンス中空マスク機能のデモを実装するためのラベルのレイヤー (黒いマスク レイヤーをクリックすると、ガイダンスの切り替え効果があります)

デモの中空マスク レイヤーに使用される HTML コードは次のとおりです:

<div class="cover"></div>

はい、とてもシンプルです。ネストはなく、5 つの要素の組み合わせはありません。トランスフォーマーや画像はありません。が使用されています。

Weiyun のこの写真は 3,000 回以上あり、Weiyun へのユーザーのアクセス数に基づくと、トラフィック料金はかなり高額になると推定されます。

さらに、マスクをクリックすると、くり抜かれた領域のサイズが毎回異なり、大きいものと小さいもの、高いものと薄いものがあることがわかります。Weiyun の実装メソッドはこの要件を満たす必要があります。これは難しいです。そして、これらのサイズと位置の変更はすべてアニメーション化されており、パフパフ、パフパフ、パフパフ、パフパフ、パフパフ、パフパフ、パフパフ、のような鈍い効果ではないことに気づいたでしょうか。パフパフ、パフパフ、パフパフ、パフパフ、パフパフ、パフパフ、パフパフ、パフパフ、パフパフ、パフパフ、パフパフ、パフパフ、パフパフ なぜアニメーション効果が得られるのか。 ? なぜなら、私たちのくり抜きと内側の影はすべて CSS によって実装されており、Weiyun の Picture メソッドには明らかにアニメーションを含めることができないからです。

JS コードの支援

もちろん、私の実装も JS の支援から切り離せません。JS の作業は非常に単純です。幅を / にします。マスクレイヤーの高さ そして、境界線のサイズは、ガイドする必要がある要素に関連付けられます。

私は特別にパブリック メソッド coverGuide を作成しました (自分で名前を変更するのは好きではありません):

var coverGuide = function(cover, target) {    var body = document.body, doc = document.documentElement;    if (cover && target) {        // target size(width/height)        var targetWidth = target.clientWidth,            targetHeight = target.clientHeight;        // page size        var pageHeight = doc.scrollHeight,            pageWidth = doc.scrollWidth;                // offset of target            var offsetTop = target.getBoundingClientRect().top + (body.scrollTop || doc.scrollTop),            offsetLeft = target.getBoundingClientRect().left + (body.scrollLeft || doc.scrollLeft);                // set size and border-width        cover.style.width = targetWidth + 'px';        cover.style.height = targetHeight + 'px';            cover.style.borderWidth =             offsetTop + 'px ' +             (pageWidth - targetWidth - offsetLeft) + 'px ' +            (pageHeight - targetHeight - offsetTop) + 'px ' +             offsetLeft + 'px';                cover.style.display = 'block';                    // resize        if (!cover.isResizeBind) {            if (window.addEventListener) {                window.addEventListener('resize', function() {                    coverGuide(cover, target);                });                    cover.isResizeBind = true;            } else if (window.attachEvent) {                window.attachEvent('onresize', function() {                    coverGuide(cover, target);                });                cover.isResizeBind = true;                                // IE7, IE8 box-shadow hack                cover.innerHTML = '<img src="guide-shadow.png">';            }        }    }};

ここでの coverGuide メソッドはネイティブ JS を使用して実装されており、 IE6以降のブラウザで使用可能 互換性があり、JSライブラリに依存せず自由に使用できます。もちろん、厳密な検証もせずに急いで書いたものですので、バグが含まれている可能性もありますので、ご注意ください。

は非常に簡単に使用でき、構文は次のとおりです:

coverGuide(cover, target);

ここで、cover は個々のマスク要素 .cover で、target はボタンなど、ガイドする必要がある要素です。 、ナビゲーションなど。次に、中空領域がターゲットの位置に自動的に配置され、そのサイズもターゲット要素のサイズになります。超安心。

具体使用，可参考上面的demo，源代码就在页面上。

IE7,IE8怎么办

如果你需要兼容IE7,IE8，我们不妨就方框效果；如果设计和产品接受不了，则可以使用图片打个补丁，例如上面JS代码部分的：

cover.innerHTML = '<img src="guide-shadow.png">';

我demo使用的这个图片长下面这样：

大小还有阴影都是我自己随手一搞的，旨在示意，真实项目大家可以向设计师索要图片。

然后，CSS超easy, 图片撑满我们的 cover 就可以。

/* IE7, IE8 img */.cover > img {    width: 100%; height: 100%;    }

三、结束语

这种蒙版覆盖思想呢，不仅仅适用于这种大面积的引导。我们上传图片，尤其上传头像之后，要对头像进行剪裁，常见的交互之一就是四周黑色，中间镂空，也可以使用巨大 border 来实现我们的效果，一层标签足矣，根本不需要上下左右额外4层标签拼接合体实现。

内部自适应的圆角效果单看文字，很多小伙伴估计不知道我在说些什么，建议去demo页面看下伪元素的代码，真实区域大小和最终效果，估计就会明白了。

感谢阅读，欢迎交流，欢迎提供更好的实现方法，一定有的，只是我功力不够。

以上~

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载(图片请勿直接外链)请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。

本文地址： http://www.zhangxinxu.com/wordpress/?p=5290

（本篇完）