你的位置:首页 > 网页设计

[网页设计]css3绘制中国结


 1 <!doctype html> 2 <html> 3   <head> 4     <title></title> 5     <meta charset='utf-8'> 6     <style type="text/css"> 7     :root,body{ 8       height: 100%; 9       width: 100%; 10     } 11     .z{ 12       width:200px; 13       height: 400px; 14       left: 400px; 15       position: absolute; 16     } 17     .z div{ 18       position: absolute; 19        20     } 21     .z .red{ 22       background-color: red; 23       box-shadow: 0px 0px 1px 0 #666; 24     } 25     .f1{ 26       width: 18px; 27       height: 18px; 28       -webkit-transform: rotate(45deg); 29         -moz-transform: rotate(45deg); 30         -ms-transform: rotate(45deg); 31          -o-transform: rotate(45deg); 32           transform: rotate(45deg); 33       top:0; 34       border-radius: 2px; 35     } 36     .l1,.l2,.l3,.l4{ 37       width:2px; 38       height: 10px; 39     } 40     .c1{ 41       width:14px; 42       height: 14px; 43       border-radius: 7px; 44       box-shadow: 0px 0px 1px 0 #666; 45       z-index: 10; 46     } 47     .c1-1 { 48       position: relative; 49       width: 40px; 50       height: 12px; 51     } 52     .c1-1:before, 53     .c1-1:after { 54       box-shadow: 0px 0px 1px 0 #666; 55       content: ""; 56       position: absolute; 57       top: 0; 58       left: 0; 59       width: 8px; 60       height: 14px;   61       border: 2px solid red; 62       border-radius:50%  50% 50% 50% / 30%  30%  70% 70%; 63       -webkit-transform: rotate(-90deg); 64         -moz-transform: rotate(-90deg); 65         -ms-transform: rotate(-90deg); 66          -o-transform: rotate(-90deg); 67           transform: rotate(-90deg); 68     } 69      70     .c1-1:after { 71       left: auto; 72       right: 0; 73       border-radius:50%  50% 50% 50% / 70%  70%  30% 30%; 74       -webkit-transform: rotate(-90deg); 75         -moz-transform: rotate(-90deg); 76         -ms-transform: rotate(-90deg); 77          -o-transform: rotate(-90deg); 78           transform: rotate(-90deg); 79     } 80     .r{ 81       width:80px; 82       height: 80px; 83       z-index: 10; 84       -webkit-transform: rotate(45deg); 85         -moz-transform: rotate(45deg); 86         -ms-transform: rotate(45deg); 87          -o-transform: rotate(45deg); 88           transform: rotate(45deg); 89     } 90     .r .ro{ 91       position: relative; 92       display: table; 93       border-collapse:separate; 94        border-spacing: 1px; 95     } 96     .r .b{ 97       width:15px; 98       height: 14px; 99       position: relative;100       display: table-cell;101       border-radius: 2px;102     }103     .c2{104       width:10px;105       height: 10px;106       border-radius: 5px;107     }108     .c3{109       width:10px;110       height: 10px;111       border-radius: 5px 5px 0 0;112     }113     .c4{114       width:14px;115       height: 14px;116       border-radius: 8px;117       z-index: 10;118     }119     .k{120       width: 10px;121       height: 12px;122     }123     .k1{124       width: 14px;125       height: 6px;126     }127     .s{128       height: 150px;129       display: table;130       border-collapse:separate;131        border-spacing: 1px;132     }133     .ss{134       width: 1px;135       height: 100%;136       position: relative !important;137       display: table-cell;138     }139     .i1 {140       position: relative;141       width: 162px;142       height: 46px;143     }144     145     .i1:before,146     .i1:after {147       box-shadow: 0px 0px 1px 0 #666;148       content: "";149       position: absolute;150       top: 0;151       left: 0;152       width: 30px;153       height: 40px;  154       border: 3px solid red;155         border-radius:50%  50% 50% 50% / 30%  30%  70% 70%;156       -webkit-transform: rotate(-90deg);157         -moz-transform: rotate(-90deg);158         -ms-transform: rotate(-90deg);159          -o-transform: rotate(-90deg);160           transform: rotate(-90deg);161     }162     163     .i1:after,.i2:after {164       left: auto;165       right: 0;166       border-radius:50%  50% 50% 50% / 70%  70%  30% 30%;167       -webkit-transform: rotate(-90deg);168         -moz-transform: rotate(-90deg);169         -ms-transform: rotate(-90deg);170          -o-transform: rotate(-90deg);171           transform: rotate(-90deg);172     } 173     .i2 {174       position: relative;175       width: 136px;176       height: 24px;177     }178     .i2:before,179     .i2:after {180       box-shadow: 0px 0px 1px 0 #666;181       content: "";182       position: absolute;183       top: 0;184       left: 0;185       width: 12px;186       height: 20px;  187       border: 2px solid red;188       border-radius:50%  50% 50% 50% / 30%  30%  70% 70%;189       -webkit-transform: rotate(-90deg);190         -moz-transform: rotate(-90deg);191         -ms-transform: rotate(-90deg);192          -o-transform: rotate(-90deg);193           transform: rotate(-90deg);194     }195     196     .i2:after {197       left: auto;198       right: 0;199       border-radius:50%  50% 50% 50% / 70%  70%  30% 30%;200       -webkit-transform: rotate(-90deg);201         -moz-transform: rotate(-90deg);202         -ms-transform: rotate(-90deg);203          -o-transform: rotate(-90deg);204           transform: rotate(-90deg);205     } 206     .e1 {207       position: relative;208       width: 12px;209       height: 24px;210     }211     .e1:before,212     .e1:after {213       box-shadow: 0px 0px 1px 0 #666;214       content: "";215       position: absolute;216       top: 0;217       left: 0;218       width: 12px;219       height: 20px;  220       border: 2px solid red;221       border-radius:50%  50% 50% 50% / 30%  30%  70% 70%;222       -webkit-transform: rotate(-90deg);223         -moz-transform: rotate(-90deg);224         -ms-transform: rotate(-90deg);225          -o-transform: rotate(-90deg);226           transform: rotate(-90deg);227     }228     .m{229       width:80px;230       height: 80px;231       -webkit-transform: rotate(45deg);232         -moz-transform: rotate(45deg);233         -ms-transform: rotate(45deg);234          -o-transform: rotate(45deg);235           transform: rotate(45deg);236 237     }238     .n{239       width:80px;240       height: 80px;241       -webkit-transform: rotate(-45deg);242         -moz-transform: rotate(-45deg);243         -ms-transform: rotate(-45deg);244          -o-transform: rotate(-45deg);245           transform: rotate(-45deg);246 247     }248     .m .rx,.n .rx{249       position: relative;250       display: table;251       border-collapse:separate;252        border-spacing: 1px;253     }254     .m .rb , .m .rb-space,.n .rb , .n .rb-space{255       position: relative;256        width: 120px;257       height: 14px;258       display: table-cell;259     }260     261     .m .rb:before,262     .m .rb:after,.n .rb:before,263     .n .rb:after {264       box-shadow: 0px 0px 1px 0 #666;265       content: "";266       position: absolute;267       top: 0;268       left: -8px;269       width: 6px;270       height: 10px;  271       border: 2px solid red;272         border-radius:50%  50% 50% 50% / 40%  40%  60% 60%;273       -webkit-transform: rotate(-90deg);274         -moz-transform: rotate(-90deg);275         -ms-transform: rotate(-90deg);276          -o-transform: rotate(-90deg);277           transform: rotate(-90deg);278     }279     280     .m .rb:after,.n .rb:after{281       left: auto;282       right: -8px;283       border-radius:50%  50% 50% 50% / 60%  60%  60% 60%;284       -webkit-transform: rotate(-90deg);285         -moz-transform: rotate(-90deg);286         -ms-transform: rotate(-90deg);287          -o-transform: rotate(-90deg);288           transform: rotate(-90deg);289     } 290     </style>291     <script type="text/javascript" src='../bower_components/jquery/dist/jquery.js'></script>292     <script type="text/javascript">293     $(document).ready(function(){294       var $z = $('.z'), $f1 = $('.f1') , $l1 = $('.l1') , $c1 = $('.c1') , $l2 = $('.l2') , $r = $('.r') , $l3 = $('.l3') , $c2 = $('.c2') , $l4 = $('.l4') , $c3 = $('.c3') , $c4 = $('.c4'),295         $k = $('.k') , $k1 = $('.k1') , $s = $('.s') , $i1 = $('.i1') , $i2 = $('.i2'),296         $e1 = $('.e1') , $c1_1 = $('.c1-1'),297         $m = $('.m') , $n = $('.n');298       $f1.css({299         left : ($z.width() - $f1.width()) / 2 , 300         top : Math.sqrt(2 * Math.pow($f1.height() / 2 , 2)) - $f1.height() / 2301       });302       $l1.css({303         left : ($z.width() - $l1.width()) / 2,304         top : Math.sqrt(2 * Math.pow($f1.height() , 2))305       });306       $c1.css({307         left : ($z.width() - $c1.width()) / 2,308         top : Math.sqrt(2 * Math.pow($f1.height() , 2)) + $l1.height()309       });310       $l2.css({311         left : ($z.width() - $l2.width()) / 2,312         top : Math.sqrt(2 * Math.pow($f1.height() , 2)) + $l1.height() + $c1.height()313       });314       $r.css({315         left : ($z.width() - $r.width()) / 2,316         top : Math.sqrt(2 * Math.pow($f1.height() , 2)) + $l1.height() + $c1.height() + $l2.height() + Math.sqrt(2 * Math.pow($r.height() / 2 , 2)) - $r.height() / 2317       });318       $l3.css({319         left : ($z.width() - $l3.width()) / 2,320         top : Math.sqrt(2 * Math.pow($f1.height() , 2)) + $l1.height() + $c1.height() + $l2.height() + Math.sqrt(2 * Math.pow($r.height() , 2))321       });322       $c2.css({323         left : ($z.width() - $c2.width()) / 2,324         top : Math.sqrt(2 * Math.pow($f1.height() , 2)) + $l1.height() + $c1.height() + $l2.height() + Math.sqrt(2 * Math.pow($r.height() , 2)) + $l3.height()325       });326       $l4.css({327         left : ($z.width() - $l4.width()) / 2,328         top : Math.sqrt(2 * Math.pow($f1.height() , 2)) + $l1.height() + $c1.height() + $l2.height() + Math.sqrt(2 * Math.pow($r.height() , 2)) + $l3.height() + $c2.height()329       });330       $c3.css({331         left : ($z.width() - $c3.width()) / 2,332         top : Math.sqrt(2 * Math.pow($f1.height() , 2)) + $l1.height() + $c1.height() + $l2.height() + Math.sqrt(2 * Math.pow($r.height() , 2)) + $l3.height() + $c2.height() + $l4.height()333       });334       $c4.css({335         left : ($z.width() - $c4.width()) / 2,336         top : Math.sqrt(2 * Math.pow($f1.height() , 2)) + $l1.height() + $c1.height() + $l2.height() + Math.sqrt(2 * Math.pow($r.height() , 2)) + $l3.height() + $c2.height() + $l4.height() + $c3.height() - 4337       });338       $k.css({339         left : ($z.width() - $k.width()) / 2,340         top : Math.sqrt(2 * Math.pow($f1.height() , 2)) + $l1.height() + $c1.height() + $l2.height() + Math.sqrt(2 * Math.pow($r.height() , 2)) + $l3.height() + $c2.height() + $l4.height() + $c3.height() - 4 + $c4.height() - 4341       });342       $k1.css({343         left : ($z.width() - $k1.width()) / 2,344         top : Math.sqrt(2 * Math.pow($f1.height() , 2)) + $l1.height() + $c1.height() + $l2.height() + Math.sqrt(2 * Math.pow($r.height() , 2)) + $l3.height() + $c2.height() + $l4.height() + $c3.height() - 4 + $c4.height() - 4 + $k.height()345       });346       $s.css({347         left : ($z.width() - $k1.width()) / 2,348         top : Math.sqrt(2 * Math.pow($f1.height() , 2)) + $l1.height() + $c1.height() + $l2.height() + Math.sqrt(2 * Math.pow($r.height() , 2)) + $l3.height() + $c2.height() + $l4.height() + $c3.height() - 4 + $c4.height() - 4 + $k.height() + $k1.height()349       });350 351       $i1.css({352         left : ($z.width() - $i1.width()) / 2,353         top : Math.sqrt(2 * Math.pow($f1.height() , 2)) + $l1.height() + $c1.height() + $l2.height() + Math.sqrt(2 * Math.pow($r.height() , 2)) / 2 - $i1.height() / 2354       });355       $i2.css({356         left : ($z.width() - $i2.width()) / 2,357         top : Math.sqrt(2 * Math.pow($f1.height() , 2)) + $l1.height() + $c1.height() + $l2.height() + Math.sqrt(2 * Math.pow($r.height() , 2)) / 2 - $i2.height() / 2358       });359       $c1_1.css({360         left : ($z.width() - $c1_1.width()) / 2,361         top : Math.sqrt(2 * Math.pow($f1.height() , 2)) + $l1.height() + ($c1_1.height() - $c1.height()) / 2362       });363       $m.css({364         left : ($z.width() - $m.width()) / 2,365         top : Math.sqrt(2 * Math.pow($f1.height() , 2)) + $l1.height() + $c1.height() + $l2.height() + Math.sqrt(2 * Math.pow($m.height() / 2 , 2)) - $m.height() / 2366       });367       $n.css({368         left : ($z.width() - $n.width()) / 2,369         top : Math.sqrt(2 * Math.pow($f1.height() , 2)) + $l1.height() + $c1.height() + $l2.height() + Math.sqrt(2 * Math.pow($n.height() / 2 , 2)) - $n.height() / 2370       });371     });372     </script>373   </head>374   <body>375     <div class='z'>376       <div class='f1 red'></div>377       <div class='l1 red'></div>378       <div class='c1 red'></div>379       <div class='c1-1'></div>380       <div class='l2 red'></div>381       <div class='r'>382         <div class='ro'>383           <div class='b red'></div>384           <div class='b red'></div>385           <div class='b red'></div>386           <div class='b red'></div>387           <div class='b red'></div>388         </div>389         <div class='ro'>390           <div class='b red'></div>391           <div class='b red'></div>392           <div class='b red'></div>393           <div class='b red'></div>394           <div class='b red'></div>395         </div>396         <div class='ro'>397           <div class='b red'></div>398           <div class='b red'></div>399           <div class='b red'></div>400           <div class='b red'></div>401           <div class='b red'></div>402         </div>403         <div class='ro'>404           <div class='b red'></div>405           <div class='b red'></div>406           <div class='b red'></div>407           <div class='b red'></div>408           <div class='b red'></div>409         </div>410         <div class='ro'>411           <div class='b red'></div>412           <div class='b red'></div>413           <div class='b red'></div>414           <div class='b red'></div>415           <div class='b red'></div>416         </div>417       </div>418       <div class='l3 red'></div>419       <div class='c2 red'></div>420       <div class='l4 red'></div>421       <div class='c3 red'></div>422       <div class='c4 red'></div>423       <div class='k red'></div>424       <div class='k1 red'></div>425       <div class='s'>426         <div class='ss red'></div>427         <div class='ss red'></div>428         <div class='ss red'></div>429         <div class='ss red'></div>430         <div class='ss red'></div>431         <div class='ss red'></div>432         <div class='ss red'></div>433       </div>434       <div class='i1'></div>435       <div class='i2'></div>436       <div class='m'>437         <div class='rx'>438           <div class='rb-space'></div>439         </div>440         <div class='rx'>441           <div class='rb'></div>442         </div>443         <div class='rx'>444           <div class='rb'></div>445         </div>446         <div class='rx'>447           <div class='rb'></div>448         </div>449         <div class='rx'>450           <div class='rb-space'></div>451         </div>452       </div>453       <div class='n'>454         <div class='rx'>455           <div class='rb-space'></div>456         </div>457         <div class='rx'>458           <div class='rb'></div>459         </div>460         <div class='rx'>461           <div class='rb'></div>462         </div>463         <div class='rx'>464           <div class='rb'></div>465         </div>466         <div class='rx'>467           <div class='rb-space'></div>468         </div>469       </div>470     </div>471   </body>472 </html>