Enkelt skapande av banners på css3. Animerad CSS3-banner. CSS3-navigering med animerade övergångar

För att förstå strukturen för vår uppmärkning, låt oss fokusera på båten för en sekund:

>

>
>
>
Låt oss nu titta på den första bannern på demosidan. Det finns tre separata animationer som äger rum på skeppet:
• Animation - när båten glider från vänster sida. Detta gäller direkt för en oordnad lista (en grupp av båtelement).
• Animation - som ger båten en gungande effekt, simulerar båten som flyter på vattnet. Detta gäller direkt för elementen i listan (till båten).
• Animation - som döljer frågetecknet. Detta gäller div (frågetecken).
Om du inte blir sjösjuk, ta en ny titt på demosidan. Du kommer att se att animeringen som appliceras på listobjektet (båten), som får båten att stiga, också påverkar DIV inuti den (med ett frågetecken). Dessutom påverkar "slide in"-animationen som appliceras på en oordnad lista (grupp) också listelementet och DIV inom det (båten och frågetecknet). Detta leder oss till viktiga observationer:
Underordnade element ärver animation från sina föräldrar, förutom sin egen animation. Denna kunskap har lagts till i vår arsenal, men antalet barn/föräldrar när du skapar en animation kommer att förvirra dig (och processorn på din mormors bärbara dator)!
css
Innan vi kommer till de riktigt coola grejerna och börjar skapa animationer behöver vi fortfarande styla webbläsare som har fastnat på 1700-talet.
Reservstilar för äldre webbläsare

Vi kommer bara att skapa reservstilar som om CSS-animation inte existerar (tanken att CSS-animation inte existerar kommer att få alla vuxna att inte bara gråta, utan hänga bredvid mig :)). Med andra ord, om vår animation misslyckas med att spela, bör bannern fortfarande se anständig ut. På detta sätt, när någon tittar på bannern med en gammal webbläsare, kommer de att se en normal, statisk banner istället för ett tomt utrymme.
Till exempel: om någon använder CSS så här, kommer det att finnas problem:
/* FEL VÄG! */

0 % ( opacitet: 0 ; )
100 % ( opacitet: 1 ; )
}
Div (
opacitet: 0 /* Detta block är dolt som standard!*/

}
Om användarens webbläsare inte stöder animering kommer bannern att förbli osynlig för användaren. Och så kommer kunden att slå sönder dörren på säljarens kontor – med en motorsåg i händerna – och kräva att han ska förklaras varför de inte sålde hans produkt! Och om de inte förstår att en webbläsare kan vara så eländig, kommer deras liv att sluta fruktansvärt, och deras sista ord kommer att vara att förbanna Internet Explorer... :)
Men oroa dig inte, vi kommer att tillhandahålla utökat webbläsarstöd:
/* DEN RÄTTA VÄGEN */
@keyframe vår-fade-in-animation (
0 % ( opacitet: 0 ; )
100 % ( opacitet: 1 ; )
}
Div (
opacitet: 1 /* denna div kommer att vara synlig som standard */
animation: vår-fade-in-animation 1s 1 ;
}
Som du kan se kommer DIV fortfarande att dyka upp även om animeringen inte kan spelas. Om animationen kan spelas döljs DIV omedelbart och animeringen kommer att spelas till slutet.
Nu när vi vet hur vi får våra animerade banners att stödja äldre webbläsare, låt oss gå vidare till lite grundläggande CSS.
Det finns tre viktiga saker att tänka på:
• Eftersom dessa annonser kan användas på olika webbplatser, vi kommer att göra alla våra CSS-stilar mycket specifika. Vi kommer att börja deklarera varje väljare med id: #ad-1. Detta kommer att förhindra att våra bannerstilar störs av befintliga stilar och element.
• Vi kommer målmedvetet ignorera animationsfördröjningsfunktionen när du skapar vår animation. Om vi ​​skulle använda animationsfördröjningsfunktionen samt designen för våra element på rätt sätt (synliga som standard), skulle det hela synas på skärmen innan animeringen äntligen skulle börja spelas. Det är därför animeringen startar direkt, vilket gör att vi kan dölja element från skärmen tills vi behöver dem. Vi kommer att simulera animeringsfördröjning genom att öka varaktigheten och manuellt justera nyckelbildrutorna. Du kommer att se exempel på detta när vi börjar skapa animationer.
• Om möjligt, använd en animation för flera element. På så sätt kan vi spara mycket tid och minska koduppblåsthet. Du kan skapa flera olika effekter i samma animation genom att justera varaktigheten och övergångarna.
Så vi kommer att börja skapa vår reklambanner. Låt oss se till att den har en relativ position (position: relativ) så att elementen inuti den kan placeras korrekt. Vi måste också se till att overflow: hidden property är inställd på att dölja allt annat:
#ad-1 (
bredd: 720px
höjd: 300px
flyta till vänster ;
marginal: 40px auto 0;
bakgrundsbild : url (../images/ad-1/background.png );
bakgrundsposition : center ;
bakgrund-upprepning : ingen upprepning ;
overflow: gömd
position: relativ;
box-shadow: 0px 0px 6px #000 ;
}
#ad-1 #content(
bredd: 325px
flyta: höger;
marginal: 40px;
text-align : center ;
z-index: 4;
position: relativ;
overflow: synlig
}
#ad-1 h2 (
font-family : "Alfa Slab One" , kursiv ;
färg : #137dd5 ;
teckensnittsstorlek: 50px;
linjehöjd: 50px;

