码迷,mamicode.com
首页 > Web开发 > 详细

CSS 之动态变换背景颜色

时间:2019-12-14 09:26:41      阅读:715      评论:0      收藏:0      [点我收藏+]

标签:div   active   分类   ini   lin   inf   frame   代码   log   

先上效果图

技术图片

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

CSS 之动态变换背景颜色

标签:div   active   分类   ini   lin   inf   frame   代码   log   

原文地址:https://www.cnblogs.com/lijianming180/p/12037921.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!