უდავოდ ერთ-ერთი ყველაზე ნათელი ტენდენციები 2012მიმდინარეობს განვითარება CCS3, HTML5. დღეს ჩვენ გთავაზობთ მაგალითების დიდ და ძალიან სასარგებლო მიმოხილვას " 20+: კრეატიული და სასარგებლო გაკვეთილები CSS3″-ზეშესთავაზა SpeckyBoy. ყველა მაგალითი გაკეთებულია გაწმენდა JavaScript-ის გარეშე, წარმოდგენილი გაკვეთილები შეიცავს დემოს და მზა ფაილები CSS3 ჩამოსატვირთად.

დარწმუნებული ვართ, რომ ეს ტექნიკა გამოადგება ვებ დეველოპერებს!

css3 გაკვეთილები :

1. CSS3 ფოტო გალერეები, სლაიდერები, ეფექტები სურათებით

1.1.სლაიდერი CSS3-ზე

არ მჯერა, მაგრამ ეს სლაიდერი სხვადასხვა ეფექტებით დამზადებულია ექსკლუზიურად CSS3-ში, ძალიან შთამბეჭდავი.

1.2. სრული ეკრანის ვებსაიტის ფონი სლაიდერის ეფექტით CSS3-ის გამოყენებით

ვებ დიზაინერები დიდი ხანია ატარებენ ექსპერიმენტებს საიტისთვის სხვადასხვა ფონზე, მაგრამ აქამდე ძალიან ცოტა რამის გაკეთება შეიძლებოდა სუფთა CSS-ით, თქვენ უნდა გამოეყენებინათ JS. ახლა CSS3 გაძლევთ შესაძლებლობას გააკეთოთ თქვენი საიტის ფონზე, როგორც გსურთ - შეგიძლიათ გქონდეთ ერთი ფონი დიდი, მაღალი ხარისხის ფოტოსურათით, შეგიძლიათ შეცვალოთ რამდენიმე ფონი სხვადასხვა ეფექტებით და ფონი მასშტაბირებადია ეკრანის მიხედვით. პარამეტრები. ზოგადად, საოცარი შესაძლებლობა კრეატიული საიტებისთვის.

1.3. ლაითბოქსი CSS3-ზე

ამ გაკვეთილით თქვენ შეგიძლიათ ისწავლოთ როგორ შექმნათ Lightbox სხვადასხვა ეფექტებით სუფთა CSS-ის გამოყენებით.

1.4. სურათის თვისებები CSS3-ში

ეს გაკვეთილი აჩვენებს ახალ ფუნქციებს CSS3-ში გამოსახულების თვისებებისთვის, როგორიცაა მომრგვალებული კუთხეები, ჩრდილები და სხვა ეფექტები.

1.5. ანიმაციური ბანერი CSS3-ის გამოყენებით

1.6 პანელის ჩატვირთვა CSS3-ში

1.7. 3D ლენტი CSS3-ით

ნახეთ დემო ვერსია ან ჩამოტვირთეთ CSS3 კოდის ფაილები →

2. CSS3 მენიუები, ნავიგაცია და ღილაკები

2.1. Apple.com მენიუ CSS3-ში

ტუტორიალი CSS3-ში ცნობილი Apple.com მენიუს შესაქმნელად.

2.2. ანიმაციური ჰორიზონტალური მენიუ CSS3-ში

მარტივი გაკვეთილი, რომელიც გვიჩვენებს, თუ როგორ უნდა გააკეთოთ ანიმაციური მენიუ CSS3-ში სხვადასხვა ეფექტებით.

2.3. ანიმაციური ვერტიკალური მენიუ CSS3-ით

2.4. ანიმაციური ღილაკები CSS3-ით

შესანიშნავი გაკვეთილი ანიმაციური შემოქმედებითი ღილაკების 7 მაგალითით.

2.5. კრეატიული ანიმაციური მენიუ სურათებით CSS3-ის გამოყენებით

ამ გაკვეთილზე წარმოდგენილი 10 მაგალითი უბრალოდ თვალისმომჭრელია. ასეთი რთული კრეატიული მენიუები იქმნებოდა ექსკლუზიურად JS-ის გამოყენებით. შთამბეჭდავი!

