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() / 2
301             });
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() / 2
317             });
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() - 4
337             });
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() - 4
341             });
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() / 2
354             });
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() / 2
358             });
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()) / 2
362             });
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() / 2
366             });
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() / 2
370             });
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>

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/tatame/p/4712261.html