1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>css3 太极</title> 6 <style type="text/css"> 7 body{margin:0;padding: 0;background: #6A9BE0;} 8 .r{width: 400px;height: 400px;border-radius: 100px 40px 200px 300px / 200px 60px 100px 150px;background: #ffc000;} 9 10 .example { 11 width: 150px; 12 height: 80px; 13 } 14 .example1 { 15 background: -moz-linear-gradient( top,#ccc,#000); 16 /*background: -webkit-linear-gradient( top,#ccc,#000);*/ 17 /*background: -webkit-gradient(linear, left top, right bottom, from(#ffc000), to(#000));*/ 18 /*background: -webkit-linear-gradient(top, #ace, #f96);*/ 19 /*background: -webkit-linear-gradient(left, #ace, #f96, #ace, #f96, #ace);*/ 20 background: -webkit-linear-gradient(right, rgba(106,155,224,0), rgba(106,155,224,1)),url(flow.png) center top no-repeat; 21 } 22 .example2{ 23 background: url(flow.png) center top no-repeat; 24 } 25 26 .a1{ 27 position: relative; 28 overflow: hidden; 29 width: 500px; 30 height: 500px; 31 margin: 50px auto; 32 background: #fff; 33 border-radius: 250px;-moz-border-radius: 250px;-webkit-border-radius: 250px; 34 box-shadow: 0 0 50px #fff;-moz-box-shadow: 0 0 50px #fff;-webkit-box-shadow: 0 0 50px #fff; 35 -webkit-transition: all 3s ease-in; 36 } 37 .a1:hover{-webkit-transform: rotate(360deg);} 38 .b1{ 39 position: absolute; 40 top:0;right: 0; 41 width: 250px; 42 height: 500px; 43 background: #000; 44 -webkit-border-top-right-radius:250px; 45 -webkit-border-bottom-right-radius:250px; 46 } 47 .c1{ 48 position: absolute; 49 top: 0; 50 right: 25%; 51 width: 50%;height: 50%; 52 background: #fff; 53 border-radius: 125px;-moz-border-radius: 125px;-webkit-border-radius: 125px; 54 } 55 .d1{ 56 position: absolute; 57 bottom: 0;left: 25%; 58 width: 50%;height: 50%; 59 background: #000; 60 border-radius: 125px;-moz-border-radius: 125px;-webkit-border-radius: 125px; 61 } 62 .c2{ 63 position: absolute;top: 40%;right: 40%; 64 width: 25%;height: 25%; 65 background: #000; 66 border-radius: 31px;-moz-border-radius: 31px;-webkit-border-radius: 31px; 67 } 68 .d2{ 69 position: absolute;bottom: 40%;left: 40%; 70 width: 25%;height: 25%; 71 background: #fff; 72 border-radius: 31px;-moz-border-radius: 31px;-webkit-border-radius: 31px; 73 } 74 </style> 75 </head> 76 <body> 77 78 <!-- border-radius --> 79 <div class="r"> 80 81 </div> 82 <!-- linear / radial gradient --> 83 <div class="example example1"></div> 84 <div class="example example2"></div> 85 86 <div class="a1"> 87 <div class="b1"></div> 88 <div class="c1"> 89 <div class="c2"></div> 90 </div> 91 <div class="d1"> 92 <div class="d2"></div> 93 </div> 94 </div> 95 </body> 96 </html>
1. border-shadow
2. border-radius
3. transform
4. transition
5. gradient