CSS 之动态变换背景颜色
其他
2019-12-14 01:34:11
阅读次数: 0
先上效果图
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>
|
- 才发现我如此喜欢前端,
- 特别是对这种动态效果,
- 特别喜欢,
- 无法抗拒,
- 这仅仅是开始而已,
- 主要还是记录下来给自己看的,
- 然后一点一点进步,
- 让进步看得见!
转载自www.cnblogs.com/lijianming180/p/12037921.html