Html5+css3=движение объекта при наведении

Автор Тема: Html5+css3=движение объекта при наведении  (Прочитано 3053 раз)

Оффлайн CleverАвтор темы

  • Бизнес оценка: (7, 100%)
  • Ветеран
  • *****
  • СПАСИБО: 493
  • Сообщений: 964
  • Карма: 86
  • Пол: Мужской
  • Награды КМС поисковой оптимизации
    • Просмотр профиля

Оффлайн CleverАвтор темы

  • Ветеран
  • *****
1
Здравствуйте , вот решил показать тем кто не в курсе , как сделать так , чтобы у нас отображалось определенное слово , а при наведении это слово дополнялось вразой засчет открытия блока , и при этом эффект происходил бы плавно , и без использования скриптов.  Скажу сразу , что используя html5+css3 этого вполне реально добиться. Итак , для начала нам понадобится страница с разметкой html, каскадные стили , и один блок - div , над которым мы и будем работать.  Приступим:
Код:
Только зарегистрированные пользователи могут видеть код. Пожалуйста, войдите или зарегистрируйтесь.Это и есть каркас , который

Добавлено: 24-05-2012, 18:28:52

Немного не вложился в отведенное  время , поэтому продолжим тут:
Здравствуйте , вот решил показать тем кто не в курсе , как сделать так , чтобы у нас отображалось определенное слово , а при наведении это слово дополнялось фразой засчет открытия блока , и при этом эффект происходил бы плавно , и без использования скриптов.  Скажу сразу , что используя html5+css3 этого вполне реально добиться. Итак , для начала нам понадобится страница с разметкой html, каскадные стили , и один блок - div , над которым мы и будем работать.  Приступим:
Код:
Только зарегистрированные пользователи могут видеть код. Пожалуйста, войдите или зарегистрируйтесь.Это и есть каркас , который нам нужен , но без стилей он работать не будет. Теперь добавим их между тегами head , и получим работоспособный код , вот готовый пример:
Код:
Только зарегистрированные пользователи могут видеть код. Пожалуйста, войдите или зарегистрируйтесь.Кто не в курсе:  для того чтобы фигура двигалась , используется свойство css3 -  transform:translate;
для того чтобы оно двигалось , да еще и плавно , добавляем свойство transition;   
Если кому что-нибудь непонятно , спрашиваем , не комплексуем , всегда рад ответить , либо здесь , либо на моем сайте посвященном изучению html5.
Посмотреть html5+css3 пример в действии
« Последнее редактирование: 24-05-2012, 18:28:52 от Justwebber »


 

Похожие темы

  Тема / Автор Ответов Последний ответ
7 Ответов
3106 Просмотров
Последний ответ 23-08-2012, 10:48:49
от Clever
0 Ответов
2248 Просмотров
Последний ответ 29-11-2012, 01:56:57
от MorVit
3 Ответов
1384 Просмотров
Последний ответ 27-02-2014, 12:29:33
от Donovan
0 Ответов
1422 Просмотров
Последний ответ 11-08-2014, 22:54:41
от smartimax87
10 Ответов
2853 Просмотров
Последний ответ 30-01-2015, 17:32:13
от WebHope