Я@R |
Привет, Гость! Войдите или зарегистрируйтесь.
Наведите мышку на изображение
[html]<style>img[type=a]:hover{width:50%;-moz-transition:width 1s,-moz-transform 5s;-moz-transform:rotate(180deg);}
</style>
<img type="a" src="https://lh3.googleusercontent.com/-CcEk_7hP6wA/T5jv9fRJ-mI/AAAAAAAAAJQ/tJAZYk-FhV4/s173-c-k/star.png" style="width: 50%; -moz-transition: width 1s ease 0s, -moz-transform 5s ease 0s;">[/html]
** пример работает пока только для Мозиллы.
Исходный текст
<style>img[type=a]:hover{width:50%;-moz-transition:width 1s,-moz-transform 5s;-moz-transform:rotate(180deg);}
</style>
<img type="a" src="https://lh3.googleusercontent.com/-CcEk_7hP6wA/T5jv9fRJ-mI/AAAAAAAAAJQ/tJAZYk-FhV4/s173-c-k/star.png" style="width: 50%; -moz-transition: width 1s ease 0s, -moz-transform 5s ease 0s;">
Здесь сама картинка нас не инетересует - может быть любая, а вот настройки стилей, интересны
Используется стили трансформации и псевдостиль hover - реакция при наведении мыши на объект
и абсолютно ни каких скриптов, гифок и индусских джиквери