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>

时间: 2024-10-14 00:11:57

css3绘制中国结的相关文章

css3绘制六边形

六边形思路:使用CSS3绘制六边形主要使用伪类:before和:after在源元素之前和之后再绘制两个元素,并利用css3的边框样式,将这两个元素变成三角形放置在源元素的两端即可. <h2>三角形在左右两侧</h2> <!-- 第一种方法 不兼容低版本浏览器 --> <div class="hexagon1"></div> <!-- 第二种方法 兼容低版本浏览器 --> <div class="he

用纯css3绘制的能自适应浏览器的哆啦a梦动画

最近在研究用css3绘制矢量图,于是就用纯css3绘制了能自适应浏览器宽度的哆啦a梦动画,兼容css3的浏览器都可以正常观看,下面只是网页截图: 废话不多说了,直接给代码. html 代码: <div class="dlam" title="用纯css3绘制的能自适应浏览器的哆啦a梦动画"> <div class="bozi"> <div class="lingdan"> <div c

CSS3绘制8种超炫的加载动画

CSS3绘制8种超炫的加载动画     逛前端开发网站的时候,偶尔发现一组非常炫酷的CSS3加载动画,遂迫不及待的做个Demo保存下来. 这些加载动画用到了CSS3的旋转transform属性,颜色透明度设置和伪元素操作等CSS技术.奇妙的组合,产生了意想不到的效果. 1.上下起伏波动的加载动画: #loader1, #loader1:before, #loader1:after { background: #f2fa08; -webkit-animation: load1 1s infinit

用纯CSS3绘制萌系漫画人物动态头像

大家已经见惯了用CSS3画的图标.LOGO.头像,这次台湾同学Rei给我们带来了用纯CSS3绘制的日本动漫<轻音少女>女主角秋山澪的动态头像.看到动图我震惊了!!!CSS3的强大再次霸气测漏! 示例中用到的主要CSS3特性如下: border-radius:绘制边框圆角. transform:主要是旋转(rotate)和偏斜(skew),用于绘制各种形状. animation:动画效果的实现,例如头发的飘动.眼睛的闪动. 只要掌握了这几个特性,你也能画出同样奇妙的CSS3动画,赶快试试吧!

CSS3绘制砖墙-没有用任何图片

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

CSS3绘制旋转的太极图案

1.效果布局主要用了用了3个DIV,配合:before.:after利用css3中的圆角(border-radius).阴影(box-shadow)完成. 2.动画效果CSS3中的@keyframes.animation <!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS3绘制旋转的太极图案</title> <style> bo

css3绘制各种图形效果

如何使用CSS来制作图形,比如说圆形,半圆形,三角形等.今天我特意在网上查阅了一下,介绍这样的教程还是蛮多的,因此我也决定整理一份相关教程出来与大家一起分享. 很少会有人意识到,当浏览器绘制的border,会有一个角度的问题.我们就是得用这样的一个技巧来制作三角的效果.我们只需要保证一边的边框是有色,其他边框色为透明色,这样我们就很容易制作出三角形,然后改变其大小来实现不同的效果.我们一起来看一段代码: 1 2 3 4 5 6 7 .css-arrow-multicolor { border-c

CSS3 绘制360安仔小精灵[原创]

Css3图形通常由矩形,圆形,椭圆,三角形,梯形等组合而成. 矩形,为display:block的块级元素设定宽高,便能实现, 圆角矩形,椭圆,圆形,则通过border-radius 属性来得到. 圆角矩形,几种写法: 1, border-radius: 70px 30px 60px 0px; 按顺时针方向, 上左,上右,下右,下左, 分别定义了矩形4个角的弧度. 如图: 2.border-radius: 70px 30px 60px ; 不写第4个(下左角)的值,那么值默认与它的对角(上右角)

石头教你如何用纯CSS3绘制三角形、箭头。

经常在有些网站上看到一些三角图形,但通常这些都是图片,现在石头就教你如何用纯css3技术来绘制三角图形. 下面是具体步骤,把这些看一遍你也就懂得怎样来绘制三角形.箭头了. 1.新建一个元素,随便什么元素,不过我习惯性的会用块元素来做.如果行内元素就display:block它. <div class="box"></div> 2.把它的宽高设置为height:0px; width:0px; 3.设置边框border属性,用来实现三角形. 首先要了解border具