2.6. წრის ნავიგაციის ეფექტი CSS3-ით

არაჩვეულებრივი ეფექტი არჩეულ ნავიგაციის ერთეულზე, გამოსახულების მქონე წრის სახით. გაითვალისწინეთ!

2.7. ჩამოსაშლელი მენიუ CSS3-ში

გაკვეთილი CSS3-ში ქვედონეებით მარტივი ჩამოსაშლელი მენიუს განსახორციელებლად.

2.8. CSS3 ნავიგაცია ანიმაციური გადასვლებით

3. სხვადასხვა ეფექტები CSS3-ზე

3.1. ანიმაციური მინიშნება CSS3-ში jQuery-ის გარეშე

ვებ ტექნოლოგიებისა და თანამედროვე ბრაუზერების განვითარების წყალობით, ჩვენ შეგვიძლია შევქმნათ მრავალი ეფექტი Javascript-ის გამოყენების გარეშე. ამან ბევრად გაუადვილა ცხოვრება ვებ დეველოპერებს. რადგან ახლა ჩვენ შეგვიძლია შევქმნათ ეფექტები სუფთა CSS-ის გამოყენებით Javascript-ის გამოყენების გარეშე. ამიტომ, ამ სტატიაში მინდა გითხრათ, შესაძლებელია თუ არა ბანერების შექმნა სუფთა CSS-ის გამოყენებით, რა არის საჭირო ამისათვის, ასევე ამ მიდგომის დადებითი და უარყოფითი მხარეები.

CSS3 გთავაზობთ შესაძლებლობების ფართო სპექტრს, თქვენ უბრალოდ უნდა გამოიყენოთ ისინი სწორად. მაგალითად, მსურს მოგაწოდოთ ბმულები ჩემს წარსულ ნამუშევრებზე "პერსონაჟები სუფთა CSS-ში":

პირველ რიგში, მინდა მოგიყვანოთ ჩემი CSS ბანერების მაგალითები. თქვენ შეიძლება უკვე გინახავთ ისინი საიტზე, მაგრამ არც კი იცოდით რა და როგორ შეიქმნა.

დემოს შესახებ:თითოეულ მაგალითს (ბანერს) ბოლოში აქვს ხანგრძლივობა წამებში, ასევე ღილაკი „განახლება“, რომელიც თავიდანვე იწყებს ბანერის ჩვენებას.

ბანერი #1 - "ინდივიდუალური ტრენინგი ვებსაიტის მშენებლობაში":

ეს ბანერი დაახლოებით 2 დღის განმავლობაში შევქმენი. რატომ ამდენ ხანს? იმის გამო, რომ კოორდინატების ხელახალი გაანგარიშებისას ბანერის ადაპტაციას (რეზინის გასაკეთებლად) გარკვეული დრო დასჭირდა. ამჟამად, მისი ზომა დამოკიდებულია მშობელი ბლოკის სიგანეზე (რომელიც შეიცავს თავად CSS ბანერს).

მე შევქმენი ეს ბანერი ფაქტიურად 2-2,5 საათში. ერთადერთი, რამაც შეანელა აქ შექმნის პროცესი, იყო ხატების არჩევანი. რადგან ისინი ბანერის თემასთან ახლოს უნდა ყოფილიყო შერჩეული.

ეს ბანერი ასევე გადაჭიმულია ბლოკის კონტეინერის სიგანეზე, რომელშიც ის მდებარეობს. შექმნას დაახლოებით 1,5 საათი დასჭირდა.

ეს ბანერები ძალიან ლამაზად გამოიყურება, მაგრამ მართლა ასე მარტივია? მოდით შევხედოთ ბანერების შექმნის ამ მეთოდის დადებით და უარყოფით მხარეებს.

CSS ბანერების უპირატესობები და უარყოფითი მხარეები:

როგორ შევქმნათ CSS ბანერი?

1 იდეა

