先上效果图
HTML代码：
123456789 | <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代码：
123456789101112131415161718192021大专栏 CSS 之动态变换背景颜色pan>2223242526272829303132 | <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> |
- 才发现我如此喜欢前端，
- 特别是对这种动态效果，
- 特别喜欢，
- 无法抗拒，
- 这仅仅是开始而已，
- 主要还是记录下来给自己看的，
- 然后一点一点进步，
- 让进步看得见！
来源：https://www.cnblogs.com/lijianming180/p/12037921.html
