[其它] 本人css3写的几面国旗 [复制链接]

sfzheng2007　楼主

高级会员 

帖子: 158
体力: 543
威望: 2
居住地: 广东省广州市

发表于 2010-5-24 22:26:23 |显示全部楼层

<!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=utf-8" />
<title>几面国旗 - 人生旅途中</title>
<style type="text/css">
	body{ background-color:#D0DADF;}
	.flag{ width:450px; height:300px;box-shadow:5px 5px 5px #333; -moz-box-shadow:5px 5px 5px #333; float:left; margin:0px 15px 15px; -webkit-box-shadow:5px 5px 5px #999; position:relative; overflow:hidden;}
	.china{ background-color:#F00;}
	.china .bigStar{ color:#FF0; font-size:96px; position:absolute; top:20px; left:21px;}
	.china .smallStar{ color:#FF0; position:absolute; font-size:28px;}
	.china .one{-o-transform:rotate(23deg); -moz-transform:rotate(23deg); -webkit-transform:rotate(23deg); top:18px; left:143px;}
	.china .two{ -o-transform:rotate(46deg); -moz-transform:rotate(46deg); -webkit-transform:rotate(46deg); top:49px; left:173px;}
	.china .three{ -o-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); top:93px; left:167px;}
	.china .four{-o-transform:rotate(23deg); -moz-transform:rotate(23deg); -webkit-transform:rotate(23deg); top:129px; left:140px;}
	
	.congo{ background: #008836;}
	.congo .yellow{ width:150px; height:300px; -o-transform:skew(-45deg,0deg); -moz-transform:skew(-45deg,0deg); -webkit-transform:skew(-45deg,0deg); position:absolute; left:150px; background-color:#FEFE00;}
	.congo .red{ width:425px; height:425px; background-color:#F00; -o-transform:rotate(45deg); -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg); position:absolute; top:88px; left:237px;}
	
	.korea{ background: #FEFEFE;}
	.korea .threeLine{ width:76px; position:absolute;}
	.korea .line{ width:76px;height:17px; background-color:#000000; margin-bottom:6px; position:relative;}
	.korea .line_dir_1{-o-transform:rotate(-48deg); -moz-transform:rotate(-48deg); -webkit-transform:rotate(-48deg); top:32px; left:55px;}
	.korea .line_dir_2{ -o-transform:rotate(48deg); -moz-transform:rotate(48deg); -webkit-transform:rotate(48deg); top:33px; right:57px;}
	.korea .line_dir_3{ -o-transform:rotate(48deg); -moz-transform:rotate(48deg); -webkit-transform:rotate(48deg); top:211px; left:51px;}
	.korea .line_dir_4{ -o-transform:rotate(-48deg);  -moz-transform:rotate(-48deg); -webkit-transform:rotate(-48deg); top:211px; right:52px;}
	.korea .zindex_0{ z-index:0;}
	.korea .zindex_1{ z-index:1;}
	.korea .vline{ width:17px; height:65px; background-color:#fff; position:absolute; top:-1px; left:29px; z-index:1}
	.korea .mround{ width:180px; height:180px; border-radius:90px; -moz-border-radius:90px; -webkit-border-radius:90px; background-color:#FE0000; position:absolute; top:62px; left:128px;-o-transform:rotate(22deg); -moz-transform:rotate(22deg); -webkit-transform:rotate(22deg);}
	.korea .halfblueround{ width:180px; height:90px; border-radius:0px 0px 90px 90px;  -moz-border-radius:0px 0px 90px 90px; -webkit-border-radius:0px; -webkit-border-bottom-left-radius:90px; -webkit-border-bottom-right-radius:90px;/*解决safari半圆显示问题*/background-color:#0B4199;position:absolute; bottom:0px;}
	.korea .Shalfblueround{ width:90px; height:45px; border-radius:45px 45px 0px 0px; -moz-border-radius:45px 45px 0px 0px; -webkit-border-radius:0px; -webkit-border-top-left-radius:45px; -webkit-border-top-right-radius:45px;background-color:#0B4199; position:absolute; right:0px; top:46px;}
	.korea .Shalfredround{ width:90px; height:45px; border-radius:0px 0px 45px 45px; -moz-border-radius:0px 0px 45px 45px; -webkit-border-radius:0px; -webkit-border-bottom-left-radius:45px; -webkit-border-bottom-right-radius:45px;background-color:#FE0000; position:absolute; left:0px; top:89px;}
	
	.tuerqi{ background:#FE0000;}
	.tuerqi .whiteRound{ width:156px; height:156px; background-color:#FEFEFE;border-radius:78px; -moz-border-radius:78px; -webkit-border-radius:78px; position:absolute; top:72px; left:88px;}
	.tuerqi .redRound{ width:126px; height:126px; background-color:#FE0000;border-radius:63px; -moz-border-radius:63px; -webkit-border-radius:63px; position:absolute; top:87px; left:123px;}
	.tuerqi .Star{ color:#fff; font-size:60px; position:absolute; top:113px; left:226px; transform:rotate(-16deg); -o-transform:rotate(-16deg);-moz-transform:rotate(-16deg); -webkit-transform:rotate(-16deg);}
</style>
</head>

提示：您可以先修改部分代码再运行

兼容最新的 FF Opera Safari Chrome 。IE9没装没得看。IE9以下不兼容呵呵

要点：
1、定位
四面国旗都用到了定位
2、层次
在韩国国旗四角用了层次 z-index 控制显示
3、旋转
四面国旗都用到旋转，控制五星的角度跟刚果国旗红色部分旋转，通过溢出隐藏的方法，把多余的内容隐藏
4、半圆
利用border-radius圆角，如上半圆，只设置上面两个圆角，另外两个设为零，高度设为半径，宽度为直径，就可以得到半圆，可以在韩国国旗的样式了解
5、其他
比如box-shadow、skew等css3才有的属性

[ 本帖最后由 sfzheng2007 于 2010-5-25 01:22 编辑 ]

已有 2 人评分	威望	收起理由
yoom	+ 1	做的很好！
goos	+ 1	鼓励探索与尝试 +1

总评分: 威望 + 2 查看全部评分

No cross, no crown

		自动登录	找回密码
密码			注册

[其它] 本人css3写的几面国旗 [复制链接]

回复 13# ling3492 的帖子

回复 20# sww518 的帖子

浏览过的帖子

浏览过的版块