昨日家でテレビを見ていたとき、背景全体がぼやけているポップアップ効果に気づきました。この効果は単色や透明よりもはるかに優れていると思い、いくつかのインターフェイスを続けて試しました。最終的に 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 ブラウザーで表示する必要があります。
素晴らしいと思いませんか? この行は、webkit-filter:blur(8px) です。もちろん、日常のプロジェクトでは、ぼかしの度合いを表すピクセル値を追加することもできます。ページをより鮮明にするためのアニメーション。この場合の完全なコードは次のとおりです。
<div class='bg'> <img src='bg.jpg' / alt="JS+CSS3でクールなポップアップエフェクトを作成" > </div> <div class='popus'> 效果是不是要好过纯色加透明呢 <div> <div class='left btn '>确实不错</div> <div class='right btn'>也就那样</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:
$('.bg').on('click',function(){ console.log(98) $(this).addClass('blur'); $('.popus').show(); }) $('.btn').on('click',function(){ $('.bg').removeClass('blur'); $('.popus').hide(); })
これで終わりですか?明らかにそうではありません。コンソールを見てください
ウィンドウをポップアップするとき、他のレイヤーのクリック イベントを無効にする必要がありますが、他のレイヤーをぼかしたにもかかわらず、対応するイベントを無効にしていないことがわかりました。もちろん、解決策も非常に簡単です。背景色なしでマスク レイヤーを追加し、それをページ上で覆うことで、マスク レイヤーをクリックするたびに、基になるイベントがトリガーされなくなります。