CSS和“★”字符制做的中国国旗实现代码

所属分类：网页制作 / CSS 阅读数： 1952

收藏 0赞 0分享

在网上看见某位牛人用CSS做的红旗就是很牛！
上图先看：
CSS红旗

<html> <head> <title>CSS中国国旗</title> <style type="text/css"> .all{ background-color:red; width:960; height=640; } .five{ background-color:red; width:480; height=320; } .big{ position:absolute; background-color:red; margin-top:64px; margin-left:64px; color:yellow; font-size:192px; } .small{ position:absolute; background-color:red; color:yellow; font-size:64px; } .s1{ margin-top:32px; margin-left:288px; filter:progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand',M11=0.6565,M12=0.7543,M21=-0.7543,M22=0.6565); } .s2{ margin-top:96px; margin-left:352px; filter:progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand',M11=0.8978,M12=0.4404,M21=-0.4404,M22=0.8978); } .s3{ margin-top:192px; margin-left:352px; filter:progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand',M11=0.9994,M12=0.0359,M21=-0.0359,M22=0.9994); } .s4{ margin-top:256px; margin-left:288px; filter:progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand',M11=0.9357,M12=-0.3528,M21=0.3528,M22=0.9357); } </style> </head> <body> <div class="all"> <div class="five"> <div class="big">★</div> <div class="small s1">★</div> <div class="small s2">★</div> <div class="small s3">★</div> <div class="small s4">★</div> </div> </div> </body> </html> 第2种代码，全部镶嵌在“<body>..</body>”网页标签里： <div style="background-color:red;width:960;height=640;"> <div style="background-color:red;width:480;height=320;"> <div style="z-index:2;position:absolute;background-color:red;margin-top:64px;margin-left:64px;color:yellow;font-size:192px;">★</div> <div style="z-index:2;position:absolute;background-color:red;margin-top:32px;margin-left:288px;color:yellow;font-size:64px;filter:progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand',M11=0.6565,M12=0.7543,M21=-0.7543,M22=0.6565);">★</div> <div style="z-index:2;position:absolute;background-color:red;margin-top:96px;margin-left:352px;color:yellow;font-size:64px;filter:progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand',M11=0.8978,M12=0.4404,M21=-0.4404,M22=0.8978);">★</div> <div style="z-index:2;position:absolute;background-color:red;margin-top:192px;margin-left:352px;color:yellow;font-size:64px;filter:progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand',M11=0.9994,M12=0.0359,M21=-0.0359,M22=0.9994);">★</div> <div style="z-index:2;position:absolute;background-color:red;margin-top:256px;margin-left:288px;color:yellow;font-size:64px;filter:progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand',M11=0.9357,M12=-0.3528,M21=0.3528,M22=0.9357);">★</div> </div> </div>

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

更多精彩内容其他人还在看

CSS和“★”字符制做的中国国旗实现代码

CSS伪类对象before和after的用法实例详解

CSS3 实用技巧：实现黑白图像效果示例代码

IE.JS解决IE兼容性问题方法汇总

实现CSS3中的border-radius(边框圆角)示例代码

CSS line-height行高上下居中垂直居中样式属性

CSS Float布局过程与老生常谈的三栏布局

邮箱css加载失败怎么办网站css加载异常原因分析

CSS控制样式的三种方式(优先级对比验证)

meta http-equiv="X-UA-Compatible" content="IE=7" 意思是将IE8用IE7进行渲染

Discuz7.2 IE9兼容性写法杜工完全修补方案

网络赚钱

站长故事

CSS和“★”字符制做的中国国旗实现代码

CSS伪类对象before和after的用法实例详解

CSS3 实用技巧：实现黑白图像效果示例代码

IE.JS解决IE兼容性问题方法汇总

实现CSS3中的border-radius(边框圆角)示例代码

CSS line-height行高上下居中垂直居中样式属性

CSS Float布局过程与老生常谈的三栏布局

邮箱css加载失败怎么办 网站css加载异常原因分析

CSS控制样式的三种方式(优先级对比验证)

meta http-equiv="X-UA-Compatible" content="IE=7" 意思是将IE8用IE7进行渲染

Discuz7.2 IE9兼容性写法 杜工完全修补方案

网络赚钱

站长故事

邮箱css加载失败怎么办网站css加载异常原因分析

Discuz7.2 IE9兼容性写法杜工完全修补方案