animation: delayed-fade-animation 7s 1 ease-in-out; /* H2 kommer att tona ut med simulerad animationsfördröjning */
}
#ad-1 h3 (

färg : #202224 ;
teckensnittsstorlek: 31px;
linjehöjd: 31px;
text-shadow : 0px 0px 4px #fff ;
animation: delayed-fade-animation 10s 1 ease-in-out; /* H3 kommer att tona ut med simulerad animationsfördröjning */
}
#ad-1 formulär (
marginal: 30px 0 0 6px;
position: relativ;
animation: form-animation 12s 1 lätt-in-ut; /* Denna kod flyttar vårt e-postformulär */
}
#ad-1 #e-post (
bredd: 158px;
höjd: 48px;
flyta till vänster ;
stoppning: 020px
teckensnittsstorlek: 16px;
font-family : "Lucida Grande" , sans-serif ;
färg : #fff ;
text-shadow : 1px 1px 0px #a2917d ;
border-top-left-radius: 5px ;
border-bottom-left-radie: 5px ;
kant : 1px fast #a2917d ;
outline : ingen ;
box-shadow: -1px -1px 1px #fff ;
bakgrundsfärg : #c7b29b ;
bakgrundsbild : linjär-gradient(botten , rgb (216 , 201 , 185 ) 0% , rgb (199 , 178 , 155 ) 100% );
}
#ad-1 #email :focus (
bakgrundsbild : linjär-gradient(botten , rgb (199 , 178 , 155 ) 0% , rgb (199 , 178 , 155 ) 100% );
}
#ad-1 #submit (
höjd: 50px
flyta till vänster ;
markör: pekare;
stoppning: 020px
teckensnittsstorlek: 20px;
font-family : "Boogaloo" , kursiv ;
färg : #137dd5 ;
text-shadow : 1px 1px 0px #fff ;
border-top-right-radius: 5px ;
border-bottom-right-radie: 5px ;
kantlinje : 1px fast #bcc0c4 ;
gräns-vänster : ingen
bakgrundsfärg : #fff ;
bakgrundsbild : linjär-gradient(botten , rgb (245 , 247 , 249 ) 0% , rgb (255 , 255 , 255 ) 100% );
}
#ad-1 #submit :hover (
bakgrundsbild : linjär-gradient(botten , rgb (255 , 255 , 255 ) 0% , rgb (255 , 255 , 255 ) 100% );
}
Nu ska vi styla vattnet och anropa lämplig animation:
#ad-1 ul#vatten (
/* Om vi ​​ville lägga till ytterligare en animation för vattnet (t.ex. rör sig horisontellt) kan vi göra det här */
}
#ad-1 li#water-back (
bredd: 1200px
höjd: 84px;
bakgrundsbild : url (../images/ad-1/water-back.png );

