Сделать фон исчезающим / в

#css #css-transitions #translate

#css #css-переходы #перевести

Вопрос:

Есть ли какой-либо способ, которым я могу использовать CSS3, чтобы исчезать и исчезать на сплошном белом фоне a <div> ? содержимое должно оставаться видимым, поэтому должен исчезать только фон.

Есть идеи с использованием css3 переходов / преобразований?

спасибо за вашу помощь.

Ответ №1:

Конечно, вы можете использовать свойство transition непосредственно на background-color :

 div {
   background-color: white;    

   /* transition the background-color over 1s with a linear animation */
   transition: background-color 1s linear;
}

/* the :hover that causes the background-color to change */
div:hover {
   background-color: transparent;      
}

Вот пример исчезновения красного фона :hover .

1. Не знал, что вы действительно можете анимировать цвет фона. Я думаю, что это намного лучше, чем мое решение 🙂

2. Переходы @Husky довольно хороши, но я с нетерпением жду, когда мы сможем удалить все префиксы, специфичные для браузера.

3. вы могли бы использовать LESS / SASS и использовать там микшины. По крайней мере, это делает его терпимым, если вы используете много свойств CSS3.

4. @Husky Я еще не пробовал LESS / SASS, но да, префиксы определенно являются хорошим аргументом в их пользу.

5. спасибо за jsfiddle! вот разветвленный образец, в котором цвет фона исчезает после загрузки jsfiddle.net/divzero/Ddhwx

Ответ №2:

Это может оказаться полезным для примеров исчезновения цвета изображения и фона: — http://nettuts.s3.amazonaws.com/581_cssTransitions/demos.html

Однако использование CSS 3 для выполнения перехода ограничит эффект браузерами, которые его не поддерживают.

Ответ №3:

У вас может быть два divs в одном контейнере div. Первый div содержит белый фон, второй получает содержимое.

Затем используйте преобразование CSS3, чтобы анимировать непрозрачность первого div до нуля.

1. Спасибо за предложение. В конечном итоге я установил первый встроенный цвет в div и второй цвет (т. Е. белый) внешний в качестве фона-цвет: белый!важно; а также свойство перехода.