本文转载自http://www.w3cfuns.com/notes/17946/11314ff4bd9f708f3aa37a081eb1f957
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 6 <title>css-taiji</title> 7 <style type="text/css"> 8 *{margin:0;padding:0;} 9 html{font-size: 62.5%;} 10 body{ 11 font-family: "mircoft yahei"; 12 font-size: 14px; 13 font-size:1.4rem; 14 line-height: 1; 15 height: 1500px; 16 } 17 .taiji 18 { 19 margin: 100px auto; 20 width: 500px; 21 height: 260px; 22 background-color: #fff; 23 border-color: #000; 24 border-style: solid; 25 border-width: 2px 2px 250px 2px; 26 border-radius: 100%; 27 position: relative; 28 29 animation: myfirst 5s ease-in-out 0s infinite ; 30 /* Firefox: */ 31 -moz-animation: myfirst 5s ease-in-out 0s infinite ; 32 /* Safari 和 Chrome: */ 33 -webkit-animation: myfirst 5s ease-in-out 0s infinite ; 34 /* Opera: */ 35 -o-animation: myfirst 5s ease-in-out 0s infinite ; 36 37 } 38 .taiji:before{ 39 position:absolute; 40 content:''; 41 top:50%; 42 left:0; 43 width:50px; 44 height:50px; 45 background-color: #fff; 46 border:100px solid #000; 47 border-radius: 100%; 48 } 49 .taiji:after{ 50 position:absolute; 51 content:''; 52 top:50%; 53 left:50%; 54 width:50px; 55 height:50px; 56 background-color: #000; 57 border:100px solid #fff; 58 border-radius:100%; 59 } 60 61 @keyframes myfirst{ 62 0% { 63 -webkit-transform: rotateZ(0deg); 64 -moz-transform: rotateZ(0deg); 65 -ms-transform: rotateZ(0deg); 66 -o-transform: rotateZ(0deg); 67 transform: rotateZ(0deg); 68 } 69 100% { 70 -webkit-transform: rotateZ(360deg); 71 -moz-transform: rotateZ(360deg); 72 -ms-transform: rotateZ(360deg); 73 -o-transform: rotateZ(360deg); 74 transform: rotateZ(360deg); 75 } 76 } 77 @-webkit-keyframes myfirst{ 78 0% { 79 -webkit-transform: rotateZ(0deg); 80 -moz-transform: rotateZ(0deg); 81 -ms-transform: rotateZ(0deg); 82 -o-transform: rotateZ(0deg); 83 transform: rotateZ(0deg); 84 } 85 100% { 86 -webkit-transform: rotateZ(360deg); 87 -moz-transform: rotateZ(360deg); 88 -ms-transform: rotateZ(360deg); 89 -o-transform: rotateZ(360deg); 90 transform: rotateZ(360deg); 91 } 92 } 93 @-moz-keyframes myfirst{ 94 0% { 95 -webkit-transform: rotateZ(0deg); 96 -moz-transform: rotateZ(0deg); 97 -ms-transform: rotateZ(0deg); 98 -o-transform: rotateZ(0deg); 99 transform: rotateZ(0deg); 100 } 101 100% { 102 -webkit-transform: rotateZ(360deg); 103 -moz-transform: rotateZ(360deg); 104 -ms-transform: rotateZ(360deg); 105 -o-transform: rotateZ(360deg); 106 transform: rotateZ(360deg); 107 } 108 } 109 @-ms-keyframes myfirst{ 110 0% { 111 -webkit-transform: rotateZ(0deg); 112 -moz-transform: rotateZ(0deg); 113 -ms-transform: rotateZ(0deg); 114 -o-transform: rotateZ(0deg); 115 transform: rotateZ(0deg); 116 } 117 100% { 118 -webkit-transform: rotateZ(360deg); 119 -moz-transform: rotateZ(360deg); 120 -ms-transform: rotateZ(360deg); 121 -o-transform: rotateZ(360deg); 122 transform: rotateZ(360deg); 123 } 124 } 125 </style> 126 </head> 127 <body> 128 <div class="taiji"></div> 129 </body> 130 </html>