Blinking, azaz, hogyan villogjon a szöveg, vagy éppen egy kép css segítségével

Az egyik sales szövegemben villogó nyilakat akartam elhelyezni. Rögtön elkezdtem keresgélni az Interneten és egy remek css megoldásra leltem.

Feladat: Legyen ez a szöveg villogó.

1. lépés: weblapod stílus fájl tartalmát egészítsd ki ezzel a kóddal:

.blink_me {
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    
    -moz-animation-name: blinker;
    -moz-animation-duration: 1s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    
    animation-name: blinker;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@-moz-keyframes blinker {  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}

@-webkit-keyframes blinker {  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}

@keyframes blinker {  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}

2. lépés: tedd html nézetbe a szöveged.

3. lépés: írd be, hogy mi legyen villogva megjelenítve.

4. lépés: az alábbi kódot add meg a html nézetben:

<span class="blink_me">Legyen ez a szöveg villogó.</span>

Eredmény:

Legyen ez a szöveg villogó.

A villogó kép:

villogó nyíl

MIELŐTT BÁRMIT LETÖLTESZ, TELEPÍTESZ, GYŐZŐDJ MEG A PROGRAM "TISZTASÁGÁRÓL"! HASZNÁLJ VÍRUSELLENŐRZŐT, TŰZFALAT! KÉSZÍTS BIZTONSÁGI MENTÉST TELEPÍTÉS ELŐTT!!!

A programok, amelyeket ajánlok többnyire kipróbáltak, de vannak olyanok is, melyek nem, hiszen egy nap nekem is 24 órából áll, nem jut mindenre idő..

Mindenki felelősséggel töltse le, illetve telepítse az ajánlott programokat! Mielőtt bármit telepítesz, készíts biztonsági mentést! Az esetleges problémákért felelősséget nem vállalok!

 

Szerző: Tóth Judit

2006 óta foglalkozom online marketing eszközökkel és Drupal weblapok készítésével. Dolgoztam multis és kisvállalkozói környezetben egyaránt, ahol a feladatom az online kommunikáció és online marketing eszközök menedzselése volt. 2010 óta saját lábra álltam és az évek során felhalmozott tudást saját ügyfeleim szolgálatába állítottam. Jelenleg a garfika irányába "mozdultam el". Ennek az egyik oka az, hogy meggyőződésem, hogy csak úgy lehetek jó szakember, ha minél több dolgot tanulok, több területen is kipróbálom magam, a máso ok, hogy a grafika, a grafikai tervezés, rajzolás mindig is érdekelt. :-)

Egy nagy felfedezőnek tartom magam, mert minden nap keresem az újdonságokat, amit meg tudok osztani az ügyfeleimmel és az olvasóimmal egyaránt.

Ilyen weblapok készítésében tudok: Online Tanfolyami Keretrendszer, Értékesítési Szakmai Blogoldal, Kapuoldal, Cégbemutató Weboldal.

Kapcsolatfelvétel: toth.judit@weblaptitkok.hu

Tetszett a cikk? Kövess a Facebookon is, és nem fogsz lemaradni a fontos bejegyzésekről!

 

Facebook Hozzászólás