Започнете с CSS полигони

Дълго време фундаменталната структура на правоъгълни блокове и кръгове, която оформя уебсайтове, измъчва дизайнери и творчески разработчици. Така че, когато CSS полигони с клип-път излязоха на сцената в браузърите WebKit, аз веднага изгарях от вълнение.



Използвано главно за увиване на текст и маскиране на съдържание, свойството предлага и на дизайнерите възможност да създадат по-вълнуващи форми в чист CSS, без да е необходимо платно или SVG. Чувствах, че това може да промени начина, по който проектирам и се развивам, с резултати, които няма да отнемат много време, за да окажат въздействие.



Основната цел на Clip-path е да маскира регион (не само изображения, но действително съдържание), но в този урок ще се задълбоча конкретно в това, което може да се направи със свойството полигон. Ще ви преведа как Sass for-loops може да се използва за създаване на широки преходни ефекти и ще съживи колекция от CSS полигони

Създайте набора divs

Създаваме ефект на вентилатор, при който всеки от седемте триъгълни полигона се анимира от централна точка



Създаваме ефект на вентилатор, при който всеки от седемте триъгълни полигона се анимира от централна точка

Това, към което се стремим, е ефект, при който набор от триъгълни форми се развява от централна точка (вижте Codepen за този урок ). Първо трябва да създадете div за толкова многоъгълници, колкото ви е необходимо (тук използвам седем), и да ги поставите един върху друг.

.polygon-wrap { div { position: absolute; width: 500px; height: 275px; top: 0; left: 0; } }

Създайте първото състояние на полигоните

Ще преминем към полигоните, така че вентилаторът да расте от средата навън. За целта първо искаме да дефинираме първоначалното състояние на полигоните. Ще добавим цвят на фона, който автоматично ще бъде маскиран във формата, която създавате:

.polygon-wrap { div { -webkit-clip-path: polygon(50% 95%, 50% 95%, 50% 95%); background-color: #46008C; } }

Задействане на анимация

Ще ви е необходим спусък за движение, за да настъпи преходът. Тук просто ще поставим състояние на задържане върху елемента на обвивката.



.polygon-wrap:hover { }

Създаване на полигони

По-скоро възхитително, CSS полигоните се създават, като се използва само един ред код. Полигоните могат да приемат всякаква форма, която ви харесва: те не са обвързани с произволен брой точки или страни. Ако обаче премествате фигура като нас, не забравяйте да използвате същия брой точки и да използвате същата точка в масива, за да анимирате всяка следваща точка:

..polygon-wrap:hover { div:nth-child(1) { -webkit-clip-path: polygon(19% 42%, 26% 32%, 50% 95%); } }

Този многоъгълник има триъгълна форма, която образува лявата страна на седемчастния вентилатор. Процентните стойности се подравняват по координати X и Y, въз основа на размера на родителския div.

Преходи чрез for-loop

След като сте създали вторите състояния на полигоните си, можете да създадете обширен набор от преходи, като използвате Sass for-loops. Те карат всеки div да анимира малко по-бавно от своя предшественик, създавайки усещане за „смесване“. Това също повишава производителността, тъй като процесорът прави едно след друго, а не седем неща наведнъж.

.polygon-wrap { div { transition: 0.2s; @for $i from 1 through 7 { &:nth-child(#{$i}) { $tdelay: ((($i*0.1))+0.2s); $tduration: ($i*0.05 + 0.25s); transition-delay($tdelay); transition-duration($tduration); } } } }

Този бит код по същество създава разликата във времето за всеки от div. Първоначалният буфер е преходът „база“ (тук 0,2 секунди). След това има стойност на забавяне (0,1 секунди). Тази стойност се умножава по номера на поръчката на div (от един до седем), за да се получи забавяне на прехода.

На парчета

На парчета

На парчета

В личен проект, На парчета , Използвах същото свойство на многоъгълник, за да създам изображения на 30 различни застрашени животни, всяко от които е съставено от 30 триъгълни „парчета“. Използвах базови CSS преходи за смесване от животно на животно с размахващо движение по екрана. Животните сякаш се трансформират едно в друго; ефект, създаден с помощта на преходните закъснения, обсъдени в този урок.

В рамките на In Pieces движението се създава последователно. на div елементите се дават цели числа на дъщерни индекси, които след това се умножават по определена стойност, за да се даде времето на забавяне. Използвах 30 елемента div, за да съдържа 30-те отделни полигона. След това въведох забавяне на прехода от 0,1 секунди, така че 10-ият полигон се анимира след една секунда (0,1 x 10), а 30-ият полигон премина след три секунди (0,1 x 30).

страхотни неща за правене с microsoft surface pro

Блестящ ефект

Тези закъснения бяха използвани и за създаване на „блясък“ върху животните, който може да се види на всеки няколко секунди. Последователността на закъсненията позволява просто превключване на непрозрачността на всички елементи, създавайки широк блясък, подобен на ефекта на светлината върху стъклото. Това е много специфичен пример и използването на такива закъснения не е ограничено само до CSS полигони.

Това, което тези забавяния конкретно постигат, е елемент на плавност на движението, който създава много по-естествена анимация. Това е фино, но изключително полезно докосване. Без това смесване, набор от полигони, превръщащи се в нещо друго, може да бъде много груб за окото. Това също така допринася за по-добро представяне, тъй като има по-малко едновременни движения.

Заключение

Ето го! Това е чудесен начин за създаване на последователни движения с полигони. Има много вълнуващи творчески възможности за изследване с CSS полигони, така че играйте наоколо и вижте какво можете да направите с тези фигури.

Думи : Брайън Джеймс

Брайън Джеймс е дизайнер на свободна практика и творчески програмист, известен със създаването си На парчета . Тази статия първоначално е публикувана в брой 272 от нетно списание .

Хареса ли ви това? Прочетете тези!