JS+CSS3でクールなポップアップエフェクトを作成-PHP开发-php.cn

JS+CSS3でクールなポップアップエフェクトを作成

高洛峰

リリース： 2016-12-07 13:50:48

オリジナル

1624 人が閲覧しました

昨日家でテレビを見ていたとき、背景全体がぼやけているポップアップ効果に気づきました。この効果は単色や透明よりもはるかに優れていると思い、いくつかのインターフェイスを続けて試しました。最終的に css で効果が得られると判断したので、今朝早く会社に来て急いで検索しましたが、互換性は非常に悪いですが、CSS 属性 1 つだけで実現できます。私はあまりにも知識が少ないと感じました~~

まず、ポップアップウィンドウの実装を思い出してください。通常、ポップアップウィンドウレイヤー (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 属性を通じて設定されます。 value のパーセントは幅と高さに対する相対値なので、原理的には最初の書き込み方法と同じですが、より便利に使用できます。 topicトピックに戻って、メイントピックに戻りましょう。これは、要素がPSでガウスぼかし効果を達成できるようにすることです。

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

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

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

<div class=&#39;bg&#39;>
 <img  src=&#39;bg.jpg&#39; / alt="JS+CSS3でクールなポップアップエフェクトを作成" >
</div>
<div class=&#39;popus&#39;>
 效果是不是要好过纯色加透明呢
 <div>
 <div class=&#39;left btn &#39;>确实不错</div>
 <div class=&#39;right btn&#39;>也就那样</div>
 </div>
</div>

ログイン後にコピー

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 div{width:220px;margin:10px auto}
.popus div.btn{width:80px;padding:5px 10px;color:#000}
.left{float:left;border:1px solid #000}
.popus div.btn.right{float:right;color:#666}

ログイン後にコピー

js:

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

ログイン後にコピー

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

JS+CSS3でクールなポップアップエフェクトを作成ウィンドウをポップアップするとき、他のレイヤーのクリックイベントを無効にする必要がありますが、他のレイヤーをぼかしたにもかかわらず、対応するイベントを無効にしていないことがわかりました。もちろん、解決策も非常に簡単です。背景色なしでマスクレイヤーを追加し、それをページ上で覆うことで、マスクレイヤーをクリックするたびに、基になるイベントがトリガーされなくなります。