z-index: 1;
position: absolut;
botten: 10px
vänster: -20px
animation: water-back-animation 3s oändlig lätthet-in-ut; /* Vattenstudseffekt */
}
#ad-1 li#water-front (
bredd: 1200px
höjd: 158px;
bakgrundsbild : url ( ../images/ad-1/waterfront.png) ;
background-repeat : repeat-x ;
z-index: 3;
position: absolut;
botten: -70px;
vänster: -30px
animation: water-front-animation 2s oändlig lätthet-in-ut; /* Ytterligare en vattenstudsande effekt - den är något annorlunda. Vi kommer att göra den här animationen lite snabbare för att ge lite perspektiv. */
}
Låt oss nu skapa stilar för båten och alla dess element. Återigen kommer vi att åberopa lämplig animation:
#ad-1 ul#boat (
bredd: 249px;
höjd: 215px
z-index: 2;
position: absolut;
botten: 25px
vänster: 20px
overflow: synlig
animation: boat-in-animation 3s 1 ease-out; /* Flytta gruppen till början */
}
#ad-1 ul#boat li (
bredd: 249px;
höjd: 215px
bakgrundsbild : url (../images/ad-1/boat.png );
position: absolut;
botten: 0px
vänster: 0px
overflow: synlig
animation: boat-animation 2s oändlig lätthet-in-out; /* Imitation av en båt som guppar på vattnet - en liknande animation används redan för själva vattnet. */
}
#ad-1 #frågetecken (
bredd: 24px
höjd: 50px
bakgrundsbild : url ( ../images/ad-1/question-mark.png) ;
position: absolut;
höger: 34px;
topp: -30px;
animation: delayed-fade-animation 4s 1 ease-in-out; /* Göm frågetecknet */
}
Slutligen kommer vi att skapa stilar för gruppen av moln och för ett moln. Vi kommer också att utlösa en ganska snygg animering som ger dem en kontinuerlig rullningseffekt. Här är en illustration av vad som kommer att hända:

Det här är stilarna:
#ad-1 #moln (
position: absolut;
topp: 0px;
z-index: 0
animation: moln-animation 30-talet oändlig linjär; /* Flytta molnen åt vänster, ett oändligt antal gånger */
}
#ad-1 #cloud-group-1 (
bredd: 720px
position: absolut;
vänster: 0px
}
#ad-1 #cloud-group-2 (
bredd: 720px
position: absolut;
vänster: 720px;
}
#ad-1 .cloud-1 (
bredd: 172px
höjd: 121px;
bakgrundsbild : url (../images/ad-1 /cloud-1 .png) ;
position: absolut;
topp: 10px;
vänster: 40px;
}
#ad-1 .cloud-2 (
bredd: 121px;
höjd: 75px
bakgrundsbild : url (../images/ad-1 /cloud-2 .png) ;
position: absolut;
topp: -25px;
vänster: 300px
}
#ad-1 .cloud-3 (
bredd: 132px;
höjd: 105px
bakgrundsbild : url (../images/ad-1 /cloud-3 .png) ;
position: absolut;
topp: -5px;
vänster: 530px;
}
Uffff! Det fanns mycket CSS-kod här. Men det mest intressanta är vidare!
Animation

Kom ihåg: Fram till denna punkt fanns det ingen faktisk animering. Om du skulle se bannern nu skulle du se något som även en gammal webbläsare skulle visa - en statisk annons. FRÅNnuvi kommer faktiskt att skapa animationen som vi redan har anropat i vår CSS-kod.
Nu när vår banner visas bra, låt oss krydda denna statiska annons! Låt oss gå direkt till koden - jag ska berätta i kommentarerna vad som kommer att hända:
Slutsats
Under den här handledningen lärde vi oss nyckelpunkterna för att skapa animationer med stöd för äldre webbläsare:
1. Underordnade element ärver sina föräldrars animation förutom sin egen animering. Vi kan använda detta för att skapa mer komplexa animationer.
2. För våra annonsstilar måste vi använda mycket specifika väljare så att våra annonser inte åsidosätts av andra webbplatsstilar.
3. Vi måste styla elementen så att om vår animation inte fungerar måste annonsen fortfarande se anständig ut.
4. När det är möjligt, använd samma animation för flera element - sparar tid och förhindrar koduppsvällning.
5. Vi hänvisar ofta till Internet Explorer som "1700-talets webbläsare" medan vi skakar näven i avsky och ilska. :)
Lycka till med dina CSS-experiment.
Hej, så uppgiften är som följer: "Skapa en adaptiv HTML-banner som kommer att anpassa sig till olika skärmstorlekar, den kommer att ha en återstående tidsräknare och en stängningsknapp, och allt detta ska också räkna klick för att samla statistik på klick på TT Adriver.”
Låt oss först ta reda på vilka de mest populära formaten är när du skapar sådana banners:
I allmänhet finns det många av dessa banners, du kan bekanta dig med alla tekniska krav och format här: klicka på , men vi kommer bara att använda ett fåtal, eftersom. resten är antingen inte längre relevanta eller upprepar nästan dessa:
1. FullScreen-banners - banderoller som du kan se i tunnelbanan eller på wifi-sajten, dessa banderoller öppnas till helskärm, har en räknare och en stängningsknapp. För att skapa sådana banners förbereder vi helt enkelt en statisk bild eller en enkel gif-animation (högst 600KB) och skriver sedan in allt i HTML.

   Helskärmsbanner

2. FullWidth-banners är redan mer intressanta, men i själva verket är de bara en vanlig HTML5-banner, som bara sträcker sig till 100 % av skärmens bredd, men har en fast höjd. Sådana banners använder ofta animation och skapas redan i program som t.ex google webbdesigner, Adobe Edge Animate , Adobe Animate CC . Själv använder jag aktivt Edge Animate, det är bekvämare, snabbare och har möjlighet att snabbt ladda upp till HTML5. När man skapar sådana banners görs initialt en storyboard med alternativ för hur denna banner kommer att se ut vid olika skärmstorlekar, det hela ser ut ungefär så här:

   

   Banner storyboard med 100 % bredd

3. En banderoll med fast storlek eller en statisk - ja, det är ganska enkelt. Här skapas ett enkelt kreativt eller storyboard, och allt som återstår att göra är att skriva koden för klickräkningen. För att skapa sådana banderoller använder jag ofta Adobe Photoshop eller Edge Animate – om det är en animation. Använd aldrig GIF här! Du kommer aldrig att kunna ladda upp en gif-animation under 600KB, och om animeringen är större kommer den inte att hoppas över. En vanlig HTML-banner når inte 200KB i vikt, vilket gör att du här kan skapa till fullo.

Storyboard för banner i fast storlek
Guide för att skapa en helskärmsbanner enligt alla regler
Att skapa en sådan banner innebär att dess storlek kommer att ändras när skärmstorleken ändras, vilket innebär att den kommer att uppta hela sitt område, ungefär så här:
Det betyder att bilden ska se lika bra ut på alla enheter, härifrån är slutsatsen att den ska vara det tillräckligt bra kvalitet och storleken är nära fyrkant(Det finns inga fasta storlekar, allt är ganska lojalt här). För tillfället riktar vi oss mot mobila enheter (mobil) och surfplattor (surfplatta), så vi tar en rektangel för att se i porträttläge (stående). Vi går in i Photoshop och skapar ett dokument av önskad storlek, i det här fallet är det det 536 x 714:

Gif-källa för att skapa en helskärmsbanner
Jag skapade en gif från två ramar, den har en vikt på 242KB, vi ska alltid ha en vikt på upp till 600KB, kom ihåg detta. Nu måste vi förvandla detta till en riktig HTML-banner. Vi öppnar instruktionen för att skapa FullScreen-banners, tar de tekniska kraven från den och stänger den, det är väldigt klumpigt skrivet. Glöm Flash, det dog en heroisk död, vi har bara HTML5 så vi behöver de tekniska kraven för att skapa banners med Ajax-kod.
Det finns inga begränsningar för layouten, här är vi fria att göra vad vi vill, huvudsaken är att huvudattributen finns, nämligen: Ett klick från bannern lästes, det fanns en räknare och ett kryss för att stänga. För kodning använder jag gratisprogrammet Sublime Text.
Öppna HTML-filen från min mall och se:

Standard helskärmsbannerkod



