css3实现奥运五环颜色样式代码

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

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

以下是 css3实现奥运五环颜色样式代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>css3ʵ�ְ����廷��ɫ��ʽ����</title>

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
/* flag */
ul.flag{position:relative;margin:40px auto 0 auto;width:700px;}
.flag li, .flag li:before, .flag li:after{position:absolute;-webkit-border-radius:6em;-moz-border-radius:6em;border-radius:6em;}
.flag li{width:12em;height:12em;left:0;top:0;}
.flag li:after{display:block;content:"";top:0;left:0;right:0;bottom:0;border-width:1.4em;border-style:solid;border-color:#9e90ee;}
.flag li.blue{z-index:10;}
.flag li.blue:after{border-color:blue;}
.flag li.blue.alt{z-index:24;}
.flag li.blue.alt:after{border-top-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}
.flag li.yellow{z-index:10;left:6.8em;top:5.7em;}
.flag li.yellow.alt{z-index:23;}
.flag li.yellow:after{border-color:yellow;}
.flag li.yellow.alt:after{border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}
.flag li.black{z-index:10;left:13.6em;top:0;}
.flag li.black:after{border-color:#000;}
.flag li.green{z-index:9;left:20.4em;top:5.7em;}
.flag li.green:after{border-color:green;}
.flag li.green.alt{z-index:24;}
.flag li.green.alt:after{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;}
.flag li.red{z-index:8;left:27.2em;top:0px;}
.flag li.red:after{border-color:red;}
.flag li.red.alt{z-index:24;}
.flag li.red.alt:after{border-top-color:transparent;border-right-color:transparent;border-left-color:transparent;}
</style>

</head>
<body>

<ul class="flag"> 
	<li class="blue"></li> 
	<li class="blue alt"></li> 
	<li class="yellow"></li> 
	<li class="yellow alt"></li> 
	<li class="black"></li> 
	<li class="green"></li> 
	<li class="green alt"></li> 
	<li class="red"></li> 
	<li class="red alt"></li> 
</ul>
</body>
</html>

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