首页 > 代码库 > 《css3揭秘》的效果code
《css3揭秘》的效果code
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
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。