#javascript #css #opacity #fade #setinterval
#javascript #css #непрозрачность #исчезать #setinterval
Вопрос:
Я хочу, чтобы часть текста исчезла. Я делал такие вещи, используя Javascript и setInterval. Это работает, но кажется, что слишком много мусора для такого простого эффекта.
Есть ли CSS-способ сделать текст исчезающим? Например, он начинается с 0% непрозрачности и становится на 100% непрозрачным в течение определенного мной периода времени.
Спасибо.
Комментарии:
1. ДА… с помощью css и, возможно, строки javascript, но это должен быть css3 и, следовательно, не будет поддерживать старые браузеры.
Ответ №1:
Вы можете сделать это на :hover с помощью преобразований CSS3. Очень простой пример:http://jsfiddle.net/xaBgQ
Комментарии:
1. Интересно, но это не для наведения курсора мыши. Я хочу, чтобы текст появлялся постепенно при первом появлении страницы, а затем оставался видимым.
2. Да, переходы CSS3 могут происходить только в CSS-целевых событиях, таких как:hover, :active:,:focus и т.д. Javascript — единственный способ для того, о чем вы говорите.
Ответ №2:
Не только с помощью CSS (во всех браузерах), jQuery предоставляет хороший API для таких эффектов, метод fadeIn, вероятно, подойдет.
Ответ №3:
Переходы CSS3 поддерживают это, но поддержка в настоящее время немного непостоянна.
Ответ №4:
Да, вы можете использовать функции синхронизации перехода CSS3.
Посмотрите здесь несколько примеров:
Ответ №5:
Некоторые идеи, которые приходят на ум:
1) Фреймворк анимации, такой как jQuery, YUI и т.д. Конечно, они, вероятно, используют setInterval внутренне, но тогда это их проблема, а не ваша.
2) CSS3 — Если вам нужно работать только с последними версиями браузеров или у вас есть запасной план, это может быть хорошим выходом. Множество примеров, если вы загуглите «CSS3 animation»
3) Если ваш текст статичен и мал, возможно, вместо него анимированный GIF.
Надеюсь, это поможет!