ჯერ ზუსტად უნდა იცოდეთ რა ანიმაცია უნდა ჰქონდეს ბანერს (რა, საიდან და საიდან უნდა მოძრაობდეს და სად უნდა გამოჩნდეს). შეგიძლიათ აიღოთ A4 ფურცელი და დახაზოთ სად გადაადგილდება თითოეული ელემენტი და რა უნდა იყოს ბანერზე.

ყოველივე ამის შემდეგ, თქვენ ვერ დაიწყებთ ბანერის შექმნას, თუ არ იცით რა უნდა იყოს და როგორ იმოქმედოს.

2 HTML სტრუქტურა

შემდეგი ნაბიჯი არის HTML მარკირების შექმნა, რათა მოხდეს ელემენტების გადატანა (და მათთვის ანიმაციის შექმნა). ანუ ყველაფერს ვერ გააკეთებ ერთი სურათით, რომელიც გადავა მარჯვნიდან ან მარცხნიდან და შემდეგ ანიმაცია დასრულებულია.

როგორც წესი, არის ერთი საერთო ბლოკი, რომელშიც ყველა დანარჩენი მდებარეობს. და ამ ზოგად ბლოკში ჩვენ შეგვიძლია ვმართოთ ელემენტები, როგორც გვჭირდება.

3 CSS ანიმაცია

საბოლოო ნაბიჯი არის ბლოკებისთვის ანიმაციების შექმნა, ასევე მათთვის სტილის ჩაწერა, რადგან ანიმაციის ზოგიერთი ნაწილი ნაგულისხმევად დამალულია.

საკუთარი ბანერის შესაქმნელად, კარგად უნდა გესმოდეთ CSS და HTML-ის საფუძვლები.

ისწავლეთ ძირითადი CSS ანიმაცია ამ გაკვეთილით - .

დასკვნა

ყველა თანამედროვე ბრაუზერი მხარს უჭერს CSS3 თვისებებს, რაც ნიშნავს, რომ ბანერები სწორად იქნება ნაჩვენები ასეთ ბრაუზერებში. მაგრამ JS დანამატების დახმარებით შეგიძლიათ შექმნათ CSS ბანერები ძველი ბრაუზერებისთვის. CSS ანიმაციის საფუძვლების შესწავლით, თქვენ გაიგებთ ბანერის შექმნის პროცესს და მალე შექმნით თქვენს პირველ სუფთა CSS ბანერს! 😉

მოდით გავაკეთოთ სარეკლამო ბანერი CSS3-ის გამოყენებით. ამჟამად მხოლოდ CSS3 ანიმაციებია სრულად მხარდაჭერილი Firefox ბრაუზერებიდა WebKit. მაგრამ საკმარისად მარტივია, რომ ბანერი იმუშაოს სხვა ბრაუზერებში. თუმცა, არ ელოდოთ დიდ შესრულებას ყველგან (განსაკუთრებით IE 7 და უფრო ძველი) უახლესი CSS ტექნიკის ექსპერიმენტებისას.

შენიშვნა:გვერდზე სივრცის დასაზოგად, ბრაუზერის მწარმოებლის ყველა პრეფიქსი გამოტოვებულია. იხილეთ კოდი წყაროებში.

HTML მარკირება

პირველ რიგში, მოდით შევხედოთ ბანერის სტრუქტურას HTML-ში. ამ ეტაპზე უნდა წარმოვიდგინოთ, როგორ იმუშავებს ანიმაცია:

მარკირების სტრუქტურის უფრო ღრმად გასაგებად, მოდით ყურადღება გავამახვილოთ ნავზე:

სამი ანიმაცია ხდება ნავთან ერთად:

ნავი სრიალებს მარცხნივ. ვრცელდება შეუკვეთავ სიაზე (ჯგუფზე).

წყალზე ქანაობის ნავის იმიტაცია. ვრცელდება სიის პუნქტზე (ნავი).

კითხვის ნიშნის გამოჩენა. ვრცელდება div ელემენტზე (კითხვის ნიშანი).