stäng knapp
Hur läses själva klicket från bannern? Och varför har vi inte lagt till några länkar till de sidor som bannern ska leda till? Så ... Adriver-systemet låter dig ordinera länkar för att gå till webbplatsen, efter att ha laddat banners i systemet visar det sig att vi i vår källkod bara föreskriver en variabel som ersätts när den laddas in i själva systemet, det är inte längre vårt arbete. I det här fallet har vi ett klick för hela behållaren där vår banner finns, i allmänhet allt som vi placerar i
vi har en banner och klick läses från denna. För andra banners, andra tekniska krav och där läses klicket annorlunda, nu tittar vi på ett specifikt exempel.
Behållare med en banderoll
I andra lektioner kommer jag att berätta hur du skapar en banner på 100% av skärmens bredd med animering och hur du skapar och förbereder en layout för webblayout enligt alla regler.
Lektionsfiler:
1. Färdiga helskärmsbanners: klicka
Tack för din uppmärksamhet.
Utan tvekan en av de smartaste trender 2012är en utveckling på CCS3, HTML5. Idag erbjuder vi en stor och mycket användbar översikt av exempel " 20+: Kreativa och användbara CSS3-handledningar″ erbjuds på Speckig pojke. Alla exempel är gjorda i ren utan JavaScript, i de presenterade lektionerna finns en demo och färdiga CSS3-filer för nedladdning.
Vi är säkra på att dessa trick och tekniker kommer att vara användbara för webbutvecklare!
css3 lektioner :
1. CSS3 fotogallerier, reglage, bildeffekter
1.1.CSS3 reglage
Det är svårt att tro, men den här reglaget med olika effekter är gjord exklusivt på CSS3, mycket imponerande.
1.2. Helskärmswebbbakgrund med CSS3-reglageeffekt
Webbdesigners har experimenterat med olika bakgrunder för en webbplats under lång tid, men hittills ren CSS kunde göra väldigt lite, var tvungen att använda JS. Nu gör CSS3 det möjligt att göra med bakgrunden på din webbplats som du vill - du kan ha en bakgrund med ett stort högkvalitativt foto, du kan ändra flera bakgrunder med olika effekter, och med bakgrundsskalbarhet beroende på skärmparametrar. I allmänhet en fantastisk möjlighet för kreativa webbplatser.
1.3. Lightbox på CSS3
Med den här handledningen kan du lära dig hur du skapar en Lightbox (Lightbox) med en mängd olika effekter på ren CSS.
1.4. CSS3-bildegenskaper
Den här handledningen visar de nya CSS3-funktionerna för bildegenskaper, såsom rundade hörn, skuggor och andra effekter.
1.5. Animerad CSS3-banner
1.6.CSS3 laddningsbar
1.7. 3D-band med CSS3

Visa demo eller ladda ner CSS3-kodfiler →
2. CSS3-menyer, navigering och knappar
2.1. Apple.com-menyn i CSS3
En handledning för att skapa den berömda Apple.com-menyn i CSS3.
2.2. Animerad CSS3 horisontell meny
En enkel handledning som visar hur man gör en animerad CSS3-meny med olika effekter.
2.3. Animerad vertikal meny i CSS3
2.4. Animerade CSS3-knappar
Bra handledning med 7 exempel på animerade kreativa knappar.
2.5. Kreativ animerad meny med CSS3-bilder
I den här lektionen springer bara ögonen upp från de 10 exemplen som presenteras. Sådana komplexa kreativa menyer skapades tidigare uteslutande med hjälp av JS. Imponerande!
2.6. Cirkelnavigeringseffekt med CSS3
En ovanlig effekt när du håller muspekaren över det valda navigeringsobjektet i form av en cirkel med en bild. Vi noterar!
2.7. Rullgardinsmeny i CSS3
En handledning för att implementera en enkel rullgardinsmeny med undernivåer i CSS3.
2.8. CSS3-navigering med animerade övergångar
3. Olika effekter på CSS3
3.1. Animerat CSS3-verktygstips utan jQuery

