Новосибирск +7(983)

По всем вопросам :

Телеграм : @radgura

Пример хорошей анимации меню на css

 

CSS стили:

panel { padding-left: 1px; width:192px; list-style:none; padding-top:1px; display:inline-block; } #panel li { background: url("/img/userimages/user_781/back.jpg") repeat scroll 0 0 rgba(0, 0, 0, 0); border: 1px dotted silver; color: #8d8c8b; margin-top: 1px; text-align: left; width: 195px; } #panel li a { color:#fff; display:block; padding: 9px 8px; } #panel li a:hover { color:#fff; } #panel li.animation {-moz-transition: all 0.3s ease-in-out 0s; -moz-transform:translateX(0px); -o-transition: all 0.3s ease-in-out 0s; -o-transform:translateX(0px); -webkit-transition: all 0.3s ease-in-out 0s; -webkit-transform:translateX(0px); } #panel li a.active{ color:#fff; } #panel li.animation { -moz-transition: all 0.3s ease-in-out 0s; -moz-transform:translateX(0px); -o-transition: all 0.3s ease-in-out 0s; -o-transform:translateX(0px); -webkit-transition: all 0.3s ease-in-out 0s; -webkit-transform:translateX(0px); } #panel li.animation:hover { color: aqua; background: #6a6869; -moz-transform:translateX(10px); -o-transform:translateX(10px); -webkit-transform:translateX(10px); -moz-transition: all 0.5s ease-in-out 0s; -o-transition: all 0.5s ease-in-out 0s; -webkit-transition: all 0.5s ease-in-out 0s; }

 

HTML:

<ul id="panel">
<li class="animation"><a>Постельное белье</a></li>
<li class="animation"><a>Покрывала</a></li>
<li class="animation"><a>Одеяла</a></li>
<li class="animation"><a>Полотенца</a></li>
</ul>

Комментарии (0)

Здесь ещё нет оставленных комментариев.

Оставьте свой комментарий

  1. Добавление комментария от гостя.
Вложения (0 / 3)
Share Your Location

Как с нами связаться

По всем вопросам пишите  

Телеграм: @radgura

OnLine заказ

Отправить сообщение

Нажимая на кнопку «Отправить сообщение», я соглашаюсь:
* с условиями публичной оферты
* обработку моих персональных данных


RAD компоненты

Please publish modules in offcanvas position.