თუ გადახედავთ დემო გვერდს, ხედავთ, რომ სიის ელემენტის (ნავის) ანიმაცია ასევე გავლენას ახდენს მის შიგნით არსებულ div ელემენტზე (კითხვის ნიშანი). ასევე, შეუკვეთავი სიის ანიმაცია „მოცურების გარეთ“ მუშაობს სიის პუნქტზე (ნავი და კითხვის ნიშანი).

აქედან გამომდინარე, შეგვიძლია დავასკვნათ, რომ ბავშვის ელემენტები, გარდა საკუთარი ქმედებებისა, იღებენ ანიმაციებს მშობლებისგან. ახლა რჩება მხოლოდ მშობლის/შვილის სტრუქტურების ჩამოთვლა.

CSS

სანამ დაიწყებთ ანიმაციის შექმნის ანალიზს, უნდა დარწმუნდეთ უკან თავსებადიძველი ბრაუზერებით.

უკანა თავსებადობა

ჩვენ უზრუნველვყოფთ უკანა თავსებადობას მარკირების უბრალოდ სტილისტიკით, თითქოს CSS ანიმაციები საერთოდ არ არსებობდეს. თუ ვინმე ათვალიერებს გვერდს ძველ ბრაუზერში, დაინახავს ჩვეულებრივ სტატიკურ სურათს და არა ცარიელ თეთრ ადგილს.

მაგალითად: რა მოხდება, თუ იყენებთ CSS-ს? ქვემოთ მოცემულის მსგავსად, პრობლემები იქნება:

/* არასწორია! */ @keyframe our-fade-in-animation ( 0% (გაუმჭვირვალობა:0;) 100% (გაუმჭვირვალობა:1;) ) div ( გამჭვირვალობა: 0; /* ეს div დამალულია ნაგულისხმევად - უი! */ ანიმაცია: ჩვენი - fade-in-ანიმაცია 1s 1 )

თუ ბრაუზერს არ აქვს ანიმაციების მხარდაჭერა, div ელემენტი მომხმარებლისთვის უხილავი დარჩება.

და აი, როგორ უზრუნველვყოფთ უკანა თავსებადობას ძველ ბრაუზერებთან:

/* TRUE */ @keyframe our-fade-in-animation ( 0% (გაუმჭვირვალობა:0;) 100% (გაუმჭვირვალობა:1;) ) div ( გამჭვირვალობა: 1; /* ეს div ნაგულისხმევად ჩანს */ ანიმაცია: ჩვენი - fade-in-ანიმაცია 1s 1 )

ახლა div ელემენტი გამოჩნდება მაშინაც კი, თუ ანიმაცია ვერ დაიწყება. და შიგნით თანამედროვე ბრაუზერებიანიმაციის დროს ჯერ დაიმალება.

გადახვევა

ახლა ჩვენ ვიცით, როგორ უზრუნველვყოთ ჩამორჩენილი თავსებადობა (რაც დაგეხმარებათ თავიდან აიცილოთ პრობლემები რეალურ პროექტებთან მუშაობისას). დროა შევქმნათ ჩვენი CSS კოდის საფუძველი.

თქვენ უნდა გახსოვდეთ 3 ქულა:

ვინაიდან ბანერი გამოყენებული იქნება სხვადასხვა საიტებზე, ჩვენ ყველაფერს გავაკეთებთ CSS სელექტორებიგანსაკუთრებული.ისინი ყველა დაიწყება #ad-1 იდენტიფიკატორით. ამ გზით ჩვენ შევეცდებით თავიდან ავიცილოთ გადახურვა ჩვენს კოდსა და საიტის კოდს შორის.

ჩვენ განზრახ უგულებელყოფთ ანიმაციის დაგვიანებასინსტალაციებში. თუ თქვენ იყენებთ ანიმაციის დაყოვნებას სტილის დაყენებისას ელემენტების ნაგულისხმევი ხილვადობით, ბანერის სტრუქტურა დაირღვევა სურათის ნაწილების უეცარი გაქრობით ან გამოჩენა ანიმაციის დასრულების შემდეგ. ანიმაციის შეფერხება სიმულირებულია კადრების ხანგრძლივობით და დაყენებით.

