Maison >interface Web >tutoriel HTML >css3绘制中国结_html/css_WEB-ITnose
css3绘制中国结_html/css_WEB-ITnose
- WBOYoriginal
- 2016-06-24 11:39:171426parcourir
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>
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：新手求教：关于定位和z-index不起作用的问题，请各位大神帮忙，在线等_html/css_WEB-ITnoseArticle suivant：CSS选择器优先级与效率优化_html/css_WEB-ITnose