Mesaje pop-up cu animație CSS
Astăzi vă vom arăta cum să creați mesaje simple pop-up utilizând animația CSS. Ideea este să arătați o avertizare sau un avertisment pentru o anumită perioadă de timp și apoi să o eliminați. Vom folosi un mic indicator pentru a arăta cât timp este lăsat înainte ca fereastra să dispară.
Marcarea va fi foarte simplă, va fi o div divizată cu un mesaj în interior, de asemenea va conține un bloc suplimentar pentru indicator:
Setările dvs. au fost salvate cu succes!
Fereastra de mesaje va avea clasele tn-box și tn-box-color-1. care vor fi folosite pentru a determina diferite culori.
Apoi definim stilurile ferestrelor:
tn-box # 123;
lățime. 360 pixeli;
poziție. relativă;
marjă. 0 auto 20px auto;
umplutură. 25px 15px;
text-align. stânga;
border-radius. 5px;
box-shadow.
0 1px 1px rgba # 40; 0. 0. 0. 0.1 # 41;.
inset 0 1px 0 rgba # 40; 255. 255. 255. 0,6 # 41; ;
opacitate. 0;
cursor. implicit;
afișare. nici unul;
# 125;
tn-box-cun 1 # 123;
fundal. # ffe691;
de frontieră. 1px solid # f6db7b;
# 125;
Am setat proprietatea de afișare în fereastră: none și setați-o la transparență zero.
Indicatorul va avea următoarele stiluri:
tn curs # 123;
lățime. 0;
înălțime. 4px;
fundal. RGBA # 40; 255. 255. 255. 0,3 # 41; ;
poziție. absolută;
de jos. 5px;
la stânga. 2%;
border-radius. 3px;
box-shadow.
inset 0 1px 1px rgba # 40; 0. 0. 0. 0.05 # 41;.
0 -1px 0 rgba # 40; 255. 255. 255. 0,6 # 41; ;
# 125;
Inițial, bara de progres va avea o lățime de 0.
În acest exemplu, folosesc butonul de selectare, după ce este bifată, animația va începe:
intrare. verificat
secțiunea .tn-box # 123;
afișare. bloc;
animație. fadeOut 5s liniar înainte;
# 125;
intrare. verificat
secțiunea .tn-box .tn-progress # 123;
animație. runProgress 4s liniar înainte 0,5 sec;
# 125;
Butonul este precedat de o secțiune cu blocuri de mesaje și astfel pot folosi combinatorul general de frate.
tn-box .tn-box-activ # 123;
afișare. bloc;
animație. fadeOut 5s liniar înainte;
# 125;
tn-box .tn-box-activ .tn-progress # 123;
animație. runProgress 4s liniar înainte 0,5 sec;
# 125;
unde tn-box-active este clasa pe care o adăugați la div cu clasa tn-box.
Animația pentru blocul în sine este creată după cum urmează:
@ keyframes fadeOut <
0% # 123; opacitate. 0; # 125;
10% # 123; opacitate. 1; # 125;
90% # 123; opacitate. 1; transformare. translateY # 40; 0px # 41; ; # 125;
99% # 123; opacitate. 0; transformare. translateY # 40; -30px # 41; ; # 125;
100% # 123; opacitate. 0; # 125;
# 125;
L-am numit "fadeOut", dispărând, fereastra pare să se estompeze și să se ridice puțin.
Animația pentru indicator este următoarea:
@frame-cheie runProgress <
0% # 123; lățime. 0%; fundal. RGBA # 40; 255. 255. 255. 0,3 # 41; ; # 125;
100% # 123; lățime. 96%; fundal. RGBA # 40; 255. 255. 255. 1 # 41; ; # 125;
# 125;
Am animat lățimea la 96% (în stânga a fost o liniuță de 2%, deci vrem să setăm și 2% pe dreapta) și să creștem opacitatea în rgba.
Durata animației barei de progres va fi puțin mai mică decât durata de animație a ferestrei, deoarece vom începe mai târziu.
Notă: când plasăm mouse-ul peste mouse, cred că va fi bine dacă există o pauză în animație. Acest lucru are sens dacă utilizatorul dorește să citească cu atenție ceea ce este scris în mesaj. Dar, din păcate, se pare că există unele probleme cu browserele WebKit. În Chrome (19.0.1084.56 pe Win) animația se descompune, în timp ce în Safari (5.1.5 Win) primesc un raport de eroare în WebKit2WebProcess.exe. Dar funcționează bine în Firefox> 12.0.
Oricum, iată cum puteți face acest lucru:
tn-cutie .tn-box-hoverpause: hover.
.tn-cutie .tn-box-hoverpause: hover .tn-progress # 123;
animație-play-stat. întrerupte;
# 125;
Și asta este! Sper că ți-a plăcut!