შეძლებისდაგვარად ჩვენ ვიყენებთ ერთ ანიმაციას რამდენიმე ელემენტისთვის.ამ გზით ჩვენ ვზოგავთ დროს და ვამცირებთ კოდის ზომას.

მოდით შევქმნათ საფუძველი ჩვენი ბანერისთვის. მოდით დავაყენოთ მისთვის შედარებითი პოზიციონირება ისე, რომ შიდა ელემენტები სწორად განთავსდეს. ასევე დამალავს რაიმე ელემენტის ფარგლებს გარეთ:

#ad-1 ( სიგანე: 720px; სიმაღლე: 300px; float: მარცხნივ; ზღვარი: 40px ავტომატური 0; background-image: url(../images/ad-1/background.png); ფონის პოზიცია: ცენტრი; ფონი -გამეორება: no-repeat: დამალული ფარდობითი box-shadow: 0px 6px #000;

შემდეგ ჩვენ ვაყენებთ სტილებს ტექსტისა და შეყვანის ველებისთვის. დარეკეთ შესაბამის ანიმაციებს. თქვენ ასევე უნდა დარწმუნდეთ, რომ შიგთავსს აქვს ყველაზე მაღალი z ინდექსი მოძრავი ნაწილებისთვის, რათა ისინი არ გადაფარონ:

#ad-1 #content ( სიგანე: 325px; float: მარჯვნივ; ზღვარი: 40px; ტექსტის გასწორება: ცენტრი; z-ინდექსი: 4; პოზიცია: შედარებითი; overflow: ხილული; ) #ad-1 h2 ( font-family: "Alfa Slab One", ფერი: #137dd5; delay */ ) #ad-1 h3 ( font-family: "Boogaloo", cursive; ფერი: #202224; შრიფტის ზომა: 31px; ხაზის სიმაღლე: 31px; text-shadow: 0px 0px 4px #fff; ანიმაცია: დაგვიანებული - fade-animation 10s 1 ease-in-out /* h3-ის გამოჩენა სიმულირებული დაგვიანებით */ ) #ad-1 ფორმა ( ზღვარი: 30px 0 0 6px; პოზიცია: ნათესავი; ანიმაცია: ფორმა-ანიმაცია 12s 1 ease-in; -out; /* ელ.ფოსტის მისამართის იმიტირებული დაგვიანებით შესვლის ფორმის ამოღება */ ) #ad-1 #email ( სიგანე: 158px; სიმაღლე: 48px; float: მარცხენა; padding: 0 20px; font-size: 16px; font-family: "Lucida Grande", sans-serif text-shadow: 1px 0px #a2917d;

საზღვარი: 1px მყარი #a2917d;

#ad-1 ul#water( /* თუ წყლისთვის სხვა ანიმაცია გჭირდებათ, შეგიძლიათ დაამატოთ აქ */ ) #ad-1 li#water-back ( სიგანე: 1200px; სიმაღლე: 84px; background-image: url( .. /images/ad-1/water-back.png: z-index: აბსოლუტური: -20px; #ad-1 li#water-front ( სიგანე: 1200px; სიმაღლე: 158px; background-image: url(../images/ad-1/water-front .png); background-repeat: z-index: 3; ბოლოში: -70 პიქსელი: წყლის წინა ანიმაცია ტალღების ჩახშობის სიმულაცია პერსპექტიული ეფექტის შესაქმნელად */ )

მოდით დავაყენოთ სტილის ნავი და მისი ელემენტები. ჩვენ ასევე ვუწოდებთ შესაბამის ანიმაციებს:

#ad-1 ul#boat ( სიგანე: 249px; სიმაღლე: 215px; z-ინდექსი: 2; პოზიცია: აბსოლუტური; ქვედა: 25px; მარცხნივ: 20px; overflow: ხილული; ანიმაცია: ნავი-ში-ანიმაცია 3s 1 გამარტივება ; /* სრიალებს ჯგუფს, როდესაც რეკლამა იწყება */ ) #ad-1 ul#boat li ( სიგანე: 249px; სიმაღლე: 215px; background-image: url(../images/ad-1/boat.png); პოზიცია: აბსოლუტური: 0px: ანიმაცია 2s infinite ease-in-out. ad-1 #question-mark ( სიგანე: 24px; სიმაღლე: 50px; background-image: url(../images/ad-1/question-mark.png); პოზიცია: აბსოლუტური; მარჯვნივ: 34px; ზედა: -30px ანიმაცია: დაგვიანებული-გაქრება ანიმაცია 4s 1 ease-in-out ;

