Kaip sukurti labai paprastą animuotą foną

Taigi tai 404 puslapių fono plytelė yra tik animacinis GIF. Labai sena „skool tech“ technologija, bet vis tiek galite jomis smagiai praleisti laiką.

1. Sukurkite fono plytelę

Savo fono paveikslėliu bandžiau sukurti visiškai atsitiktinę / pašėlusią šachmatų lentą su besikeičiančiais vaizdais. Norėdamas pabandyti ir neatrodyti kaip vienas vaizdas, pakartotas ekrane, pirmiausia turėjau padaryti savo fono plytelę iš devynių vaizdų kvadratu viename.





kaip atidaryti instagram nuotraukas naujame skirtuke

2. Sukurkite skirtingas versijas

Tada sukūriau penkias skirtingas fono plytelių versijas; kiekvienas su skirtinga iliustracija kiekviename kvadrate. Šiuo atveju nusprendžiu sukurti penkias fono plytelių versijas, nes supratau, kad to pakaks norimam efektui sukurti. Galėjai turėti tiek, kiek nori.

3. Animuokite „Photoshop“

Kai sukūriau penkias skirtingas fono plyteles, jas animavau „Photoshop“. Tai tikrai lengva. „Photoshop“ eikite į: Window / Animation, kad atidarytumėte animacijos paletę.



Šiai animacijai naudojame rėmelius. Taigi animacijos paletė turėtų atrodyti taip:



Jei atidarius rodomas laiko juostos vaizdas, tiesiog spustelėkite „rėmelių“ piktogramą apatiniame dešiniajame paletės kampe. Šiame paveikslėlyje matote, kad jame rodoma laiko eilutės piktograma, nes mes jau naudojame „rėmelius“:

4. Nuspręskite kadrų skaičių

Viskas, ką mes darome dabar, yra pasirinkti, kiek kadrų norime. Aš pridėjau penkis. Tai darote spustelėdami mažą „puslapio lapo“ piktogramą animacijos rėmelių paletės apačioje. Tada susiesite rėmelį su sluoksniu. Jei norite, kad 3 kadras rodytų 3 sluoksnį, spustelėkite 3 kadrą ir įsitikinkite, kad 3 sluoksnis rodomas sluoksnių paletėje ir pan.

5. Nustatykite kadro greitį

Dabar belieka nustatyti kadro greitį ir nustatyti animaciją amžinai. Šiuo atveju nustatau, kad kiekvienas kadras būtų rodomas 0,13 sekundės. Tai darote spustelėdami laiką, rodomą po kiekvienu rėmeliu.

Galiausiai norėdami nustatyti kilpą amžinai, tiesiog spustelėkite animacijos paletės apačioje kairėje esantį žodį „Kartą“ ir tada pasirinkite „vieną kartą“ arba „amžinai“.

Galite daug linksmintis naudodami animuotus GIF, padaryti juos tokius paprastus ar sudėtingus, kiek norite. Jūs iš esmės kuriate mažą filmą - kuris yra gana šaunus!

kaip plauti akrilą

6. CSS

Greita paskutinė pastaba apie CSS. Čia yra labai mažai ką veikti, išskyrus pritaikyti fono paveikslėlį:

body {color: #fff; margin: 0;background: url(img/multi3.gif) repeat;}

Be to, suapvalinau konteinerio, kuriame laikomas pranešimas 404, kampus ir naudoju RGBA, kad sumažintumėte konteinerio neskaidrumą, kad per konteinerį matytumėte foną. Toliau galite pamatyti atitinkamą CSS:

.container { background:rgba(255, 255, 255, .9); border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; o-border-radius:5px; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0px 4px 4px #rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5); -o-box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5); }

Dabar, kai CSS yra baigtas, galite mėgautis savo nauju 404 puslapiu.