Rumah > hujung hadapan web > html tutorial > css3绘制中国结_html/css_WEB-ITnose

css3绘制中国结_html/css_WEB-ITnose

WBOY
Lepaskan: 2016-06-24 11:39:17
asal
1427 orang telah melayarinya

  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>
Salin selepas log masuk

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan