css3书写loading围绕一个中心点旋转效果

1、准备好需要用到的字体图标。

2、新建html文档。

3、书写hmtl代码。<div class="container"> <div class="header"> <h1>css3书写loading围绕一个中心点旋转效果</h1> </div> <div class="solar"> <i class="mercury"></i> <i class="venus"></i> <i class="earth"></i> <i class="mars"></i> <i class="belt"></i> <i class="jupiter"></i> <i class="saturn"></i> <i class="uranus"></i> <i class="neptune"></i> </div> </div>

4、初始化css代码。<style>.clearfix { *zoom: 1;}.c盟敢势袂learfix:before, .clearfix:after { display: table; line-height: 0; content: ""; }.clearfix:after { clear: both; }body, html { padding: 0; margin: 0; font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }@font-face { font-family: 'oxp-demo'; src: url('../fonts/oxp-demo.eot?71650457'); src: url('../fonts/oxp-demo.eot?71650457#iefix') format('embedded-opentype'), url('../fonts/oxp-demo.woff?71650457') format('woff'), url('../fonts/oxp-demo.ttf?71650457') format('truetype'), url('../fonts/oxp-demo.svg?71650457#oxp-demo') format('svg'); font-weight: normal; font-style: normal; }[class^="icon-"]:before, [class*=" icon-"]:before { font-family: 'oxp-demo'; margin: 0 4px; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; speak: none; text-align: center; }.icon-th:before { content: '\e800'; }.icon-left:before { content: '\e803'; }body { font-family: 'Roboto', Arial, sans-serif; color: #fff; background: #40b0fd; }a, a:visited { color: #888; text-decoration: none; }a:hover, a:active { color: #333; }h1, h2, h3 { font-family: 'Roboto', Arial, sans-serif; }h1 { font-size: 2.5em; font-weight: 300; }h2 { font-size: 1.5em; font-weight: 300; }h3 { font-size: 1.2em; font-weight: 400; }.container .header { margin: 0 auto; padding: 5px; text-align: center; background: rgba(0,0,0,0.01); }.container .header span { display: block; font-size: 60%; opacity: 0.8; padding-bottom: 0.6em; }</style>

5、书写css代码。.solar { margin: 250px auto 350px; height: 50px; width: 50px; background: orange; border-radius: 25px; position: relative; -webkit-animation: glow 1.5s linear infinite; -moz-animation: glow 1.5s linear infinite; }.solar i { border-radius: 250px; display: block; position: absolute; border: 1px solid rgba(255, 255, 255, 0.15); box-sizing: border-box; -moz-box-sizing: border-box; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; }.solar i:before { content: ''; border-radius: 25px; background: black; display: block; position: absolute; top: -5px; right: 45%; }.solar i.mercury { width: 80px; height: 80px; margin-left: -40px; left: 50%; top: 50%; margin-top: -40px; -webkit-animation: orbit .5s linear infinite; -moz-animation: orbit .5s linear infinite; }.solar i.mercury:before { background: #6F5F5F; height: 7px; width: 7px; }.solar i.venus { width: 110px; height: 110px; margin-left: -55px; left: 50%; top: 50%; margin-top: -55px; -webkit-animation: orbit 1s linear infinite; -moz-animation: orbit 1s linear infinite; }.solar i.venus:before { background: #E7A71F; height: 10px; width: 10px; }.solar i.earth { width: 140px; height: 140px; margin-left: -70px; left: 50%; top: 50%; margin-top: -70px; -webkit-animation: orbit 1.5s linear infinite; -moz-animation: orbit 1.5s linear infinite; }.solar i.earth:before { background: #63BEE2; height: 10px; width: 10px; }.solar i.mars { width: 170px; height: 170px; margin-left: -85px; left: 50%; top: 50%; margin-top: -85px; -webkit-animation: orbit 2s linear infinite; -moz-animation: orbit 2s linear infinite; }.solar i.mars:before { background: red; height: 10px; width: 10px; }.solar i.belt { box-sizing: border-box; -moz-box-sizing: border-box; border-width: 25px; width: 240px; height: 240px; margin-left: -120px; border-color: rgba(36, 35, 35, 0.21); left: 50%; top: 50%; margin-top: -120px; }.solar i.jupiter { width: 260px; height: 260px; margin-left: -130px; left: 50%; top: 50%; margin-top: -130px; -webkit-animation: orbit 2.5s linear infinite; -moz-animation: orbit 2.5s linear infinite; }.solar i.jupiter:before { background: #CF9B2B; top: -15px; height: 30px; width: 30px; }.solar i.saturn { width: 320px; height: 320px; margin-left: -160px; left: 50%; top: 50%; margin-top: -160px; -webkit-animation: orbit 3s linear infinite; -moz-animation: orbit 3s linear infinite; }.solar i.saturn:before { background: #CF7A2B; top: -10px; height: 20px; width: 20px; }.solar i.saturn:after { background: #fff; width: 30px; height: 1px; content: ''; position: absolute; display: block; background: #FFF; width: 30px; height: 1px; content: ''; right: 43.5%; -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); }.solar i.uranus { width: 360px; height: 360px; margin-left: -180px; left: 50%; top: 50%; margin-top: -180px; -webkit-animation: orbit 3.5s linear infinite; -moz-animation: orbit 3.5s linear infinite; }.solar i.uranus:before { background: #10C593; top: -8px; height: 15px; width: 15px; }.solar i.neptune { width: 400px; height: 400px; margin-left: -200px; left: 50%; top: 50%; margin-top: -200px; -webkit-animation: orbit 4s linear infinite; -moz-animation: orbit 4s linear infinite; }.solar i.neptune:before { background: #1470E4; top: -8px; height: 15px; width: 15px; }@-webkit-keyframes orbit { 0% { -webkit-transform:rotate(0deg);} 50% { -webkit-transform:rotate(-180deg);} 100% { -webkit-transform:rotate(-360deg);}}@-webkit-keyframes glow { 0% { box-shadow: none;} 50% { background: #FFEB00; box-shadow: 0 0 20px orange;} 100% { box-shadow: none;}}@-moz-keyframes orbit { 0% { -moz-transform:rotate(0deg);} 50% { -moz-transform:rotate(-180deg);} 100% { -moz-transform:rotate(-360deg);}}@-moz-keyframes glow { 0% { box-shadow: none;} 50% { background: #FFEB00; box-shadow: 0 0 20px orange;} 100% { box-shadow: none;}}

6、代码整体结构。

7、查看效果。