Рекламный блок "место свободно" с эффектом
 | |
| С эффектор полного разворота на 360 градусов баннера при наведении клика. Где может быть как картинка или надпись под установку в блок. А так это безусловно небольшой хак, который больше внимание привлекает. Где установка проста и все происходит на стилях. Не исключаю, что это элемент можно задействовать в совершенно другом месте. В код был добавлен класс, что отвечает за видимость клика, где вписываем ссылки, можно перейти на заданную страницу. Чтоб понять полную работу, для этого можете посмотреть демонстрацию и сами оценить материал в действиях и где еще можно применить, кроме своего прямого назначение. HTML Код <div class="zornet_ru_tensam"> <div style="cursor:pointer" class="dermugtuman"><img title="Место свободно" src="http://zornet.ru/zornet_ru4/50511465.gif"></div> <br><br> <div style="cursor:pointer" class="dermugtuman"><img title="Место свободно" src="http://zornet.ru/Ajaxoskrip/3835891.gif"></div> <br><br> <div style="cursor:pointer" class="dermugtuman"><img title="Место свободно" src=""></div> <br><br> <div style="cursor:pointer" class="dermugtuman"><img title="Место свободно" src=""></div> </div> CSS Код .dermugtuman {display:inline;margin-right:10px;color: #f9fbfd;} .dermugtuman:hover {display:inline;} .zornet_ru_tensam {bottom:0;margin-top:0px; margin-right:0px;} .dermugtuman img {width:88px;height:31px;background:url(http://zornet.ru/Aben/ABGDA/0NyAUcjwSaqMO-vri-nXrQ.png);-webkit-transition: all 400ms;-moz-transition: all 400ms;-o-transition: all 400ms;transition: all 400ms;position:relative;bottom:0px;right:0px;} .dermugtuman img:hover {transform:rotate(-360deg);-webkit-transform:rotate(-360deg);-moz-transform:rotate(-360deg);-o-transform:rotate(-360deg);position:relative;bottom:0px;right:0px;} | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |