先上效果图

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. Java 开发者必须了解的 16 个Java 顶级开源项目！

    本文已经收录自笔者开源的 JavaGuide: https://github.com/Snailclimb/JavaGuide ([Java学习+面试指南] 一份涵盖大部分Java程序员所需要掌握的核 ...

  2. tensorflow object detection api android

    https://blog.csdn.net/weixin_40355324/article/details/80651350

  3. linux中cd / cd~ cd cd- 和cd..之间的区别

    cd        进入用户主目录  cd ~     进入用户主目录  cd -      返回进入此目录之前所在目录  cd ..     返回上一级目录  cd ../..  返回上两级目录  ...

  4. Kubernetes系列二: 使用kubeadm安装k8s环境

    环境 三台主机,一台master,两台node 作为master 作为node节点 作为node节点 每台主机Centos版本使用 CentOS Linux release 7.6.1810 (Cor ...

  5. Android开发学习2--Android Studio目录结构、Module目录介绍、Android创建及运行和HelloWord的扩展----极其简单的游戏界面

    学习笔记: 1.Android Studio项目结构 Android Studio提供了很多项目结构,最常用的是Android 和 project Project列举出了所有文件. 建议使用Andro ...

  6. P1010 幂次方 P1022 计算器的改良

    P1010 幂次方 一.题目 https://www.luogu.org/problemnew/show/P1010 二.代码 #include<bits/stdc++.h> using ...

  7. WMS备货单保存后自动新增选项不勾选

  8. sklearn包源码分析（二）——ensemble（未完成）

    网络资源 sklearn包tree模型importance解析

  9. 吴裕雄--天生自然PYTHON学习笔记：解决ElementNotInteractableException: Message: element not interactable

    submit=self.wait.until(EC.element_to_be_clickable((By.ID,'loginAction'))) 2.永久覆盖element来保证自己的element ...

  10. Node.js //TODO

    目录 技术背景 开发环境 学习过程 参考资料 结束语 技术背景 开发环境 学习过程 参考资料 结束语