ახლა მოდით შევქმნათ სტილები ღრუბლებისთვის. მათთვის ჩვენ გამოვიყენებთ ანიმაციას გაუთავებელი მოძრაობის ეფექტით. ილუსტრაცია აჩვენებს იდეის არსს:

და აქ არის CSS კოდი:

#ad-1 #clouds (პოზიცია: აბსოლუტური; ზევით: 0px; z-ინდექსი: 0; ანიმაცია: ღრუბლოვანი ანიმაცია 30s უსასრულო ხაზოვანი; /* გადაახვიეთ ღრუბლები მარცხნივ, გადააყენეთ და გაიმეორეთ */ ) #ad-1 # ღრუბლოვანი ჯგუფი -1 ( სიგანე: 720 პიქსელი; პოზიცია: აბსოლუტური; მარცხნივ: 0 პიქს. 1 ( სიგანე: 172 პიქსელი; სიმაღლე: 121 პიქსელი; url (../images/ad-1/cloud-1.png); პოზიცია: აბსოლუტური ზედა: 40 პიქსელი; ( სიგანე: 121 პიქსელი; სიმაღლე: 75 პიქსელი; ფონის სურათი: url( ../images/ad-1/cloud-2.png პოზიცია: -25px ) #ad-1 ; : url (../images/ad-1/cloud-3.png პოზიცია: აბსოლუტური: 530px);

ანიმაციები

შეხსენება:ამ მომენტიდან, რეალურად არაფერია ანიმაციური. თუ ახლა ჩვენს ბანერს დააკვირდებით, დაინახავთ სტატიკურ სურათს. აქ იქმნება ანიმაციები და იწოდება ზემოთ მოცემულ კოდში.

ახლა მოდით ჩავსუნთქოთ სიცოცხლე ჩვენს მშვენიერ სტატიკურ სურათს:

