CSS 之动态变换背景颜色

先上效果图

HTML代码：

1 2 3 4 5 6 7 8 9

<div class="header"> <h1>GCCHRN'S BLOG</h1> <ul class="nav nav-tabs"> <li role="presentation" class="active"><a href="#">首页</a></li> <li role="presentation"><a href="#">分类</a></li> <li role="presentation"><a href="#">归档</a></li> <li role="presentation"><a href="#">关于</a></li> </ul> </div>

CSS代码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21大专栏  CSS 之动态变换背景颜色pan> 22 23 24 25 26 27 28 29 30 31 32

<style type="text/css"> .header{ padding: 40px 30px 60px 30px; text-align: center; animation:mymove 5s infinite; /*animation 时间 播放次数*/ animation-direction:alternate; /*是否循环交替反向播放动画*/ /*Safari 和 Chrome:*/ -webkit-animation:mymove 5s infinite; } @keyframes mymove { 0% {background:#87CEFF;} 25% {background:#54FF9F;} 50% {background:#7CCD7C;} 75% {background:#63B8FF;} 100% {background:#00FFFF;} } /*Safari 和 Chrome:*/ @-webkit-keyframes mymove { 0% {background:#87CEFF;} 25% {background:#54FF9F;} 50% {background:#7CCD7C;} 75% {background:#63B8FF;} 100% {background:#00FFFF;} } </style>

• 才发现我如此喜欢前端，
• 特别是对这种动态效果，
• 特别喜欢，
• 无法抗拒，
• 这仅仅是开始而已，
• 主要还是记录下来给自己看的，
• 然后一点一点进步，
• 让进步看得见！