CSS3实现图形颜色渐变

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 CSS3实现图形颜色渐变的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CSS3实现图形颜色渐变</title>
<link rel="stylesheet" href="css/style.css">
<style>
#animate img {
     background: red;  
     -webkit-animation: super-rainbow 15s infinite alternate linear; 
     -moz-animation: super-rainbow 15s infinite alternate linear; 
}

@-webkit-keyframes super-rainbow {
    0%   { background: red; } 
    20%  { background: orange; }
    40%  { background: yellow; }
    60%  { background: green; }
    80%  { background: blue; }
    100% { background: violet; }
}

@-moz-keyframes super-rainbow {
    0%   { background: red; } 
    20%  { background: orange; }
    40%  { background: yellow; }
    60%  { background: green; }
    80%  { background: blue; }
    100% { background: violet; }
}

#animate img:nth-of-type(2) { -webkit-animation-delay: 1s; -moz-animation-delay: 1s; }
#animate img:nth-of-type(3) { -webkit-animation-delay: 2s; -moz-animation-delay: 2s; }
#animate img:nth-of-type(4) { -webkit-animation-delay: 3s; -moz-animation-delay: 3s;  }

#transition img {
     background-position: 0 0;
     background-size: 200% 100%;
     background-color: red;
     background-image: -webkit-gradient(linear, left top, left bottom, from(red), to(violet), color-stop(0.2, orange), color-stop(0.4, yellow), color-stop(0.6, green), color-stop(0.8, blue)); 
     background-image: -webkit-linear-gradient(left, red, orange, yellow, green, blue, violet);
     background-image:    -moz-linear-gradient(left, red, orange, yellow, green, blue, violet); 
     background-image:     -ms-linear-gradient(left, red, orange, yellow, green, blue, violet);
     background-image:      -o-linear-gradient(left, red, orange, yellow, green, blue, violet);
     background-image:         linear-gradient(left, red, orange, yellow, green, blue, violet);
     
   -moz-transition: all 0.3s ease-out;  /* FF4+ */
     -o-transition: all 0.3s ease-out;  /* Opera 10.5+ */
-webkit-transition: all 0.3s ease-out;  /* Saf3.2+, Chrome */
    -ms-transition: all 0.3s ease-out;  /* IE10? */
        transition: all 0.3s ease-out;  
}

#transition img:hover {
     background-position: -100% 100%;    
}
  </style>
</head>

<body>

<div id="page-wrap">
	<h1>Color Animate Any Shape</h1>
	 
	 <section id="animate">
	 
	   <h2>Animation</h2>
	<p>At the time of creation of this demo (May 2011), WebKit and Firefox 5 
	Beta only.</p>
	<img src="images/marilyn.png" alt=""> <img src="images/marilyn.png" alt="">
	<img src="images/marilyn.png" alt=""> <img src="images/marilyn.png" alt="">
	   
	 </section>
	 
	 <section id="transition">
	 
	   <h2>Transition</h2>
	<img src="images/bike.png" alt="">
	 
	 </section>
	 	
	</div>
<style type="text/css" style="display: none !important;">
	* {
		margin: 0;
		padding: 0;
	}
	body {
		overflow-x: hidden;
	}
	.bsa_it_ad {
		padding: 8px 4px 8px 12px !important;
		position: relative;
		border: 0 !important;
		background: #D6D5D5 !important;
		border-top: 0 !important;
		box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
		font: 11px "Lucida Grande", Sans-Serif !important;
	}
	.bsa_it_ad:before, .bsa_it_ad:after {
		content: "";
		position: absolute;
		top: 0;
		left: 6px;
		width: 100%;
		height: 100%;
		background: #989898;
		border-bottom: 6px solid #989898;
		z-index: -1;
		box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
	}
	.bsa_it_ad:before {
		top: 0;
		left: 12px;
		z-index: -2;
		background: #6C6666;
		border-bottom: 12px solid #6C6666;
	}

	.bsa_it_ad a {
	  margin: 0 !important;
		padding: 0 !important;
	}
	.bsa_it_ad a img {
	  border: 0 !important;
		position: static !important;
	}
	.bsa_it_ad a:hover img {
		margin: 0 !important;
	}
	.bsa_it_ad a:hover {
	  background: none !important;
	}
	.bsa_it_i {
		margin: 0 15px 0 0 !important;
	}
	.bsa_it_t {
		font-size: 14px !important;
		margin: 12px 0 0 0 !important;
	}
	.bsa_it_d {
		padding-right: 10px;
	}
	.bsa_it_p{
		display: none !important;
	}
	#demo-bar-ad {
		width: 416px;
		position: absolute;
		right: 0;
		top: -20px;
		font: 11px "Lucida Grande", Sans-Serif !important;
	}
	#bsap_aplink {
		position: absolute;
		color: #999;
		text-decoration: none;
		bottom: 8px !important;
		right: 8px !important;
		padding: 0 !important;
	}
	.bsa_it_p a:hover {
		background:none !important;
	}
	#demo-top-bar {
		text-align: left;
		background: #e18728;
		position: relative;
		zoom: 1;
		width: 100% !important;
		z-index: 6000;
		box-shadow: 0 0 10px black;
		padding: 20px 0 15px;
	}
	#demo-bar-inside {
		width: 960px;
		margin: 0 auto;
		position: relative;
	}
	#demo-top-bar:before, #demo-top-bar:after {
		content: "";
		position: absolute;
		top: 0;
		left: 6px;
		width: 100%;
		height: 100%;
		background: #e18728;
		border-bottom: 6px solid #8F5314;
		z-index: -1;
		box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
	}
	#demo-top-bar:before {
		top: 0;
		left: 12px;
		background: #6C6666;
		border-bottom: 12px solid #62390E;
	}

	#demo-bar-buttons {
		display: inline-block;
		width: 236px;
		text-align: center;
		vertical-align: top;
		font-size: 0;
	}
	#demo-bar-buttons a {
		font-size: 12px;
		color: white;
		display: block;
		margin: 2px 0;
		text-decoration: none;
		font: 14px "Lucida Grande", Sans-Serif !important;
	}
	#demo-bar-buttons a:hover,
	#demo-bar-buttons a:focus {
		color: #333;
	}

	#demo-bar-badge {
		display: inline-block;
		width: 302px;
		padding: 0 !important;
		margin: 0 !important;
		background-color: transparent !important;
	}
	#demo-bar-badge a {
		display: block;
		width: 100%;
		height: 38px;
		border-radius: 0;
		bottom: auto;
		margin: 0;
		background: url(/images/examples-logo.png) no-repeat;
		background-size: 100%;
		overflow: hidden;
		text-indent: -9999px;
	}
	#demo-bar-badge:before, #demo-bar-badge:after {
		display: none !important;
	}
</style>
</body>
</html>

CSS代码(style.css):

/* CSS-Tricks Example by Chris Coyier http://css-tricks.com*/
*{margin:0;padding:0;}
body{font-family:"HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;font-weight:300;font-size:14px;line-height:1.5;}
h1,h2{font-weight:300;}
h1{font-size:40px;}
h2{font-size:30px;}
article,aside,figure,footer,header,hgroup,menu,nav,section{display:block;}
#page-wrap{width:960px;margin:80px auto;}

附件:下载该文件资源,减少时间成本(增值服务)