悬停时不停地变换颜色

我需要自动改变元素的颜色以无限地运行，下面的代码实现了我想要的效果，但只有当鼠标通过元素（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; 


}

来源

2016-01-14 Diana Pérez

当鼠标进入你想要过渡到infintely运行颜色之间改变，而不停止元素的DIV？请澄清您的要求.... – repzero

你可以用CSS keyframes来做到这一点。

@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>

来源

2016-01-14 01:09:35

非常感谢！ –

当然，这是解决方案吗？ –

可以实现通过使用CSS动画（关键帧）这个效果。阅读here

.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>

来源

2016-01-14 06:07:44

悬停时不停地变换颜色

回答

相关问题