2016-11-11 48 views
0

这可能是一个愚蠢的问题,但我想知道如何使我的代码中的标记从紫色到红色的渐变颜色变回原来的颜色,而不是悬停在标记或任何东西上。如何使文本在css中改变颜色?

我一直在尝试做一些研究,并且不断地遇到所谓的webkit和webkit动画。

我不确定如何使用这个,因为我有非常多的初学者与html,css和js。有人能给我提供一个如何完成我所寻找的颜色之间转换的例子吗?

+1

http://www.w3schools.com/css/css3_animations.asp –

回答

0
<!DOCTYPE html> 
<html> 
<head> 
<style> 
div { 
    width: 100px; 
    height: 100px; 
    background-color: red; 
    -webkit-animation-name: example; /* Safari 4.0 - 8.0 */ 
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */ 
    animation-name: example; 
    animation-duration: 4s; 
} 

/* Safari 4.0 - 8.0 */ 
@-webkit-keyframes example { 
    from {background-color: red;} 
    to {background-color: yellow;} 
} 

/* Standard syntax */ 
@keyframes example { 
    from {background-color: red;} 
    to {background-color: yellow;} 
} 
</style> 
</head> 
<body> 

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p> 

<div></div> 

<p><b>Note:</b> When an animation is finished, it changes back to its original style.</p> 

</body> 
</html>