Практикувайте чрез правилото за преобразуване на CSS

Anonim

Често е необходимо да се съживят елементите на страницата, без да се прибягва до отнемащи време опции за използване на JavaScript. Правилото за преобразуване на CSS е удобен инструмент за придаване на сложна динамика, която няма да отнеме много усилия за създаване.

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

Основни характеристики на правилото за преобразуване

Правилото за преобразуване на CSS е проектирано да използва прости преобразувания на елементи на страници и се използва много просто:

  • transform: none;
  • transform: function ();
  • функция: функция () функция ();

Следващият пример изброява основните функции, които могат да се използват за преобразуване на елементи, показва тяхното въздействие върху примери.

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

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

Удобно е да използвате правилото за преобразуване на CSS, за да създавате намеци и коментари на елементите на страницата. Посетителят не винаги е ориентиран към страницата, особено когато е дошъл за първи път. По традиция всеки разработчик на сайт вярва, че дизайнът на уеб ресурс и диалогът с посетителя са негова област на експертиза.

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

Комбинацията от елементи в трансформацията

CSS на анимационната трансформация е разрешена чрез няколко функции в едно правило. Можете да зададете положителните и отрицателните стойности на трансформациите, важно е те да имат смисъл.

Примерът показва как картината променя външния си вид, когато задържите мишката, ако правилото за трансформация включва незабавно:

  • мащабиране;
  • извъртане
  • измести.

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

В някои случаи е по-добре да се комбинират, например: две диви са разположени една в друга. Външното е определено с едно преобразуващо правило, а вътрешното е друго. Когато се определи общата логика на необходимите промени, тя може да бъде прехвърлена към правилото на един елемент.

В примера, полученото решение наподобява трансформация в триизмерно пространство, но това не е свързано с правилата за CSS 3D преобразуване. Отчитането на осите Z и манипулациите с обратната страна на елемент е отделна група от свойства и правила.

Въпреки това, каквато и да е графичната идея, всички трансформации се извършват в равнината, ефектите се формират поради визуалното възприятие и правилната промяна на формите на елементите. Съдържанието на елементите и рисунката на линиите са от значение.

Функции на правилото за CSS

Като общо правило на CSS, стилът на преобразуване е статичната логика на елементните трансформации, чийто алгоритъм не може да бъде променен след формулиране на набор от правила.

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

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

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

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

Трябва да се има предвид, че промяната на съдържанието на даден елемент, особено на свойството background-image, може да доведе до „стреса“ - нарушение на необходимата логика на преобразуване поради техническите характеристики на приложението (браузър, протокол, сървър, други). Има смисъл да скриете елемент преди да промените съдържанието му: покажете и продължете, когато процесът на актуализация вече е завършен.

Трансформирайте участието на сървъра

Ако разработчиците напуснаха нуждата от пълна актуализация на страницата за доста дълго време и технологии като AJAX станаха норма за показване и актуализиране на елементите на страницата, тогава се очаква динамиката на промените в стиловите листове по време на работата на уеб ресурса.

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

Използването на JavaScript + AJAX е динамиката на елементите, но използването на сървърния език за промяна на CSS файла е доста разумна допълнителна опция. Посетителите се различават не само по темперамента на работата, но и във функционалността, която очакват и възможността да я покажат.

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