Låt oss göra en reklambanner med CSS3. För närvarande stöder endast CSS3-animationer fullt ut Firefox webbläsare och Webkit. Men det räcker bara för att få bannern att fungera i andra webbläsare. Förvänta dig dock inte bra prestanda överallt (särskilt i IE 7 och äldre) när du experimenterar med de senaste CSS-teknikerna.
Notera: För att spara utrymme på sidan har alla webbläsarleverantörsprefix utelämnats. Se källkoden.
HTML-uppmärkning
Låt oss först titta på bannerns struktur i HTML. Vid det här laget måste vi föreställa oss hur animationen kommer att fungera:
Förlorat?
Slappna av - vi hjälper dig.

För en djupare förståelse av uppmärkningsstrukturen, låt oss fokusera på båten:
Tre animationer sker med båten:
Slip av båten till vänster. Gäller en oordnad lista (grupp).

Simulering av en båt som gungar på vattnet. Tillämpas på listobjektet (båt).

Uppkomsten av ett frågetecken. Tillämpas på ett div-element (frågetecken).
Om du tittar på demosidan kan du se att animeringen för listobjektet (båten) även påverkar div-elementet inuti den (frågetecken). Dessutom påverkar "slip"-animeringen för en oordnad lista listobjektet (båten och frågetecknet).
Därför kan man dra slutsatsen att underordnade element får föräldraanimationer utöver sina egna handlingar. Nu återstår bara att räkna upp förälder/barn-strukturerna.
css
Innan vi börjar skapa animationer måste vi säkerställa bakåtkompatibilitet med äldre webbläsare.
bakåtkompatibilitet
Vi kommer att uppnå bakåtkompatibilitet genom att helt enkelt styla uppmärkningen som om CSS-animationer inte existerade alls. Om någon tittar på sidan i en gammal webbläsare kommer de att se en normal statisk bild, inte ett tomt utrymme.
Till exempel: ska jag använda CSS? som den nedan, kommer det att uppstå problem:
/* INTE ORDENTLIGT! */ @keyframe our-fade-in-animation ( 0% (opacitet:0;) 100% (opacitet:1;) ) div ( opacitet: 0; /* Denna div är dold som standard - oj!*/ animation: vår -fade-in-animation 1s 1;)
Om webbläsaren inte stöder animering kommer div-elementet att förbli osynligt för användaren.
Så här säkerställer vi bakåtkompatibilitet med äldre webbläsare:
/* TRUE */ @keyframe our-fade-in-animation ( 0% (opacitet:0;) 100% (opacitet:1;) ) div ( opacitet: 1; /* Denna div är synlig som standard */ animation: vår -fade-in-animation 1s 1;)
Nu kommer div-elementet att renderas även om animeringen inte kan köras. Och i moderna webbläsare Div. kommer först att döljas under animeringen.
Grunden
Nu vet vi hur man säkerställer bakåtkompatibilitet (vilket hjälper till att undvika problem när man arbetar med riktiga projekt). Det är dags att skapa basen för vår CSS-kod.
Du måste komma ihåg 3 punkter:
Eftersom bannern kommer att användas på olika webbplatser, vi kommer att göra alla våra CSS-väljare speciella. De börjar alla med #ad-1. Därför kommer vi att försöka undvika att vår kod och webbplatskoden överlappar varandra.

Vi ignorerar avsiktligt animationsfördröjning i inställningar. Om du använder animationsfördröjning när du ställer in stilar med standardelementsynlighet, kommer bannerstrukturen att brytas av att delar av bilden plötsligt försvinner eller dyker upp efter att animeringen är klar. Animationsfördröjning simuleras av varaktighet och bildruteinställning.