/* სიმულირებული დაყოვნების ანიმაცია გამოიყენება მრავალი ელემენტის საჩვენებლად. დაყოვნების სიმულაცია ხორციელდება პროცესის დაწყებით ანიმაციის 80% გაგრძელებით (და არა დაუყოვნებლივ). ამ გზით შეგიძლიათ ნებისმიერი დაყოვნების სიმულაცია: */ @keyframes delayed-fade-animation ( 0% (გაუმჭვირვალობა: 0;) 80% (გაუმჭვირვალობა: 0;) 100% (გაუმჭვირვალობა: 1;) ) /* ანიმაცია ფორმის ჩვენებისთვის ელექტრონული ფოსტის მისამართით და ღილაკით. ასევე გამოიყენება დაყოვნების იმიტაცია */ @keyframes ფორმა-ანიმაცია ( 0% (გაუმჭვირვალობა: 0; მარჯვნივ: -400 პიქსელი;) 90% (გაუმჭვირვალობა: 0; მარჯვნივ: -400 პიქს;) 95% (გაუმჭვირვალობა: 0,5; მარჯვნივ: 20 პიქსელი ;) 100% (გაუმჭვირვალობა: 1; მარჯვნივ: 0 პიქსელი;) ) /* ეს ანიმაცია გამოიყენება ნავის ეკრანიდან გამოსაყვანად ვიდეოს დასაწყისში: */ @keyframes boat-in-animation ( 0% (მარცხნივ: -200px;) 100% (მარცხნივ: 20px;) ) /* ანიმაცია ღრუბლებისთვის. ღრუბლების პირველი ჯგუფი მოძრაობას იწყებს ცენტრიდან, ხოლო მეორე - ეკრანის მარჯვნივ. პირველი ჯგუფი ნელ-ნელა იშლება ეკრანიდან, მეორე კი ჩნდება მარჯვნივ. მას შემდეგ, რაც მარცხენა ჯგუფი მთლიანად დაიმალება, ღრუბლები ძალიან სწრაფად უბრუნდებიან თავდაპირველ პოზიციას: */ @keyframes cloud-animation ( 0% (მარცხნივ: 0px;) 99.9999% (მარცხნივ: -720px;) 100% (მარცხნივ: 0px; ) ) / * ბოლო სამი ანიმაცია თითქმის ერთნაირია - განსხვავება მდგომარეობს ელემენტების პოზიციონირებაში. ისინი ახდენენ ოკეანის ტალღების შხეფების სიმულაციას: */ @keyframes boat-animation ( 0% (ქვემოთ: 0px; მარცხნივ: 0px;) 25% (ქვემოთ: -2px; მარცხნივ: -2px;) 70% (ქვემოთ: 2px; მარცხნივ : - 4px;) 100% (ქვემოთ: -1px; მარცხნივ: 0px;) ) @keyframes water-back-animation ( 0% (ქვემოთ: 10px; მარცხნივ: -20px;) 25% (ქვემოთ: 8px; მარცხნივ: - 22 პიქსელი; ) 70% (ქვემოთ: 12 პიქსელი; მარცხნივ: -24 პიქსელი;) 100% (ქვემოთ: 9 პიქსელი; მარცხნივ: -20 პიქსელი;) ) @keyframes წყლის წინა ანიმაცია ( 0% (ქვემოთ: -70 პიქსელი; მარცხნივ: -30 პიქსელი );

დასკვნა

ამ გაკვეთილზე ვისწავლეთ რამდენიმე ძირითადი კონცეფცია:

1. მემკვიდრე ელემენტები იღებენ მშობლების ანიმაციებს საკუთარი ანიმაციების გარდა.
2. ბანერის შექმნისას თქვენ უნდა შეეცადოთ გამოიყენოთ უნიკალური იდენტიფიკატორი, რათა თავიდან აიცილოთ კოდი არსებული CSS პროექტთან გადაფარვა.
3. ელემენტების პოზიცია და სტილი უნდა შეირჩეს ისე, თითქოს ანიმაცია არ იყოს ხელმისაწვდომი, რათა უზრუნველყოფილი იყოს უკანა თავსებადობა.
4. თუ შესაძლებელია, თქვენ უნდა გამოიყენოთ ერთი ანიმაცია რამდენიმე ელემენტისთვის.

დღეს ჩვენ ვაპირებთ შევქმნათ ბანერი CSS3 ანიმაციის გამოყენებით.

ამჟამად მხოლოდ Firefox და WebKit ბრაუზერები მხარს უჭერენ CSS ანიმაციებს, მაგრამ ჩვენ განვიხილავთ, თუ როგორ შეგვიძლია ამ ბანერების მუშაობა სხვა ბრაუზერებშიც (რომელსაც მე მე-18 საუკუნის ბრაუზერებს ვუწოდებ). თუმცა, თქვენ არ უნდა ელოდოთ დიდ მხარდაჭერას ყველა ბრაუზერში (განსაკუთრებით IE 7 და ქვემოთ) თანამედროვე CSS ტექნოლოგიების ექსპერიმენტების დროს.

მოდით შევქმნათ ანიმაციური ბანერები!

გთხოვთ გაითვალისწინოთ: სივრცის დაზოგვის მიზნით, ბრაუზერის ყველა პრეფიქსი წაშლილია. სმ. წყარო ფაილებიყველა CSS კოდის სანახავად. თუ არ იცნობთ CSS ანიმაციებს, გირჩევთპირველ რიგშიწაიკითხე ეს.

HTML მარკირება

პირველი, ჩვენ შევქმნით ბანერის სტრუქტურას HTML-ის გამოყენებით. ამ ეტაპზე ჩვენ უნდა ვიფიქროთ იმაზე, თუ როგორ გვსურს იმუშაოს ჩვენმა ანიმაციამ - როგორ იმოქმედებს ის ბავშვსა და მშობელ ელემენტებზე ჩვენი მარკირების სტრუქტურაში (ამას ქვემოთ აგიხსნით):