首页
网络新闻
seo优化
网络营销
网络推广
建站知识
网络安全
网络编程
网络编程
奇闻怪事
主页
/
建站知识
/
CSS和“★”字符制做的中国国旗实现代码
建站知识
2021-07-03 08:42
www.168986.cn
长沙网站建设
在网上看见 某位牛人用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-:64px; margin-left:64px; color:yellow; font-size:192px; } .small{ position:absolute; background-color:red; color:yellow; font-size:64px; } .s1{ margin-: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-: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-: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-: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-:64px;margin-left:64px;color:yellow;font-size:192px;">★</div> <div style="z-index:2;position:absolute;background-color:red;margin-: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-: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-: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-: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>
提示:您可以先修改部分代码再运行
上一篇:
基于firebug的firefox扩展 css usage
下一篇:
优秀的CSS 框架整理
长沙网站设计
小企业网页制作 小企业网页制作方法
企业网站建设现状
网站建设找哪家
东莞个人网站制作
武汉企业网站建设
东莞网站设计公司
网站建设案例 网站建设成功案例
郑州app开发价格
开发微信小程序的流程
网站建设的过程
广州app定制开发
快速免费建网站
苏州网站建设公司哪家好
微网站建设报价
重庆网站制作
广告公司网站模板
狼蚁网络搜索
狼蚁网络导航
长沙seo优化
小企业网页制作 小企业网页制作方法
企业网站建设现状
网站建设找哪家
东莞个人网站制作
武汉企业网站建设
长沙网络营销
1
免费私人服务器
2
南宁企业建站
3
html网站模板建站
4
制作网站的公司 网站制作专业的公司
5
中国域名服务商有哪些?2021年中国十大域名注册
长沙网站建设
规范HTML代码可以节省修改代码的时间
探讨网站前期必做的策划与分析
网站加速哪家强?四大免费CDN服务评测大PK
css 行级元素在多浏览器下的宽度问题 与解决方法
CSS控制前端图片HTTP请求的各种情况示例