När det är möjligt använd en animation för flera element. På så sätt sparar vi tid och minskar storleken på koden.
Så vi skapar grunden för vår banner. Låt oss ställa in den till relativ positionering så att de inre elementen kan placeras korrekt. Det kommer också att dölja allt som går utanför omfattningen av elementet:
#ad-1 ( bredd: 720px; höjd: 300px; flytande: vänster; marginal: 40px auto 0; bakgrundsbild: url(../images/ad-1/background.png); bakgrundsposition: mitten; bakgrund -upprepning: ingen upprepning; översvämning: dold; position: relativ; box-shadow: 0px 0px 6px #000; )
Sedan sätter vi stilar för texten och inmatningsfälten. Vi kallar lämpliga animationer. Du måste också se till att innehållet har det högsta z-indexet för de rörliga delarna så att de inte överlappar varandra:
#ad-1 #content ( width: 325px; float: right; margin: 40px; text-align: center; z-index: 4; position: relative; overflow: synlig; ) #ad-1 h2 ( font-family: "Alfa Slab One", kursiv; färg: #137dd5; font-size: 50px; line-height: 50px; text-shadow: 0px 0px 4px #fff; animation: delayed-fade-animation 7s 1 ease-in-out; /* Visas h2 med falsk fördröjning */ ) #ad-1 h3 ( font-family: "Boogaloo", kursiv; färg: #202224; font-size: 31px; line-height: 31px; text-shadow: 0px 0px 4px #fff; animation: delayed-fade-animation 10s 1 ease-in-out; /* Visas h3 med simulerad fördröjning */ ) #ad-1 form (marginal: 30px 0 0 6px; position: relativ; animation: form-animation 12s 1 ease-in-out; /* Skjut ut formuläret för att ange en e-postadress med en simulerad fördröjning */ ) #ad-1 #email ( width: 158px; height: 48px; float: left; padding: 0 20px; font-size: 16px; font-family: "Lucida Grande", sans-serif; färg: #fff; text-shadow: 1px 1px 0px #a2917d; border-top-left-radie: 5px; border r-bottom-left-radie: 5px; border:1px solid #a2917d; outline: ingen; box-shadow: -1px -1px 1px #fff; bakgrundsfärg: #c7b29b; bakgrundsbild: linear-gradient(bottom, rgb(216,201,185) 0%, rgb(199,178,155) 100%); ) #ad-1 #email:focus ( bakgrundsbild: linear-gradient(bottom, rgb(199,178,155) 0%, rgb(199,178,155) 100%); ) #ad-1 #submit (höjd: 50px; flytande: vänster ; markör: pekare; utfyllnad: 0 20px; font-size: 20px; font-family: "Boogaloo", kursiv; färg: #137dd5; text-shadow: 1px 1px 0px #fff; border-top-right-radie: 5px ; border-bottom-right-radie: 5px; border:1px solid #bcc0c4; border-left: none; background-color: #fff; background-image: linear-gradient(bottom, rgb(245,247,249) 0%, rgb( 255 255 255) 100 %); ) #ad-1 #submit:hover ( bakgrundsbild: linear-gradient(bottom, rgb(255,255,255) 0%, rgb(255,255,255) 100%); )
Låt oss nu styla vattnet och kalla fram lämplig animation:
#ad-1 ul#water( /* Om du behöver ytterligare en vattenanimation kan du lägga till den här */ ) #ad-1 li#water-back ( bredd: 1200px; höjd: 84px; bakgrundsbild: url(. . /images/ad-1/water-back.png); background-repeat: repeat-x; z-index: 1; position: absolut; bottom: 10px; left: -20px; animation: water-back-animation 3s oändlig lätthet-in-ut; /* Imitation av stänkande vågor */ ) #ad-1 li#water-front ( bredd: 1200px; höjd: 158px; bakgrundsbild: url(../images/ad-1/water -front .png); background-repeat: repeat-x; z-index: 3; position: absolut; bottom: -70px; left:-30px; animation: water-front-animation 2s oändlig lätthet-in-out; / * Annan stänkande våganimering kommer att köras lite snabbare för att skapa en perspektiveffekt. */ )
Ställ in stilar för båten och dess element. Vi kallar också lämpliga animationer:
#ad-1 ul#boat (bredd: 249px; höjd: 215px; z-index: 2; position: absolut; botten: 25px; vänster: 20px; overflow: synlig; animation: boat-in-animation 3s 1 lätta ; /* Skjut in gruppen när annonsen startar */ ) #ad-1 ul#boat li ( bredd: 249px; höjd: 215px; bakgrundsbild: url(../images/ad-1/boat.png); position: absolut; botten: 0px; vänster: 0px; overflow: synlig; animation: båtanimation 2s oändlig lätthet-in-ut; /* Simulera båten som guppar på vattnet - liknande animationen som redan används på själva vattnet. */ ) #ad-1 #question-mark ( bredd: 24px; höjd: 50px; bakgrundsbild: url(../images/ad-1/question-mark.png); position: absolut; höger: 34px; top: -30px; animation: delayed-fade-animation 4s 1 ease-in-out; /* Tona in frågetecknet */ )
Låt oss nu skapa stilarna för molnen. För dem kommer vi att använda animation med effekten av oändlig rörelse. illustrationen visar kärnan i idén:

