承接
网站维护 网站升级 数据转换 页面美化 插件二开 BUG修复
热门
插件 板摸 教程 分享 攻略 经验 电脑 服务器
分类
数据转换 网站升级 故障排查 BUG修复 页面美化 插件升级
草根吧»论坛首页 › ∷草根吧扩展区∷ › PHP技术区 › CSS3绘图实例代码~纯CSS代码画图！
返回列表 发新帖
查看: 496|回复: 0

[HTML+CSS+JS特效] CSS3绘图实例代码~纯CSS代码画图！

[复制链接]
小草根

6673

热度

1万

元宝

262

贡献

管理员

DZ专员
发表于 2014-12-15 15:46:53 | 显示全部楼层 |阅读模式

css3绘图实例代码，请在火狐运行，css3的圆角形状，在经过transform处理之后，overflow属性hidden值的表现会出现不兼容，moz核心下正常，在webkit核心的浏览器下，hidden的区域始终是方块形状，无视圆角。
代码如下
QQ截图20141215154613.jpg

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>CSS3绘图实例代码</title>
  6. <style type="text/css">
  7. *{
  8.         margin:0;
  9.         padding:0;
  10. }
  11. body {
  12.         background: #fff;
  13. }
  14. .color1{
  15.         background: #ffb400;
  16. }
  17. .color2{
  18.         background: #e78500;
  19. }
  20. .color3{
  21.         background: #bd5d00;
  22. }
  23. .color4{
  24.         background: #9e3300;
  25. }
  26. .color5{
  27.         background: #772400;
  28. }
  29. div{
  30.         overflow: hidden;
  31. }
  32. .wrapper{
  33.         width:450px;
  34.         height:450px;
  35.         left:50%;
  36.         top:50%;
  37.         margin:-225px 0 0 -225px;
  38.         position: absolute;
  39. }
  40. .top{
  41.         width:48px;
  42.         height:62px;
  43.         top:9px;
  44.         left:232px;
  45.         position: absolute;
  46. }
  47. .top .right{
  48.         width:48px;
  49.         height:62px;
  50.         border-radius: 35px 40px 0px 0px/15px 70px 10px 0px;
  51.         z-index: 1;
  52.         position: absolute;
  53. }
  54. .top .left{
  55.         width:160px;
  56.         height:320px;
  57.         top:7px;
  58.         left:-93px;
  59.         z-index: 2;
  60.         border-radius: 160px/320px;
  61.         position: absolute;
  62. }
  63. .top .mask1{
  64.         width:40px;
  65.         height:100px;
  66.         border-radius: 40px/100px;
  67.         background: #fff;
  68.         z-index: 3;
  69.         top:0px;
  70.         left:-32px;
  71.         position: absolute;
  72. }
  73. .top .mask2{
  74.         width:200px;
  75.         height:200px;
  76.         border-radius: 200px;
  77.         background: #fff;
  78.         z-index: 4;
  79.         top:55px;
  80.         left:-92px;
  81.         position: absolute;
  82. }
  83. .center{
  84.         width:340px;
  85.         height:192px;
  86.         margin:79px 0 0 57px;
  87. }
  88. .center .box1{
  89.         width:360px;
  90.         height:360px;
  91.         border-radius:180px;
  92.         margin:0 0 0 -20px;
  93. }
  94. .center .box1 .box1_1{
  95.         width:300px;
  96.         height:400px;
  97.         border-radius: 200px/300px;
  98.         margin:-40px 0 0 -20px;
  99. }
  100. .center .box2{
  101.         width:900px;
  102.         height:900px;
  103.         background: #fff;
  104.         margin:-265px 0 0 -383px;
  105.         border-radius: 900px;
  106. }
  107. .bottom{
  108.         width:550px;
  109.         height:330px;
  110.         border-radius: 550px/330px;
  111.         margin:-75px 0 0 -122px;
  112.         transform: rotate(6deg);
  113.         -webkit-transform: rotate(6deg);
  114.         -moz-transform: rotate(6deg);
  115.         -o-transform: rotate(6deg); /*Opera*/
  116. }
  117. .bottom .box1{
  118.         width:320px;
  119.         height:600px;
  120.         border-radius: 320px/600px;
  121.         margin:-380px 0 0 180px;
  122.         transform: rotate(5deg);
  123.         -webkit-transform: rotate(5deg);
  124.         -moz-transform: rotate(5deg);
  125.         -o-transform: rotate(5deg); /*Opera*/
  126. }
  127. .bottom .box2{
  128.         width:320px;
  129.         height:600px;
  130.         border-radius: 320px/600px;
  131.         margin:35px 0 0 -35px;
  132.         transform: rotate(3deg);
  133.         -webkit-transform: rotate(3deg);
  134.         -moz-transform: rotate(3deg);
  135.         -o-transform: rotate(3deg); /*Opera*/
  136. }
  137. .bottom .box3{
  138.         width:320px;
  139.         height:600px;
  140.         border-radius: 320px/600px;
  141.         margin:30px 0 0 -30px;
  142. }
  143. </style>
  144. </head>
  145. <body>
  146.         <div class="wrapper">
  147.           <div class="top">
  148.                   <div class="right color3"></div>
  149.                   <div class="left color1"></div>
  150.                   <div class="mask1"></div>
  151.                   <div class="mask2"></div>
  152.           </div>
  153.           <div class="center">
  154.                   <div class="box1 color2">
  155.                           <div class="box1_1 color1"></div>
  156.                   </div>
  157.                   <div class="box2"></div>
  158.           </div>
  159.           <div class="bottom">
  160.                   <div class="box1 color5">
  161.                           <div class="box2 color4">
  162.                                   <div class="box3 color3"></div>
  163.                           </div>
  164.                   </div>
  165.           </div>
  166.          </div>
  167. </body>
  168. </html>
复制代码
绘图, 实例, 代码, 画图

相关帖子
回复

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|草根吧