So erstellen Sie coole Popup-Effekte mit JS und CSS3

Dieser Artikel zeigt Ihnen einen coolen Popup-Fenstereffekt, der mit js und css3 erstellt wurde. Der gesamte Hintergrund ist unscharf, was viel besser ist als Volltonfarbe und Transparenz. Freunde, die sich für js-Popup-Fenstereffekte interessieren, lasst uns gemeinsam lernen

Als ich gestern zu Hause fernsah, stellte ich beim Beenden einen Popup-Fenstereffekt fest und der gesamte Hintergrund war unscharf Ich fand diesen Effekt sehr cool und transparenter als eine Volltonfarbe. Es gibt so viele High-End-Funktionen, dass ich nacheinander mehrere Schnittstellen ausprobiert habe und schließlich festgestellt habe, dass der Effekt durch CSS erzielt wird Heute Morgen und schnell gesucht. Obwohl die Kompatibilität äußerst schlecht ist, kann dies mit nur einem CSS-Attribut durchgeführt werden. Ich hatte sofort das Gefühl, dass ich so wenig wusste~~

Erinnern Sie sich zunächst an die Implementierung von Popup-Fenstern. Im Allgemeinen sind wir in zwei Ebenen unterteilt, die Popup-Fensterebene (Popus) und die Maske Normalerweise ist es üblich, alle diese beiden Elemente auf eine feste Positionierung festzulegen. Der spezifische Unterschied zwischen ihnen und der absoluten wird bekannt sein, sobald Sie sie ausprobieren. Für die Maskenebene benötigen wir nicht viel. Wir legen ihre Eigenschaften wie folgt fest, damit sie den gesamten Bildschirm abdeckt.

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

Die Popus-Schicht ist etwas problematischer. Hier haben wir zwei Implementierungsmethoden

1. Bekannte Größe Die Pop-. Das Aufwärtsfenster wird, wie unten gezeigt, hauptsächlich über den oberen, linken und negativen Rand implementiert.

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

2. Wenn die Größe des Popup-Fensters unbekannt ist, ermitteln Sie die Breite und Höhe der Popup-Fensterebene über js und führen Sie dann die oben genannten Einstellungen durch wird hier nicht beschrieben.

3. Wenn CSS3 unterstützt wird, müssen wir die Breite und Höhe des Popup-Fensters nicht kennen, wir können es wie folgt einstellen

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

Hauptsächlich über das Übersetzungsattribut festgelegt. Der Prozentsatz des Versatzwerts ist relativ zu seiner eigenen Breite und Höhe, sodass er im Prinzip mit der ersten Schreibmethode identisch ist, jedoch bequemer zu verwenden ist.

Zurück zum Thema: Kehren wir zum Thema zurück, nämlich den Elementen den Gaußschen Unschärfeeffekt in PS erzielen zu lassen.

Hier kommt ein CSS-Attribut: Filter. Wenn Sie interessiert sind, können Sie hier ausführlich darauf eingehen. Wir werden heute nur über eine der Unschärfen sprechen. Schauen Sie sich zunächst die Vorschau unten an

ps: Derzeit unterstützt dieses Attribut nur Webkit-Browser, daher verwenden wir das CSS3-Attribut direkt und der Effekt muss ebenfalls vorhanden sein Webkit-Browser Schauen Sie sich

an. Der Code, der funktioniert, ist diese Zeile – webkit-filter:blur(8px). Der folgende Pixelwert stellt den Grad dar Unschärfe. Natürlich können wir in täglichen Projekten auch einige Animationen hinzufügen, um die Seite lebendiger zu machen:

<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();
})

Ist das das Ende? Offensichtlich nicht, schauen Sie sich die Konsole an

Wenn wir das Fenster öffnen, müssen wir die Klickereignisse unserer anderen Ebenen deaktivieren, aber wir haben festgestellt, dass wir die anderen Ebenen unscharf gemacht haben Ebenen , aber die entsprechenden Ereignisse sind nicht deaktiviert. Natürlich können wir auch eine Maskenebene ohne Hintergrundfarbe hinzufügen. Auf diese Weise können wir sie jedes Mal abdecken, wenn wir auf die Maskenebene klicken. Dies wird natürlich nicht der Fall sein. Das zugrunde liegende Ereignis wird ausgelöst.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

js und css3, um einen Rotationseffekt zu erzielen

JS und Canves, um einen Click-Button-Wasserwelleneffekt zu erzielen

Javascript implementiert einen Wasserfallfluss, um Bilder dynamisch zu laden

Das obige ist der detaillierte Inhalt vonSo erstellen Sie coole Popup-Effekte mit JS und CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!