先上效果图

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 之动态变换背景颜色的更多相关文章

  1. jquery动态改变背景颜色插件

    GETHUB下载地址 背景颜色用animate方法时时无法改变颜色的 所以要使用插件进行补充. 用法: <!DOCTYPE html> <html> <head> ...

  2. JavaScript实例技巧精选(14)—动态变化背景颜色

    >>点击这里下载完整html源码<< 这是截图: 网页背景颜色随时间变化,核心代码如下: <SCRIPT LANGUAGE="JavaScript"& ...

  3. css消除已有的背景颜色

    比如我们在第三方库的时候,样式会有你不喜欢的,就比如背景颜色.那么就要去除已有的背景颜色 background-color:transparent;

  4. CSS设置浮动导致背景颜色设置无效的解决方法

    float浮动会使父元素高度塌陷,父级元素不能被撑开,所以导致背景颜色不能被撑开 解决方法: 对父元素设置高度 对父元素设置 overflow:hidden清除浮动 把父元素也设置为float浮动 结 ...

  5. 纯 CSS 解决自定义 CheckBox 背景颜色问题

    CodePen 需要使用色 #ec6337(当然可以是任意颜色),解决问题:记住密码定制 CheckBox,解释全在注释里 主要使用到 ::before 或 ::after 伪类处理,伪装成内部的那个 ...

  6. jquery效果，多个div，点击任何一个div，那么这个div会切换文字，变换背景颜色，再次点击其他的div ,这个div会发生刚才的变化，之前点击的div的颜色会变回来

    首先css样式: /*原来的背景色*/ .bg { background:'red' } /*需要切换的背景色*/ .bg_click { background:'green' } JS: $('di ...

  7. HTML之背景颜色的改变

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. js获取背景颜色

    //js获取背景颜色var Airport=$("#Airport").css('background-color'); js设置背景颜色 $("#intercity&q ...

  9. Atitit 动态按钮图片背景颜色与文字组合解决方案

    Atitit 动态按钮图片背景颜色与文字组合解决方案 转换背景颜色,setFont("cywe_img", fontScale, 50, 5) 设置文字大小与坐标 文字分拆,使用字 ...

随机推荐

  1. 第一个----关于GPIO的总结

    首先,自己本来报的是单片机的  ,但是因为队友的脑残,给我报成了嵌入式,哎,惨啊,就得从头看这个云里雾里的东西,但是没办法,都报名了  不能呢个交白卷,不然自己就是逃兵了,还有20天就比赛了  我得加 ...

  2. mysql_secure_installation 安全安装（用于生产环境设置）

    编译安装完mysql5.6,如果用于生产环境,最好执行mysql_secure_installation来做一些常规化安全设置. 需要提前将~mysql/bin加入环境变量 /apps/mysql// ...

  3. grep -v|grep -F

    cat a cat b #取b中不含1的行 b #b先和a比较,两者交集与b再取交集 b: b: b: b: b: b:22 $ grep -F a -f a b#a先和a比较,两者交集与b再取交集 ...

  4. 通过javascri实现输入框只能输入数字

    输入框只能输入数字 <input type="text" onkeyup="value=value.replace(/[^\d]/g,'');"> ...

  5. The website is API（4）

    1.淘宝商品信息定向爬虫 目标:获取淘宝搜索页面信息,提取其中的商品名称和价格 理解:淘宝的搜索接口 翻页的处理 技术路线:requests+re https://s.taobao.com/searc ...

  6. 2018 ACM-ICPC 宁夏 C.Caesar Cipher（模拟）

    In cryptography, a Caesar cipher, also known as the shift cipher, is one of the most straightforward ...

  7. 三、linux-mysql mysql的多实例

    1.什么是mysql多实例 一个机器开通多个端口,运行多个mysql服务器进程,这些服务进程通过不同的socket监听不同的服务端口提供各自的服务,但它们共用一台mysql安装程序,使用不同的my.c ...

  8. 计算a^b==a+b在（l，r）的对数Codeforces Round #597 (Div. 2)

    题:https://codeforces.com/contest/1245/problem/F 分析:转化为:求区间内满足a&b==0的对数(解释见代码) ///求满足a&b==0在区 ...

  9. linux 新添加的硬盘格式化并挂载到目录下方法

    需求: 新增加一块硬盘sdb,将sdb分区,只分一个区,格式化,挂载到目录/ssd下.原文:https://www.cnblogs.com/ddbear/p/7009736.html 1.  查看现在 ...

  10. [LC] 156. Binary Tree Upside Down

    Given a binary tree where all the right nodes are either leaf nodes with a sibling (a left node that ...