ПредишенСледващото

Marquee на място с помощта на CSS, дизайн и разработка на сайта

Добър ден. 🙂

Наскоро бях помолен да организира онлайн лентата с новини. Същността на проблема е, че хората искат да обновите съществуваща линия, която бе организирана с помощта на стар HTML тагове . Беше решено да се направи всичко, с конвенционална CSS.

Защо решихте да обновите и конвертирате съществуваща линия. Факт е, че преди да се направи превъртане, използвайте HTML таг, който сега се счита за остаряла и употребата му не се препоръчва, тъй като в HTML5 не е така.

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





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

Тогава просто трябва да напишете този блок стилове, както и анимации, които ще направят движението на низа.

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

  • ширина: 100%; - Определя ширината на родителското устройство в нашия палатка.
  • бяло пространство: nowrap; - Нито дума се пренесе на следващия ред.
  • препълване: скрит; - намаляване на всички, че от нашия блок с работещ линия, за да се избегнат инциденти.

Други стилове обхващат:

  • езика: вграден блок; - ние правим нашия педя линия блок елемент
  • подложка ляв: 100%; - направете остави марж за цялата широчина на родителското устройство.
  • -WebKit-анимация и анимация - анимация отнасяща се до устройството. Времетраене анимация 10 секунди. Можете да промените стойността на техните собствени.
  • @ -webkit-ключови кадри палатка и @keyframes палатка - самата анимация.

Толкова за основните параметри. Както казах по-горе, други стилове могат да добавят това, което искате.

И все пак мнозина смятат остарели превъртане елемент. В крайна сметка, с развитието на HTML и CSS, откриват нови възможности и да направи някои анимация на сайта никога не е било по-лесно. Работещи линия е просто остаряла. Въпреки това, много от тях продължават да го използвате и като практика показва, често тенденциите от онова време, което беше в миналото.

Това е всичко, благодаря ви за вниманието. 🙂

Ако сте били от полза за работата си, можете да подкрепят сайта :)

Здравейте скъпи приятели

Имате AdBlock инсталирано разширение или други подобни. Добавете сайта си в белия списък, и по този начин да допринесе за vnesesh неговото развитие. Инструкции за това как да деактивирате AdBlock искат този прозорец

Свързани статии

Подкрепете проекта - споделете линка, благодаря!