Мені потрібно змінити колір елементівавтоматично, щоб бути нескінченно працює, з наступним кодом досягнення ефекту я хочу, але тільки коли миша проходить через елемент (div). Як я можу зробити це, щоб він завжди міняв колір?
Дякую і повагу.
.box{
background-color: #900;
height: 50px;
width: 100px;
padding: 1em;
color: #fff;
font-weight: bold;
transition:background-color 3s linear;
-webkit-transition:background-color 3s linear;
-o-transition: background-color 3s linear;
-moz-transition: background-color 3s linear;
-ms-transition: background-color 3s linear;
}
.box:hover{
background-color: #090;
}
Відповіді:
3 для відповіді № 1Ви можете це зробити Ключові кадри CSS.
@keyframes changeColor {
0% {
background-color: #900;
}
50% {
background-color: #090;
}
100% {
background-color: #900;
}
}
.box {
animation-name: changeColor;
animation-iteration-count: infinite;
animation-duration: 3s;
background-color: #900;
height: 50px;
width: 100px;
padding: 1em;
color: #fff;
font-weight: bold;
}<div class="box"></div>1 для відповіді № 2
Цей ефект можна досягти за допомогою анімації css (ключові кадри). читати тут
.box {
background-color: #900;
height: 50px;
width: 100px;
padding: 1em;
color: #fff;
font-weight: bold;
transition: background-color 3s linear;
-webkit-transition: background-color 3s linear;
-o-transition: background-color 3s linear;
-moz-transition: background-color 3s linear;
-ms-transition: background-color 3s linear;
}
@keyframes hoverme {
0% {
background-color: #900;
}
25% {
background-color: red;
}
50% {
background-color: green;
}
25% {
background-color: red;
}
100% {
background-color: #900;
}
}
.box:hover {
animation: hoverme 3s infinite;
}<div class="box">
Hover me :)
</div>