需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<style>标签中，输入css代码：。
body {
animation: change 3s linear 0s infinite
}
@keyframes change {
0% {color: #333}
50% {color: #f60}
100% {color: #f00}
}
3、浏览器运行index.html页面，此时字体颜色会随着时间的变化而自动变化。
方框用过渡走一圈变色用css实现方法CSS3样式，ClassName = animate
<style>
.animate{
width:65px
height:40px
background:#92B901
color:#ffffff
position:absolute
font-weight:bold
font:12px '微软雅黑', Verdana, Arial, Helvetica, sans-serif
padding:20px 10px 0px 10px
display:blcok
margin:5px
-webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s
-webkit-border-radius:5px
-o-transition-property:width,height,-o-transform,background,font-size,opacity
-o-transition-duration:1s,1s,1s,1s,1s,1s
-moz-transition-property:width,height,-o-transform,background,font-size,opacity
-moz-transition-duration:1s,1s,1s,1s,1s,1s
transition-property:width,height,transform,background,font-size,opacity
transition-duration:1s,1s,1s,1s,1s,1s
border-radius:5px
opacity:0.4
}
.animate:hover{
-moz-transform: rotate(360deg)
-webkit-transform: rotate(360deg)
-o-transform: rotate(360deg)
transform: rotate(360deg)
opacity:1
background:#1ec7e6
width:90px
height:60px
font-size:16px
}
</style>
