先上效果图

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. curl命令简介

    curl 文件传输工具 参数: -c --cokie-jar: 将cookie写入到文件 -b --cokie: 从文件中读取cookie -C --continue-at: 断点续传 -d --da ...

  2. Java进行http请求时，放置会话信息到header里面

    public class CreateHttpTest { public static void main(String[] args) { createHttp(); } public static ...

  3. CodeForces 998B Cutting（贪心）

    https://codeforces.com/problemset/problem/998/B 简单贪心题 代码如下: #include <stdio.h> #include <st ...

  4. Fabric不支持对同一个数据的并发事务处理

    Fabric不支持对同一个数据的并发事务处理,也就是说, 如果我们同时运行了invoke(一),invoke(二),那么只会第一条Transaction成功, 而第二条失败.因为在Committer节 ...

  5. IE浏览器弹出的文件下载工具条实现自动另存为

    IE浏览器中如果有一个文件可以下载,用鼠标点击一下文件的超链接,会在IE浏览器下方出现一个工具条,工具条上主要有“打开” “保存”两个按钮. 如果点击“保存”按钮,会把附件保存到系统的“下载”或“Do ...

  6. idea maven Running C:\Users\Administrator\AppData\Local\Temp\archetype1tmp

    Running C:\Users\Administrator\AppData\Local\Temp\archetype1tmp 在IDEA中通过maven项目管理工具创建javaweb项目的时候一直卡 ...

  7. Spring Cloud服务的注册与发现（Eureka）

    一.spring cloud简介 spring cloud 为开发人员提供了快速构建分布式系统的一些工具,包括配置管理.服务发现.断路器.路由.微代理.事件总线.全局锁.决策竞选.分布式会话等等.它运 ...

  8. 在服务器搭建git服务器

    服务端操作 安装Git及创建用户组.用户 123 yum install gitgroupadd gitadduser git -g git 禁止用户git登录 修改/etc/passwd文件: 找到 ...

  9. [LC] 438. Find All Anagrams in a String

    Given a string s and a non-empty string p, find all the start indices of p's anagrams in s. Strings ...

  10. 5）添加分发参数c，选择控制器

    目录关系:  代码展示: newnewnew.controller.class.php <?php /** * Created by PhpStorm. * User: Interact * D ...