html源码：
???<div><div></div></div> ???<div><div></div></div> ???<div><div></div></div> ???<div><div></div></div>css源码：
??<style type="text/css"> ???????*{margin:0;padding:0;} ???????html,body{ ???????????height:100%; ???????} ???????body{ ???????????background:radial-gradient(ellipse at center,#34679a 0%, #214163 50%, #0d1926 100%);/*径向渐变 ??椭圆*/ ???????} ???????body > div{ ???????????width:200px;/*宽度 px像素 ?cm*/ ???????????height:200px;/*高度*/ ???????????border:1px #fff solid;/*边框 宽度 风格 颜色*/ ???????????border-radius:50%;/*圆角*/ ???????????position:absolute; ???????????top:15%; ???????????left:50%; ???????????margin-left:-101px; ???????????transform:rotateX(80deg) rotateY(20deg); ???????????transform-style:preserve-3d; ???????} ???????body > div:nth-of-type(2){ ???????????transform:rotateX(-80deg) rotateY(20deg); ???????} ???????body > div:nth-of-type(3){ ???????????transform:rotateX(-70deg) rotateY(60deg); ???????} ???????body > div:nth-of-type(4){ ???????????transform:rotateX(70deg) rotateY(60deg); ???????} ???????body > div:first-of-type:after{ ???????????width:40px; ???????????height:40px; ???????????content:""; ???????????background:#fff; ???????????position:absolute; ???????????top:50%; ???????????left:50%; ???????????margin-top:-20px; ???????????margin-left:-20px; ???????????transform:rotateX(80deg); ???????????border-radius:50%; ???????????animation:nucleus 2s infinite linear; ???????} ???????body > div > div{ ???????????width:200px; ???????????height:200px; ???????????position:relative; ???????????transform-style:preserve-3d; ???????????animation:trail 1s infinite linear; /*自定义动画 ?动画名称 时间 播放次数 速度*/ ???????} ???????body > div > div:after{ ???????????content:""; ???????????width:5px; ???????????height:5px; ???????????background:#fff; ???????????position:absolute; ???????????top:-5px; ???????????left:50%; ???????????margin-left:-5px; ???????????border-radius:50%; ???????????box-shadow:0 0 12px #fff;/*阴影 x y 模糊度 颜色*/ ???????????animation:particle 1s infinite linear; ???????} ???????/*自定义动画执行*/ ???????@keyframes trail{ ???????????from{ ???????????????transform:rotateZ(0deg); ???????????} ???????????to{ ???????????????transform:rotateZ(360deg); ???????????} ???????} ???????@keyframes particle{ ???????????from{ ???????????????transform:rotateX(90deg) rotateY(0deg); ???????????} ???????????to{ ???????????????transform:rotateX(90deg) rotateY(-360deg); ???????????} ???????} ???????@keyframes nucleus{ ???????????0%{ ???????????????box-shadow:0 0 0 transparent; ???????????} ???????????50%{ ???????????????box-shadow:0 0 25px #fff; ???????????} ???????????100%{ ???????????????box-shadow:0 0 0 transparent; ???????????} ???????} ???????body > div:nth-of-type(2) > div, ???????body > div:nth-of-type(2) > div:after{ ???????????animation-delay:-0.5s; ???????} ???????body > div:nth-of-type(3) > div, ???????body > div:nth-of-type(3) > div:after{ ???????????animation-delay:-1s; ???????} ???????body > div:nth-of-type(4) > div, ???????body > div:nth-of-type(4) > div:after{ ???????????animation-delay:-1.5s; ???????} ??</style>web前端炫酷特效-CSS3制作环形星星发光动画
原文地址：http://blog.51cto.com/13457136/2088955