Marquee a CSS3 CSS3 sablon
Ággal megjelenítésére képes információt fényes dinamikus forma segítségével a különböző speciális effektusok, vonzza jelentős figyelmet. Például információt tud mozogni, fentről lefelé és lentről felfelé, jobbról balra, majd balról jobbra, oda-vissza, oda-vissza, lassú és gyors, futás csak egyszer, majd elhagyta a sima szöveget. Váltakozva nyomtatott több sorban.
A legegyszerűbb változat a szöveg egyszerűen „fut”, mozgó jobbról balra. Nagyon gyakran, továbbá a sima szöveg, tickers generálhat egyszerű grafikával és alkalmazni a különböző hatások a szöveg megjelenítésére.
CSS animáció lehetővé teszi, hogy a meghatározását az idő függvényében animáció, amely úgy dönt, hogy ő fog fejlődni, amíg a legvégén. Az egyik ilyen funkció az úgynevezett idejét meghatározó lépés (), és lehetővé teszi, hogy hozzá számos animációs képkockák, akkor távolítsa el a szokásos akkor létrehoz egy sima animáció és animációs némi késéssel - pontosan, mire van szükségünk, hogy írja be a szöveget.
Lépésének () függvény létrehozásához animáció, ami csak növeli a vége felé a bekezdés elemméretet nulláról teljes méretben.
Először hozzon létre egy bekezdés, amely bemutatja a munkáját animációs nyomtatási folyamatot.
CSS adjuk hozzá a kívánt animációt. Ezután adjon hozzá egy rejtett túlfolyó rejtett túlfolyó változtatni egy bekezdés mérete 0-ra, úgy, hogy nem tudtuk látni a szöveget. Végül, felveheti animáció szövegbeviteli meghatározásával az idő függvényében az ().
Animáció bekezdés nagyobb felbontás 0-100%, ezáltal, a 50 képkocka szöveget nyomtat hatása.
Lásd a demo példát, hogy hogyan néz ki.
Gördülő szöveg segítségével animáció CSS3.
- lépés - A név a animáció (önkényesen)
- 5s - animáció ideje
- lépések (50) - A számos „keretek” animációs
- végtelen - Végtelen ismétlés (az érthetőség kedvéért)
Kiderült, mintha egy írógép. És most, hogy ez a vonal mozog, elég felírni text-align: right; vagy text-align: center; és a húr „run” a jobb, vagy csak a központ, ill.
Változtatásokat és kiegészítéseket a stílusok és eredmények (Ha az animációs befejezte munkáját - az oldal újratöltődik):
Gördülő szöveg segítségével animáció CSS3.
Gördülő szöveg segítségével animáció CSS3.
Gördülő szöveg segítségével animáció CSS3.
Animáció kezdik azonnal üzemkész, ha az oldal nyitva van, és miután a ciklus vége (a fenti példák megismételjük 3-szor) leállt (kivéve az első példa, vannak benne „végtelen” lejátszási végtelen) és elkezd dolgozni egyszer oldal újratöltés.
Ahhoz, hogy az animáció kezdett dolgozni, mint ahogyan azok megjelennek az oldalon a következő cikkben. .