Блог

Главная - Вопросы по программированию - Часто меняйте цвет фона с помощью CSS

Часто меняйте цвет фона с помощью CSS

#javascript #html #css #background

#javascript #HTML #css #фон

Вопрос:

У меня есть ссылка с фоновым цветом ярко-зеленого цвета, и я пытаюсь изменить фон на серебристый через некоторый интервал, чтобы создать эффект мигания. Есть ли способ сделать это с помощью CSS, поскольку я не могу использовать javascript?

Комментарии:

1. кодирование на сайтах Google, я полагаю

2. смотрите «Анимацию css», пример скрипки здесь fiddle.jshell.net/ZH8GN

3. w3schools.com/css/css3_animations.asp

Ответ №1:

Вы можете сделать это с помощью css, как показано ниже.

Вот ДЕМОНСТРАЦИЯ скрипки

 <div class="blinkdiv">
</div>

CSS

 @-webkit-keyframes blackWhite {  
  0% { background-color: red; }
  50% { background-color: red; }
  51% { background-color: black; }
  100% { background-color: black; }
}

@-webkit-keyframes blackWhiteFade {  
  0% { background-color: red; }
  50% { background-color: black; }
  100% { background-color: red; }
}

.blinkdiv {
    height: 100px;
    background-color: black;
  -webkit-animation-name: blackWhite;
  /* -webkit-animation-name: blackWhiteFade; */
  -webkit-animation-iteration-count: infinite;  
  -webkit-animation-duration: 2s; 
}

Надеюсь, это то, что вы искали.

Обновленная скрипка в соответствии с вашими требованиями

Комментарии:

1. Но помните, что вы можете использовать его в некоторых браузерах, которые поддерживают анимацию CSS3. Эта анимация работает только в браузерах, поддерживающих — webkit

2. Спасибо! Ты звезда 🙂

3. @Michael Рад, что это помогло вам 🙂