Och här är CSS-koden:
#ad-1 #moln (position: absolut; topp: 0px; z-index: 0; animation: molnanimation 30-talet oändligt linjär; /* Rulla moln åt vänster, återställ och upprepa */ ) #ad-1 #moln -grupp -1 ( bredd:720px; position: absolut; vänster:0px; ) #ad-1 #cloud-group-2 ( bredd: 720px; position: absolut; vänster: 720px; ) #ad-1 .cloud-1 ( bredd: 172px; höjd: 121px; bakgrundsbild: url(../images/ad-1/cloud-1.png); position: absolut; topp: 10px; vänster: 40px; ) #ad-1 .cloud -2 (bredd: 121px; höjd: 75px; bakgrundsbild: url(../images/ad-1/cloud-2.png); position: absolut; topp: -25px; vänster: 300px; ) #ad- 1 . cloud-3 ( bredd: 132px; höjd: 105px; bakgrundsbild: url(../images/ad-1/cloud-3.png); position: absolut; topp: -5px; vänster: 530px; )
Animationer
Påminnelse: Från och med nu är ingenting faktiskt animerat. Om du tittar på vår banner nu kommer du att se en statisk bild. Det är här animationerna som anropas i ovanstående kod skapas.
Låt oss nu blåsa liv i vår vackra statiska bild:
/* En animation med simulerad fördröjning används för att visa flera element. Simuleringen av fördröjningen görs genom att starta processen med att 80 % av animeringen fortsätter (och inte omedelbart). Så här kan du simulera vilken fördröjning som helst: */ @keyframes delayed-fade-animation ( 0% (opacitet: 0;) 80% (opacitet: 0;) 100% (opacitet: 1;) ) /* Animation för att visa form med e-postadress och knappen. Den använder också simulerad fördröjning */ @keyframes form-animation ( 0% (opacitet: 0; höger: -400px;) 90% (opacitet: 0; höger: -400px;) 95% (opacitet: 0,5; höger: 20px; ) 100% (opacitet: 1; höger: 0px;) ) /* Den här animationen används för att ta ut båten från skärmen i början av videon: */ @keyframes boat-in-animation ( 0% (vänster: -200px;) 100% (vänster : 20px;) ) /* Animation för molnen. Den första gruppen av moln börjar röra sig från mitten och den andra - till höger på skärmen. Den första gruppen tas långsamt bort från skärmen och den andra visas till höger. När den vänstra gruppen är helt dold kommer molnen snabbt att återgå till sin ursprungliga position: */ @keyframes molnanimation ( 0% (vänster: 0px;) 99,9999% (vänster: -720px;) 100% (vänster: 0px; ) ) / * De tre sista animationerna är nästan desamma - skillnaden ligger i placeringen av elementen. De efterliknar havsvågornas stänk: */ @keyframes båtanimation ( 0% (nedre: 0px; vänster: 0px;) 25% (nedre: -2px; vänster: -2px;) 70% (nedre: 2px; vänster : - 4px;) 100% (botten: -1px; vänster: 0px;) ) @keyframes water-back-animation ( 0% (botten: 10px; vänster: -20px;) 25% (nedre: 8px; vänster: - 22px; ) 70% (botten: 12px; vänster: -24px;) 100% (botten: 9px; vänster: -20px;) ) @keyframes water-front-animation (0% (nedre: -70px; vänster: -30px) ;) 25% (botten: -68px; vänster: -32px;) 70% (botten: -72px; vänster: -34px;) 100% (nedre: -69px; vänster: -30px;) )
Slutsats
I den här lektionen lärde vi oss några nyckelbegrepp:
1. Efterkommande element får sina föräldrars animationer utöver sina animationer.
2. När du skapar en banner bör du sträva efter att använda en unik identifierare för att undvika kodöverlappning med ett befintligt CSS-projekt.
3. Element bör placeras och utformas som om animering inte är tillgänglig för att säkerställa bakåtkompatibilitet.
4. Om möjligt bör du använda en animation för flera element.