JS と CSS3 を使用してクールなポップアップ効果を作成する方法

この記事では、js と css3 を使用して作成されたクールなポップアップ ウィンドウ効果を紹介します。背景全体がぼかされており、単色と透明よりもはるかに優れています。 JSのポップアップエフェクトに興味のあるお友達、一緒に学びましょう

昨日家でテレビを見ていたら、終了時にポップアップエフェクトが表示され、背景全体がぼやけていて、このエフェクトがとてもクールだと思いました。と、ソリッドカラーや透明度よりもずっと良かったので、いくつかのインターフェイスを続けて試してみたところ、最終的には CSS によって効果が得られると判断したので、互換性は非常に悪かったのですが、すぐに検索しました。 1 つの CSS 属性だけで実行できます。私はあまりにも知識が少ないとすぐに感じました~~

まず、ポップアップ ウィンドウの実装を思い出してください。通常、ポップアップ ウィンドウ レイヤー (popus) とマスク レイヤー (マスク) の 2 つのレイヤーに分かれています。 , 私はこれら 2 つのレイヤーに慣れています。すべての要素が固定位置に設定されています。実際に試してみると、絶対値との具体的な違いがわかります。マスク レイヤーには、画面全体をカバーするために次のようにプロパティを設定する必要はありません。

.mask{position:fixed;top:0px;bottom:0px;left:0px;right:0px;background-color:#000;opacity:0.6;filter:alpha(opacity=60)}

Popus レイヤーは少し面倒です。ここでは 2 つの実装方法があります

1. 以下に示すように、既知のサイズのポップアップ ウィンドウは主に上、左、および負のマージンを通じて実装されます。 。

.popus{width:300px;height:200px;position:fixed;left:50%;top:50%;margin-left:-150px;margin-top:-100px;background-color:#000}

2. ポップアップウィンドウのサイズが不明な場合は、ポップアップウィンドウレイヤーの幅と高さをjsで取得し、上記のように設定しますが、ここでは説明しません。

3. css3 がサポートされている場合、ポップアップ ウィンドウの幅と高さを知る必要はありません。次のように設定できます

.popus{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%)}

主に、translate 属性を通じて設定されます。パーセントは自身の幅に相対的なものであるため、原理的には最初の書き込み方法と似ていますが、より便利に使用できます。下 下

、本題に戻りましょう。つまり、PS で要素にガウス 曖昧の効果を実現させます。

ここに CSS 属性があります: filter ここでのフィルターは IE のフィルターではないことに注意してください。興味がある場合は、ここをクリックしてください。今日はぼかしの 1 つだけについて説明します。まず、以下のプレビューをご覧ください

PS: 現在、この属性は Webkit ブラウザーのみをサポートしているため、css3 属性を直接使用しており、効果も Webkit ブラウザーで表示する必要があります。

素晴らしいと思いませんか? 動作するコードはこの行だけです - webkit-filter:blur(8px) もちろん、日常のプロジェクトでぼかしの度合いを表すこともできます。ページをより鮮明にするためのアニメーション。この場合の完全なコードは次のとおりです。

<p class=&#39;bg&#39;>
 <img src=&#39;bg.jpg&#39; />
</p>
<p class=&#39;popus&#39;>
 效果是不是要好过纯色加透明呢
 <p>
 <p class=&#39;left btn &#39;>确实不错</p>
 <p class=&#39;right btn&#39;>也就那样</p>
 </p>
</p>

css:

*{padding:0px;margin:0px}
img{width:100%;margin:0px auto;display:block}
.bg.blur{-webkit-filter:blur(8px)}
.popus{width:400px;color:#000;;position:fixed;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);font-family:"微软雅黑";padding:20px 0px;font-weight:bold;background-color:rgba(255,255,255,0.6);border-radius:18px;text-align:center;padding:30px 0px;box-shadow:0px 0px 10px rgba(0,0,0,0.4);display:none}
.popus p{width:220px;margin:10px auto}
.popus p.btn{width:80px;padding:5px 10px;color:#000}
.left{float:left;border:1px solid #000}
.popus p.btn.right{float:right;color:#666}

js:

$('.bg').on('click',function(){
 console.log(98)
 $(this).addClass('blur');
 $('.popus').show();
})
$('.btn').on('click',function(){
 $('.bg').removeClass('blur');
 $('.popus').hide();
})

これで終わりですか?明らかにそうではありません。コンソールを見てください

ウィンドウをポップアップするとき、他のレイヤーのクリック イベントを無効にする必要がありますが、他のレイヤーをぼかしたにもかかわらず、対応するイベントを無効にしていないことがわかりました。もちろん、解決策も非常に簡単です。背景色なしでマスク レイヤーを追加し、それをページ上で覆うことで、マスク レイヤーをクリックするたびに、基になるイベントがトリガーされなくなります。
上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項: 回転効果を実現するための
js と css3

クリックボタンでの水の波紋効果を実現するための JS と Canves

画像のウォーターフォールフローの動的読み込みを実装するための JavaScript 🎜🎜🎜🎜 🎜 🎜🎜

以上がJS と CSS3 を使用してクールなポップアップ効果を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。