В проектите, с които сме работили, е въртележка. Имахме идеи за това как можем да направим тази работа, с помощта на CSS-анимация и трансформиране на собствеността, но това ще даде въртележката превърта автоматично и не позволява въвеждане на потребителя, че мама не се налага. Малко мисъл, ние решихме, че използването на абсолютно позициониране и: целта псевдо-селектор за промяна на Z-индекса и непрозрачността на нашата въртележка, която карах през тях.
Нека създадем такова нещо!
Структурата на нашата въртележка изглежда така: ние имаме основен div.carousel-обвивка, която дава ни въртележка размер. Вътре ни черупка, ние имаме span.hidden-целеви елементи с уникални идентификатори, които действат като мишени за нашите контролни точки и въртележка div.carousel-т елементи, които съдържат съдържанието на всеки един от елементите на въртележка.
Всеки от div.carousel-т елементи ще бъде съдържание, както и две препоръки, a.arrow-предишна и a.arrow-следващия, които ние използваме, за да преминете между елементите на въртележката.
Тъй като нашите индивидуални въртележка елементи са позиции: абсолютна (можем да ги поставя на върха на една от друга), ние трябва да зададете височина div.carousel-обвивка ръчно. Ние ще се опитаме да се облекчи СГО за нашите външни стилови листове, но някои от точките, ние ще трябва да пиша, за да ни използват въртележка и мащабируема.
Ние също използваме CSS, за да зададете фоново изображение на нашите две div.carousel-т елементи, за да ги направят по-живи, но ние ще го оставите по-долу, за да видите нашите маркировка е по-разбираемо.
Това е цялата HTML. Това е изненадващо лесно. В CSS (SCSS, в този случай), че е мястото, където се случва магията.
Имате ли кръгово движение, което е напълно функционален и 100% се състои от HTML и CSS! Създали сме въртележка с три елемента, но можете да продължите да добавяте елементи, уверете се, че сте добавили повече целеви клетки и се свързва връзките си правилно.
Високите реализации вас!
ВНИМАНИЕ! Използвате остарял браузър Internet Explorer
Този сайт е изграден върху най-напредналите и модерни технологии и не поддържа Internet Explorer втората и седмата версия.
Свързани статии