html5 文字逐渐显示,CSS3 animation:steps 逐段逐行显示文本字符串

CSS

语言：

CSSSCSS

确定

@import url(http://fonts.googleapis.com/css?family=PT+Mono|Droid+Sans+Mono|Share+Tech+Mono);

body {

margin: 100px;

margin-top: 100px;

background-color: #334;

}

.foo {

overflow: hidden;

margin: 1.5em auto;

width: 20em;

height: 1em;

}

.boo0:before {

display: block;

font: 1em/1 sans-serif;

color: #eef;

font-family: 'Share Tech Mono', sans-serif;

content: "------------------------------ MM478CX4CX6I3M3QQOOO9PC2TWHVO JCTQHIZ3UVMP4PF9NKKOJWBGYEN58 TR8N0LR61CJJ1YZJHMODTBYOD8BKU GJ03UTTDW223N7TNPQ17WD82DCIY4 4ULGCTP9DPCPC93LCB79U2FY4DOUP 5L4GCTTWCJLGNUNHE9MX8GOZ8MN6D FLJTXT5Z-BAI01U5QZDZWOO6FPSB9 FLT5KT---BAE01S-2QFRO7TZ4UYDW FL1XRT---BA401R-V3UB2GOBTZ1L6 FL1WXT---BA401K--DUBPI3--EIR4 FLIGHT---BA4012--DUBLIN--EIRE FLIGHT---BA4012--DUBLIN--EIRE";

animation: scramble 4s steps(1, end) infinite;

animation-delay: 0ms;

}

.boo1:before {

display: block;

font: 1em/1 sans-serif;

color: #eef;

font-family: 'Share Tech Mono', sans-serif;

content: "------------------------------ TM9YDLX2VB3IRKCZFNLH1DVU1GRGM RNF3GJD7DSUC9S2CCX6MIF1D27M4S FU2HCW1KMXGJ5QU6IBZSSL0O8EFUU FR5G6PEK37QBSN9880YMGOB1OTQ2I FJ1GH5--UTOTP8WFNTDPY7Y25SJSS FLYGH4--BB7JUN1QCVOX1VMXDT97E F3IGHC--8BWD6245IQY652EMXP98G FLIGH5--EB7066428DHJ6W3PLLI1U FLIGHO--HBA46L4E-DALIAOH4RPR0 FLIGHD--9BA4614D-DALLAS-TEXA3 FLIGHT---BA4614--DALLAS-TEXAS FLIGHT---BA4614--DALLAS-TEXAS";

animation: scramble 4s steps(1, end) infinite;

animation-delay: 115ms;

}

.boo2:before {

display: block;

font: 1em/1 sans-serif;

color: #eef;

font-family: 'Share Tech Mono', sans-serif;

content: "------------------------------ LQSIZFY9G1F7SL8J7C0C3BZO68ZWN HI3Y2KVDXIOU617LSNUW3365Z6U5I Y05Z1PH40EDYTGP5677MHEJWDDL7N OLEGYMY299LD29XB0U40J7F65NRCY RLVGGT36-2S7WTEZHKKYKX2FCKLN3 3LSG115--8G7KS2ZQLR7UITGX8QT4 FLIGJ3---DT4CYT-K1ZCQZDPWFVI0 FLIGHX---7S4SP9--68E071ISEDPD FLIGHD---LS40U3--CASRVPC3VJGV FLIGHP---BA4043--CAIROU-E8YPJ FLIGHT---BA4043--CAIRO--EGYPT FLIGHT---BA4043--CAIRO--EGYPT";

animation: scramble 4s steps(1, end) infinite;

animation-delay: 230ms;

}

.boo3:before {

display: block;

font: 1em/1 sans-serif;

color: #eef;

font-family: 'Share Tech Mono', sans-serif;

content: "------------------------------ KONJMHNTEYJT9HM22F30WK1HZN8P0 5PVINW75D4GYK3W4L7IK61B2QG5NB G9O0P1UYV6Q32WCJXL2WLS1WXVEYU BP65JJFVGWHNDMZMVUVJ0IUDOE06X P34PHSPLHYMJ0Y5RDDNS97UDD44U2 YL2SHDLUOLYQ2GBGWTKQTBQMG99QR 5LIGH688INUK20B0KYKPF94YR9IMT YLIGH71-X6GU27ZZ-19I2SUCUIESR YLIGHH8-S5GC271--MUR6NXZS216T ULIGH9---BPQ271--TURIN--ITALS FLIGHT---BA4271--TURIN--ITALY FLIGHT---BA4271--TURIN--ITALY";

animation: scramble 4s steps(1, end) infinite;

animation-delay: 345ms;

}

.boo4:before {

display: block;

font: 1em/1 sans-serif;

color: #eef;

font-family: 'Share Tech Mono', sans-serif;

content: "------------------------------ CH3W5050TNXX53L1DUCUYWET3888G G13UGR7JGL2EHR8FDM4OUPMW6EG4U YV3S54OS30CQ90JWZWV3VP5LO02E1 V6J8MO89XV6XF84GQMI1MXIGEKFDV KP4RVT8HXNEUYZLUF2GPXKR7H48KS J8GIFTJ-OBANRX8Y0GMV8SSUIRWQX 922S2T8-JBA451LJ88F22G81986W1 PL0H8T---BA455TJY9OKL6ELXDK74 OL47UT---BA4565--TOKX1Q4NR66F XLCRHT---BA4515--TOKUO--IANA7 FLIGHT---BA4515--TOKYO--JAPAN FLIGHT---BA4515--TOKYO--JAPAN";

animation: scramble 4s steps(1, end) infinite;

animation-delay: 460ms;

}

.boo5:before {

display: block;

font: 1em/1 sans-serif;

color: #eef;

font-family: 'Share Tech Mono', sans-serif;

content: "------------------------------ 0261XTKG87FJGF89G3YCLP9BCO0XV J8P6EZ5DE11N60MG5UFDS6D6OOCOH 3I3ZF2PB4JD0KJEUKU2I9IMBLOQRM XGSCSFTEBUCSB34I5RUF5GGLOHLBQ J83VVDJSZBC8PL8W0UHNDE1EK5LHX 13MOW8EUN1C57HX4VTGZ9L5KR5O5C NLXXHG--NBA49KN3RLRUTX5YMSOJU WLI2HT--BBA49JW5NUH9I90P78WZP LLJZHT--8BA49SY-CM4DP4TOUG0NZ QLP7HT---BA493Q-HM5DRIL-SPA10 FLIGHT---BA4989--MADRID-SPAIN FLIGHT---BA4989--MADRID-SPAIN";

animation: scramble 4s steps(1, end) infinite;

animation-delay: 575ms;

}

.boo6:before {

display: block;

font: 1em/1 sans-serif;

color: #eef;

font-family: 'Share Tech Mono', sans-serif;

content: "------------------------------ 8TKP1S2TXPI74N5YPGY0FJ14B584Q 8OMNEMFLI5Z8ZRMUITFIGM7RSU4KG ISXDF3TLC911IWEHFYGUGMFP05U12 FUIG187T3P1XLFVUJ3YCJ6YIVB5NP F5IG0HRGYCWKVNVWHN7DDVJB1BIV3 FXIGPW53JOW560PRMMLXQ8IH4DZZ5 F1IGS6V-KTNI68ZCWQJI70HI24SND FRIGLIK-2PAP6B5--Y4FDWSFVROR5 FLIGHH--4BA46O1--NARISGK2P44Q FWIGHT--5BA4671--PARIS7FR0NCE FLIGHT---BA4671--PARIS-FRANCE FLIGHT---BA4671--PARIS-FRANCE";

animation: scramble 4s steps(1, end) infinite;

animation-delay: 690ms;

}

@keyframes scramble {

2% {

margin-top: -1em;

}

4% {

margin-top: -2em;

}

6% {

margin-top: -3em;

}

8% {

margin-top: -4em;

}

10% {

margin-top: -5em;

}

12% {

margin-top: -6em;

}

14% {

margin-top: -7em;

}

16% {

margin-top: -8em;

}

18% {

margin-top: -9em;

}

20% {

margin-top: -10em;

}

22% {

margin-top: -11em;

}

24% {

margin-top: -12em;

}

100% {

margin-top: -1em;

}

}

p {

color: #666;

position: absolute;

top: 2px;

left: 2px;

}