首页 > Web开发 > 详细

《css3揭秘》的效果code

时间:2017-08-02 22:46:29      阅读:304      评论:0      收藏:0      [点我收藏+]

1.在阅读css3揭秘的基础上,跟着书中的效果组合起来的这组代码。

2.代码中有四张图片分别是 1.jpg 2.jpg  3.jpg 4.jpg; 作为demo,图片名称没有语义。

3.兼容性:  IE上有部分并不兼容,Edge,FF,chrome没有问题。

4.下面是一个选择器的实现:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>$$工具函数</title>
 6 </head>
 7 <body>
 8 <div class="box"> </div>
 9 <div class="box"> </div>
10 <script>
11    function $$(selector,context){
12             context = context || document;
13             var elements = context.querySelectorAll(selector);
14             return Array.prototype.slice.call(elements);
15    }
16     console.log($$(".box"));
17 </script>
18 </body>
19 </html>

5.效果如图:

技术分享

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <style>
  7         div{
  8             /*width:200px;*/
  9             /*height:100px;*/
 10         }
 11         .box{
 12             /*background:linear-gradient(90deg,yellow,red);*/
 13             /*线性渐变*/
 14             background: linear-gradient(45deg,yellow 25%,red 0,red 50%,yellow 0,yellow 75%,red 0);
 15             /*background-size:30px 30px;*/
 16         }
 17         /*在浏览器支持这个css特性的时候应用的样式,类似媒体查询*/
 18         @supports (background: red){
 19             .supports{
 20                 background: red;
 21             }
 22         }
 23         /*currenColor*/
 24         .reduceCode{
 25             width:60vw;
 26             height: 60vh;
 27             color: red;
 28             text-align: center;
 29         }
 30         .reduceCode hr{
 31             height:.5rem;
 32             background: currentColor;
 33         }
 34 
 35         /*背景*/
 36         .box1{
 37             width:300px;
 38             height:300px;
 39             border:10px solid hsla(0,0%,100%,.5);
 40             background: red;
 41             background-clip:padding-box;
 42         }
 43         .borderimg{
 44             width:100px;
 45             height:100px;
 46             background: yellow;
 47 
 48             border-image:url("1.jpg");
 49         }
 50         .backgroudpos{
 51             width:750px;
 52             height: 423px;
 53             background: url("1.jpg") no-repeat;
 54             border:1px solid red;
 55             /*这个是background-position扩展语法,可以指定位置距离哪个边多少距离*/
 56             background-position: right 20px bottom 30px;
 57         }
 58         .calc{
 59             width:750px;
 60             height: 423px;
 61             background: url("1.jpg") no-repeat;
 62             border:1px solid red;
 63             /*与上边的作用相同,用calc()属性,计算百分比和像素的关系*/
 64             background-position: calc(100% - 20px) calc(100% - 30px);
 65             /*background-position: 100% 100%;*/
 66         }
 67 
 68         .f{
 69             width:300px;
 70             height:200px;
 71             border:1px solid red;
 72         }
 73         .f .s{
 74             width:calc(50% - 10px);
 75             height:calc(50% + 10px);
 76             border:1px solid blue;
 77         }
 78 
 79         /*内圆角*/
 80         .radius{
 81             width:300px;
 82             height:300px;
 83             /*border:1px solid red;*/
 84             /*正文,效果自行观看,原因在于描边并不会跟着元素的圆角走,但bo-shadow却会跟着圆角走。*/
 85             background: tan;
 86             border-radius:.8em;
 87             padding:1em;
 88             box-shadow: 0 0 0 .6em #665;
 89             outline:.6em solid #665;
 90         }
 91         
 92         /*条纹背景*/
 93         .gradient{
 94             width:600px;
 95             height:300px;
 96             /*这种repeating的方法不用设置background-size*/
 97             /*background: repeating-linear-gradient(60deg,red  0,red 15px,blue 0 ,blue 30px);*/
 98             /*同色系条纹 还可以用透明色*/
 99             background:repeating-linear-gradient(60deg,lightblue 0,lightblue 15px,transparent 0,transparent 30px)
100         }
101 
102         /*网格*/
103         .wangge{
104             width: 600px;
105             height:400px;
106 
107             background: white;
108             background-image: linear-gradient(90deg,rgba(200,0,0,.5) 50%,transparent 0),linear-gradient(rgba(200,0,0,.5) 50%,transparent 0);
109             background-size:30px 30px;
110         }
111         .wangge2{
112             width: 600px;
113             height:400px;
114             /*用像素单位去画网格线*/
115             background: #58a;
116             background-image: linear-gradient(90deg,white 1px ,transparent 0),linear-gradient(white 1px ,transparent 0);
117             background-size:30px 30px;
118         }
119         .wangge3{
120             width: 600px;
121             height:400px;
122             /*蓝图网格*/
123             background: #58a;
124             background-image:linear-gradient(90deg,white 2px ,transparent 0),linear-gradient(white 2px ,transparent 0),
125             linear-gradient(90deg,white 1px ,transparent 0),linear-gradient(white 1px ,transparent 0);
126             background-size: 75px 75px,75px 75px,15px 15px,15px 15px;
127         }
128 
129         /*径向渐变和波点*/
130         .bodian{
131             width:600px;
132             height:400px;
133             background: #665;
134             background-image: radial-gradient(tan 30%,transparent 0);
135             background-size: 30px 30px;
136         }
137         .bodian2{
138             width:600px;
139             height:400px;
140             background: #665;
141             background-image: radial-gradient(tan 30%,transparent 0),radial-gradient(tan 30%,transparent 0);
142             background-size:30px 30px;
143             background-position: 0 0,15px 15px;
144         }
145 
146         /*棋盘*/
147         .sanjiaowen{
148             width:600px;
149             height:400px;
150             background: #eee;
151             background-image: linear-gradient(45deg,#bbb 50%,transparent 0);
152             background-size: 30px 30px;
153         }
154         .qipan1{
155             width:600px;
156             height:400px;
157             background: #eee;
158             background-image: linear-gradient(45deg,#bbb 25%,transparent 0);
159             background-size: 30px 30px;
160         }
161         .qipan2{
162             width:600px;
163             height:400px;
164             background: #eee;
165             background-image: linear-gradient(45deg,transparent 75%,#bbb 0);
166             background-size: 30px 30px;
167         }
168         .qipan3{
169             width:600px;
170             height:400px;
171             background: #eee;
172             background-image: linear-gradient(45deg,transparent 75%,#bbb 0),linear-gradient(45deg,#bbb 25%,transparent 0);
173             background-size: 30px 30px;
174             background-position: 0 0,15px 15px;
175         }
176         .qipan4{
177             width:600px;
178             height:400px;
179             background: #eee;
180             background-image: linear-gradient(45deg,transparent 75%,#bbb 0),
181                                 linear-gradient(45deg,#bbb 25%,transparent 0),
182                                 linear-gradient(45deg,transparent 75%,#bbb 0),
183                                 linear-gradient(45deg,#bbb 25%,transparent 0);
184             background-size: 30px 30px;
185             background-position: 0 0,15px 15px,15px 15px,30px 30px;
186         }
187         .qipan5{
188             width:600px;
189             height:400px;
190             background: #eee;
191             background-image:linear-gradient(45deg,rgba(0,0,0,.25) 25%,transparent 0,transparent 75%,rgba(0,0,0,.25) 0),
192                               linear-gradient(45deg,rgba(0,0,0,.25) 25%,transparent 0,transparent 75%,rgba(0,0,0,.25) 0);
193             background-size: 30px 30px;
194             background-position: 0 0,15px 15px;
195         }
196 
197         /*角向渐变*/
198         .jiaoxiangjianbian{
199             width:400px;
200             height:400px;
201             border:1px solid red;
202             background: conic-gradient(red,yellow,lime,aqua,blue,fuchsia,red);
203         }
204        /*伪随机背景*/
205         .suijibeijing1{
206             width:600px;
207             height:400px;
208             border:1px solid red;
209             background:linear-gradient(90deg,#fb3 15%,#655 0,#655 40%,#ab4 0,#ab4 65%,hsl(20,40%,90%) 0);
210             background-size: 80px 100%;
211         }
212         .suijibeijing2{
213             width:600px;
214             height:400px;
215             background:hsl(20,40%,90%);
216             border:1px solid red;
217             background-image:linear-gradient(90deg,#fb3 10px,transparent 0),
218                             linear-gradient(90deg,#ab4 20px,transparent 0),
219                             linear-gradient(90deg,#655 20px,transparent 0);
220                 /*这里跟上一个的设置不同之处在于,在上边的基础上,把两个同颜色框之间距离最大的那个颜色(通常也是最窄的那个)做成背景颜色,其他渐变
221                  但还是看不到伪随机的效果,要达到随机效果,就要让尺寸取最大的最小公倍数*/
222             background-size: 80px 100%,60px 100%,40px 100%;
223         }
224         .suijibeijing3{
225             width:600px;
226             height:400px;
227             background:hsl(20,40%,90%);
228             border:1px solid red;
229             background-image:linear-gradient(90deg,#fb3 11px,transparent 0),
230             linear-gradient(90deg,#ab4 23px,transparent 0),
231             linear-gradient(90deg,#655 41px,transparent 0);
232             background-size: 41px 100%,63px 100%,79px 100%;
233         }
234         /*连续的图像边框*/
235         .lianxubiankuang{
236             width:600px;
237             height:400px;
238             padding:1em;
239             border:1em solid transparent;
240             background: linear-gradient(white,white),url("4.jpg");
241             background-size: cover;
242             background-clip: padding-box,border-box;
243             background-origin: border-box;
244 
245             /* 简写方式:
246              padding:1em;
247             border:1em solid transparent;
248             background:linear-gradient(white,white) padding-box,url("4.jpg") border-box 0 / cover;
249             */
250         }
251 
252         /*老式信封*/
253         .laoshixinfeng{
254             width:600px;
255             height:400px;
256             padding:1em;
257             border:1em solid transparent;
258             background: linear-gradient(white,white) padding-box,
259                         repeating-linear-gradient(-45deg,red 0,red 12.5%,transparent 0,transparent 25%,#58a 0,#58a 37.5%,transparent 0,transparent 50%) 0 / 5em 5em;
260         }
261 
262         /*蚂蚁行军*/
263         @keyframes ants{
264             to {
265                 background-position: 100%;
266             }
267         }
268         .mayixingjun{
269             width:600px;
270             height:400px;
271             padding:1em;
272             border:1px solid transparent;
273             background: linear-gradient(white,white) padding-box,
274                         repeating-linear-gradient(-45deg,black 0,black 25%,white 0,white 50%)  0 / 0.6em .6em;
275             animation:ants  12s linear infinite;
276         }
277 
278         /*平行四边形*/
279         .parallelogram{
280             width:300px;
281             height: 200px;
282             transform:skewX(-45deg);
283             border:1px solid red;
284             background: yellowgreen;
285         }
286         .parallelogram2{
287             width:300px;
288             height: 200px;
289             position: relative;
290         }
291         .parallelogram2::before{
292             position: absolute;
293             top:0;
294             left:0;
295             bottom:0;
296             right:0;
297             background: red;
298             border:1px solid blue;
299             z-index:-1;
300             content: ‘‘;
301             transform: skewX(-45deg);
302         }
303 
304         /*菱形图片*/
305         .diamond{
306           clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
307             transition: 1s clip-path;
308         }
309         .diamond:hover{
310             clip-path: polygon(0 0,0 100%,100% 100%, 100% 0);
311         }
312 
313         /*切角*/
314         .qiejiao{
315         width:600px;
316         height:400px;
317         background: #58a;
318         background: linear-gradient(135deg,transparent 15px,#58a 0) top left,
319                     linear-gradient(-135deg,transparent 15px,#58a 0) top right,
320                     linear-gradient(45deg,transparent 15px,#58a 0) bottom left,
321                     linear-gradient(-45deg,transparent 15px,#58a 0) bottom right;
322         background-size: 50% 50%;
323         background-repeat:no-repeat;
324         }
325         /*内凹圆角*/
326         .qiejiao2{
327             width:200px;
328             height: 100px;
329             background: #58a;
330             background: radial-gradient(circle at top left,transparent 15px ,#58a 0) top left,
331             radial-gradient(circle at top right,transparent 15px ,#58a 0) top right,
332             radial-gradient(circle at bottom left,transparent 15px ,#58a 0) bottom left, radial-gradient(circle at bottom right,transparent 15px ,#58a 0) bottom right;
333             background-size: 50% 50%;
334             background-repeat:no-repeat;
335         }
336         /*小三角形*/
337         .xiaosanjiao{
338             width:10px;
339             height:60px;
340             border:1px solid red;
341             background: linear-gradient(-45deg,red 0,red 50%,transparent 0,transparent 100%);
342         }
343         /*梯形标签页*/
344         .tixing{
345             width:100px;
346             height:20px;
347             position: relative;
348         }
349         .tixing::before{
350             content: ‘‘;
351             position: absolute;
352             top:0;
353             bottom:0;
354             right:0;
355             left:0;
356             z-index:-1;
357             /*以底线为基准旋转*/
358             transform-origin:bottom;
359             transform:scaleY(1.3) perspective(.5em) rotateX(5deg);
360             background: mediumvioletred;
361         }
362         /*饼图*/
363         .pie{
364             width:400px;
365             height:400px;
366             border-radius: 50%;
367             background: yellowgreen;
368             background-image: linear-gradient(to right,transparent 50%,#655 0);
369         }
370                 /*下面的伪元素旋转可实现0%-50%之间的饼图,要50%-100%之间的饼图需要改变伪元素的颜色,反向旋转*/
371         .pie::before{
372             content: ‘‘;
373             display: block;
374             margin-left: 50%;
375             height:100%;
376             border-radius: 0 100% 100% 0 / 50%;
377             background-color: inherit;
378             transform-origin: left;
379             border:1px solid red;
380             transform:rotate(.1turn)
381         }
382         /*0.5-1之间的静态饼图*/
383         .pie2{
384             width:400px;
385             height:400px;
386             border-radius: 50%;
387             background: yellowgreen;
388             background-image: linear-gradient(to right,transparent 50%,#655 0);
389         }
390 
391         .pie2::before{
392             content: ‘‘;
393             display: block;
394             margin-left: 50%;
395             height:100%;
396             border-radius: 0 100% 100% 0 / 50%;
397             background-color:#655;
398             transform-origin: left;
399             border:1px solid red;
400             transform:rotate(.1turn)
401         }
402            /*可以访问的的饼图*/
403          .pie3{
404              position: relative;
405              width:400px;
406              height:400px;
407              line-height: 400px;
408              border-radius: 50%;
409              background: yellowgreen;
410              background-image: linear-gradient(to right,transparent 50%,#655 0);
411              color: transparent;
412              text-align: center;
413          }
414         @keyframes spin{
415             to {
416                 transform: rotate(.5turn);
417             }
418         }
419         @keyframes bg {
420             50% {
421                 background: #655;
422             }
423         }
424             
425         .pie3::before{
426             content: ‘‘;
427             position: absolute;
428             top:0;
429             left:50%;
430             width:50%;
431             height:100%;
432             border-radius: 0 100% 100% 0 / 50%;
433             background-color: inherit;
434             transform-origin: left;
435             animation:spin 50s linear infinite,
436                       bg 100s step-end infinite;
437             animation-play-state: paused;
438             animation-delay: inherit;
439             border:1px solid red;
440         }
441 
442         /*svg画饼图*/
443          .svg circle{
444              fill:yellowgreen;
445              stroke:#655;
446              stroke-width: 32;
447              stroke-dasharray: 20 10;
448              /*得到比例为38%的扇区*/
449          }
450 
451          .svg2{
452              width:100px;
453              height:100px;
454              transform: rotate(-90deg);
455              border-radius: 50%;
456          }
457         .svg2 circle{
458             fill:yellowgreen;
459             stroke:#655;
460             stroke-width: 32;
461             stroke-dasharray: 38 100;
462         }
463 
464         /*单边阴影*/
465         .shadow{
466             width:600px;
467             height:300px;
468             border:1px solid blue;
469             /*第四个参数是扩张半径,扩大或缩小投影的尺寸*/
470             box-shadow: -5px 0px 4px -2px black ;
471         }
472         /*邻边阴影*/
473         .shadow2{
474             width:600px;
475             height:300px;
476             border:1px solid blue;
477             box-shadow: 5px 5px 4px -2px black ;
478         }
479         /*对边阴影*/
480         .shadow3{
481             width:600px;
482             height:300px;
483             border:1px solid blue;
484             box-shadow: 5px 0px 4px -2px black,-5px 0px 4px -2px black;
485         }
486 
487         /*滤镜染色*/
488          .filter{
489              width:600px;
490              height:400px;
491          }
492         .filter img{
493             filter:sepia(1);
494             /*filter:saturate(4);*/
495             /*filter:hue-rotate(295deg);*/
496         }
497         .filter img:hover{
498             filter:none;
499         }
500 
501         /*混合模式染色*/
502         .mixmodel{
503             background: blue;
504             width:600px;
505             height:400px;
506         }
507         .mixmodel img{
508             mix-blend-mode: luminosity;
509         }
510         .mixmodel:hover{
511             background: transparent;
512             /* 还有一种方法不需要img标签,用背景颜色和背景图片  进行  backgrund-blend-mode:luminosity;进行混合*/
513         }
514 
515         /*毛玻璃效果*/
516         /*http://play.csssecrets.io/frosted-glass  这里可以看到明显效果*/
517         .maoboli{
518             width:600px;
519             height:400px;
520 
521         }
522         .maoboli > p{
523             width:300px;
524             height:100px;
525 
526             margin:20% auto ;
527             position: relative;
528             background: hsla(0,0%,100%,.3);
529             /*overflow: hidden;*/
530         }
531         .maoboli p::before{
532             content: ‘‘;
533             position: absolute;
534             top:0;left:0;
535             bottom:0;
536             right:0;
537             /*background: rgba(255,0,0,0.5);*/
538             border:1px solid blue;
539             z-index:-1;
540             filter:blur(20px);
541             margin:-30px;
542         }
543         .maoboli,.maoboli >p::before{
544             background: url("./3.jpg") 0 / cover fixed;
545         }
546 
547         /*折角效果*/
548         .zhejiao{
549             width:500px;
550             height:300px;
551             background: #58a;
552             background:linear-gradient(to left bottom,transparent 50%,rgba(0,0,0,.4) 0) no-repeat 100% 0 / 2em 2em,
553                     linear-gradient(-135deg,transparent 1.5em,#58a 0);
554         }
555 
556         /* 文本换行 */
557          .huanhang{
558              width:400px;
559              height:200px;
560              border:1px solid red;
561          }
562          .huanhang dd,.huanhang dt{
563              display: inline;
564              border:1px solid blue;
565          }
566          dd{
567              font-weight: bolder;
568          }
569         .huanhang  dd + dt::before{
570             content: ‘\A‘;
571             white-space: pre;
572         }
573         .huanhang dd + dd::before{
574             content: ‘, ‘;
575             font-weight: normal;
576         }
577 
578         /* 文本行斑马条纹*/
579         .banmatiaowen{
580             width:200px;
581             height:auto;
582             line-height: 1.5;
583             border:1px solid green;
584             padding:.5em;
585             background: beige;
586             background: linear-gradient(rgba(0,0,0,.2) 50%,transparent 0);
587             background-size: auto 3em;
588             background-origin: content-box;
589         }
590 
591         /*发光文字*/
592         .faguangwenzi{
593            font-size: 50px;
594             font-weight: bolder;
595             color: #ffc;
596             text-shadow:0 0 .1em,0 0 .3em;
597             background: #000000;
598             /*还可以加模糊滤镜 blur(3px)实现*/
599         }
600 
601         /*svg空心字*/
602         h1{
603             font:500%/1 Rockwell ,serif;
604             background: deeppink;
605             color: white;
606         }
607         h1 text{
608             fill:currentColor;
609         }
610         h1 svg{
611             overflow: visible;
612         }
613         h1 use{
614             stroke: black;
615             stroke-width: 6;
616             stroke-linejoin: round;
617         }
618 
619         /*环形文字*/
620         .circular path{
621             fill:none;
622         }
623         .circular{
624             width:10em;height:10em;
625             margin:3em auto 0;
626         }
627         .circular svg{
628             display: block;
629             overflow: visible;
630         }
631 
632         /*扩大可点击区域*/
633         /*一种方法是利用透明border,但是会让按钮变大,这时候设置  background-clip:padding-box;,如果按钮要加边框就要用内嵌阴影了  box-shadow:inner*/
634         /*还有一种是利用伪元素:透明,用定位拉伸,扩大点击区域*/
635         /*边框扩大可点击区域*/
636         .borderkuoda{
637             width:50px;
638             height:50px;
639             background: red;
640             /*边框扩大点击区域*/
641             border:10px solid transparent;
642             background-clip: padding-box;
643         }
644         .borderkuoda:active{
645             background: greenyellow;
646             background-clip: padding-box;
647             /*鼠标光标设置为cursor:not-allowed,提示用户不能选中。*/
648             cursor: not-allowed;
649         }
650 
651         /*伪元素扩大可点击区域*/
652         .kuodadianji{
653             width:50px;
654             height:50px;
655             background: red;
656             position: relative;
657         }
658         .kuodadianji:active{
659             background: blue;
660         }
661         .kuodadianji::after{
662             content: ‘‘;
663             position: absolute;
664             top:-10px;
665             left:-10px;
666             right:-10px;
667             bottom:-10px;
668             border:1px solid blue;
669         }
670 
671         /*自定义复选框*/
672         /*默认样式*/
673        .definefuxuankuang input[type="checkbox"] + label::before{
674             content: ‘\a0‘; /* 这个表示不换行空格 */
675             display:inline-block;
676             vertical-align: .2em;
677             width:.8em;
678             height:.8em;
679             margin-right: .2em;
680             border-radius: .2em;
681             background: silver;
682             text-indent: .15em;
683             line-height: .65;
684         }
685         /*勾选样式*/
686         /*通过 focus和disabled 也可以设置  聚焦和禁用状态的样式*/
687         .definefuxuankuang  input[type="checkbox"]:checked + label::before{
688             content: ‘\2713‘;  /*对勾*/
689             background: yellowgreen;
690         }
691         /*隐藏掉原来的复选框*/
692 
693         .definefuxuankuang  input[type="checkbox"]{
694             position: absolute;
695             clip:rect(0,0,0,0);
696         }
697 
698       /*开关式按钮*/
699         .kaiguan input{
700             position: absolute;
701             clip:rect(0,0,0,0);
702         }
703         .kaiguan label{
704             display: inline-block;
705             padding:.3em .5em;
706             background: #ccc;
707             background-image: linear-gradient(#ddd,#bbb);
708             border:1px solid rgba(0,0,0,.2);
709             border-radius: .3em;
710             box-shadow: 0 1px white inset;
711             text-align: center;
712             text-shadow: 0 1px 1px white;
713         }
714         .kaiguan input:checked + label,.kaiguan input:active + label{
715             box-shadow: .05em .1em .2em rgba(0,0,0,.6) inset;
716             border-color: rgba(0,0,0,.3);
717             background: #bbb;
718         }
719 
720         /*内容决定宽度*/
721         figure{
722             max-width: 300px;
723             max-width:min-content;
724             margin:auto;
725         }
726         figure > img {
727             max-width: inherit;  /* 这条不会生效*/
728         }
729     </style>
730 </head>
731 <body>
732   <div class="box"></div>
733   <div class="supports"></div>
734 
735   <div class="reduceCode">YESmdksmdk!
736       <hr></div>
737   <div class="box1"></div>
738   <div class="borderimg">hahah</div>
739   <div class="backgroudpos"></div>
740 
741   <div class="calc"></div>
742 
743   <div class="f">
744       <div class="s">calc属性计算百分比和像素值</div>
745   </div>
746 
747   <!--4,圆角-->
748    <div class="radius">内圆角</div>
749   
750   <!--条纹背景-->
751    <div class="gradient">条纹背景</div>
752 
753   <!--线性渐变与网格-->
754   <div class="wangge">网格色块</div>
755   <div class="wangge2">网格线</div>
756   <div class="wangge3">蓝图网格</div>
757 
758   <!--径向渐变和波点-->
759   <div class="bodian">波点</div>
760   <div class="bodian2">可以作为背景的斜波点</div>
761 
762   <div class="sanjiaowen">三角纹</div>
763   <div class="qipan1">棋盘1</div>
764   <div class="qipan2">棋盘2</div>
765   <div class="qipan3">棋盘3</div>
766   <div class="qipan4">棋盘4</div>
767   <div class="qipan5">棋盘5</div>
768 
769   <!--角向渐变-->
770   <div class="jiaoxiangjianbian">角向渐变(没有浏览器支持)</div>
771     <!--伪随机背景-->
772   <div class="suijibeijing1">伪随机背景1</div>
773   <div class="suijibeijing2">伪随机背景2</div>
774   <div class="suijibeijing3">伪随机背景3(最终的伪随机效果)</div>
775 
776 
777   <!--连续图像边框-->
778   <div class="lianxubiankuang">连续的图像边框</div>
779   <!--老式信封边框-->
780   <div class="laoshixinfeng"></div>
781 
782   <!--蚂蚁行军边框-->
783   <div class="mayixingjun">蚂蚁行军边框</div>
784 
785   <!--平行四边形-->
786   <div class="parallelogram">平行四边形(文字也变倾斜了 )</div>
787   <div class="parallelogram2">平行四边形(文字不倾斜 )</div>
788 
789   <!--菱形-->
790   <img class="diamond" src="4.jpg"></img>
791   <!--切角效果-->
792   <div class="qiejiao">切角效果</div>
793   <div class="qiejiao2">切角效果2</div>
794 
795   <!--   画个长条的三角形-->
796   <div class="xiaosanjiao">小三角</div>
797 
798   <!--梯形标签页-->
799   <div class="tixing">梯形标签页</div>
800   <!--饼图-->
801   <div class="pie">饼图0-0.5</div>
802   <div class="pie2">饼图0.5-1</div>
803   <div class="pie3">40%</div>
804   <!--svg 画饼图-->
805   <svg class="svg">
806       <circle r="30" cx="50" cy="50" />
807   </svg>
808   <svg class="svg2" viewBox="0 0 32 32">
809       <circle r="16" cx="16" cy="16" />
810   </svg>
811 
812   <!--js结合svg画饼-->
813   <div class="svg3">20%</div>
814 
815   <!--单边阴影-->
816   <div class="shadow">单边阴影</div>
817 
818   <!--邻边阴影-->
819   <div class="shadow2">邻边阴影</div>
820   <!--对边阴影-->
821   <div class="shadow3">对边阴影</div>
822 
823   <div>不规则图形的投影,可以使用滤镜  filter:drop-shadow(2px 2px 10px red);这个参数基本与box-shadow的参数相同。</div>
824   
825   <!--滤镜染色效果-->
826   <div class="filter"><img src="./2.jpg" alt=""></div>
827   
828   <!-- 混合模式染色-->
829   <div class="mixmodel"><img src="./2.jpg" alt=""></div>
830 
831   <!--毛玻璃效果-->
832   <div class="maoboli">
833 
834      <p> 看文字看文字看文字看文字看文字看文字看文字看文字看文字看文字看文字
835       看文字看文字看文字看文字看文字</p>
836   </div>
837 
838   <!--折角效果-->
839   <div class="zhejiao"></div>
840 
841   <!-- 文本换行 -->
842   <div>
843       <ol class="huanhang">
844           <dt>Name</dt>
845           <dd>chance</dd>
846           <dt>email</dt>
847           <dd>123@126.com</dd>
848           <dd>456@126.com</dd>
849           <dt>address</dt>
850           <dd>china</dd>
851       </ol>
852   </div>
853   <!--文本行斑马条纹-->
854   <div class="banmatiaowen">
855      这是一行文本 <br>
856       这是一行文本 <br>
857       这是一行文本 <br>
858       这是一行文本 <br>
859       这是一行文本 <br>
860       这是一行文本 <br>
861   </div>
862 
863   <!--改变tab的宽度-->
864   <div>代码要写在pre 或code标签中,设置tab的宽度通过  tab-size:4; 设为0表示禁用,浏览器默认设置为8个。</div>
865 
866 <!--文字发光效果-->
867   <div class="faguangwenzi">glow</div>
868   <!--svg空心字-->
869    <h1>
870        <svg width="2em",height="1.2em">
871            <use xlink:href="#css" />
872            <text id="css" y="1em">css</text>
873        </svg>
874    </h1>
875 
876   <!--环形文字-->
877   <div class="circular">
878       <svg viewBox="0 0 100 100">
879           <path d="M 0,50 a 50,50 0 1,1 0,1 z" id="circle"/>
880           <text>
881               <textpath xlink:href="#circle">
882                   circular reasoning works because
883               </textpath>
884           </text>
885       </svg>
886   </div>
887 
888   <!--边框扩大可点击区域-->
889   <div class="borderkuoda">
890       +
891   </div>
892   <!--伪元素扩大可点击区域-->
893   <div class="kuodadianji">-</div>
894   <br>
895   <!--自定义单选框,复选框-->
896   <div class="definefuxuankuang">
897   <input type="checkbox" id="awesome" />
898   <label for="awesome">Awesome!!</label>
899   </div>
900   <!--开关按钮-->
901   <div class="kaiguan">
902       <input type="checkbox" id="kaiguan" />
903       <label for="kaiguan">开关按钮,一般慎用,容易跟普通按钮混淆</label>
904   </div>
905 
906   <!--内容决定宽度-->
907   <div class="contentwidth">
908       <p>第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行</p>
909       <figure>
910           <img src="./2.jpg" alt="">
911           <figcaption>
912               图片介绍 图片介绍 图片介绍 图片介绍 图片介绍 图片介绍 图片介绍 图片介绍 图片介绍 图片介绍 图片介绍
913           </figcaption>
914       </figure>
915       <p>最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行</p>
916   </div>
917   <script>
918 
919       var root =  document.documentElement;
920       console.log(root);
921       if("backgroundColor" in root.style){
922           console.log("had")
923       }else{
924           console.log("not had")
925       }
926 
927 
928       function $$(selector,context){
929           context = context || document;
930           var elements = context.querySelectorAll(selector);
931           return Array.prototype.slice.call(elements);
932       }
933       //把饼图的百分比文本 转换成 animation-delay
934       $$(".pie3").forEach(function(pie){
935           var p = parseFloat(pie.textContent);
936           pie.style.animationDelay = "-" + p + "s";
937       })
938 
939       //js结合svg画饼
940       $$(".svg3").forEach(function(pie){
941           var p = parseFloat(pie.textContent);
942           var NS = "http://www.w3.org/2000/svg";
943           var svg = document.createElementNS(NS,"svg");
944           var circle = document.createElementNS(NS,"circle");
945           var title = document.createElementNS(NS,"title");
946           circle.setAttribute("r",16);
947           circle.setAttribute("cx",16);
948           circle.setAttribute("cy",16);
949           circle.setAttribute("stroke","#655");
950           circle.setAttribute("stroke-width",32);
951           circle.setAttribute("stroke-dasharray",p+" 100");
952           svg.setAttribute("viewBox","0 0 32 32");
953           svg.style.borderRadius ="50%";
954           circle.style.fill = "yellowgreen";
955           title.textContent = pie.textContent;
956           pie.textContent = "";
957           svg.appendChild(title);
958           svg.appendChild(circle);
959           pie.appendChild(svg);
960       })
961   </script>
962 </body>
963 </html>

 

《css3揭秘》的效果code

原文:http://www.cnblogs.com/chengyunshen/p/7277065.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!