Kuigi pane animeeritud lumi leheleolgu see meie või kliendi poolt, see kõlab nagu vanem disainipraktika kui miski muu, tõde on see, et animatsioon mida me seekord esitame, on elegantse mere meri. Samuti ei vaja te JavaScripti, see on lihtne CSS3.
Esimene asi on pilk heita animatsioon.
Tundub päris hea, eks? Selle elluviimiseks peame looma ainult kolm valgete täppidega pilti ja need vara abil animeerima @ võtmeraamid CSS3 järgmiselt:
/*Keyframes*/
@keyframes snow {
0% {background-position: 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
Erineva lisamine eesliited erinevatele brauseritele, luues siis meie kehale:
body {
background-color: #6b92b9;
background-image: url('snow.png'), url('snow3.png'), url('snow2.png');
animation: snow 20s linear infinite;
}
Lisades ka vajalikud eesliited. Joshua Johnsoni nõusolekul täieliku menetluse koos üksikasjalike selgitustega leiate tema ajaveebist.
Rohkem informatsiooni - CSS3 gradientgeneraator, CSS3 gradientgeneraator
Allikas - Disainilahendus