Здравейте скъпи посетители! CSS Нашият следващия урок е посветена на създаването на GIF-анимация, се активира, когато мишката върху статично изображение. Методът, който ще бъде описан в този урок е изобретен в края на 90-те години, когато Gif е практически единственият превозвач на анимацията в интернет. Днес той отстъпи на лидера, но остава доста популярен като метод, визията, която сега присъства.
За провеждане на урока, ще са ни необходими 2 файлове (снимки): статично изображение и GIF-анимация. Изображенията трябва да са с еднакъв размер.
По традиция, създаване на файлове index.html и style.css и пишат в уеб документ е начало код:
Сега ние трябва да се създаде в HTML дизайн себе си като отправна точка на изображението. Пишем, за да е:
Така че, в крайна сметка са HTML, сега можете да го затворите и да се работи с стилове. Пишем в style.css стилове за целия блок Gif:
GIF дисплей # 58; блок;
ширина # 58; 500px;
височина # 58; 100 пиксела;
фон # 58; URL # 40; stat.gif # 41; никой не се повтаря;
>
Както може да се види, първоначалната (статично) изображението се задава като фон блок с ширина и височина на изображението. Сега трябва да направим нашата анимация не се вижда в ситуация, в която мишката се кръжи. Пишем този стил:
a.gif IMG видимост # 58; скрит;
>
След това, ние трябва да се уверим, че фонът (неподвижно изображение), за да се види, когато мишката:
Остава само да покажем нашата навигация:
a.gif # 58; мишката IMG видимост # 58; видима;
граница # 58; 0;
>
Това е всичко. Нашият метод успешно работи във всички браузъри.
За анимацията започва, когато щракнете върху връзката, а не когато мишката върху него, просто трябва да замени всички параметри на hiover активен.
Благодаря ви за вниманието!
Съвместимост: Internet Explorer 6-7; Mozilla Firefox 2.xx - 3.0; Opera 8.xx - 9.xx
---------------------------------------
Правила копират учебни материали
демонстрация
Свали урока (с цип, 49 Kb)
Свързани статии