CSS3橙色的星球绕轨道公转动画
http://hovertree.com/texiao/css3/24/ 例子
http://hovertree.com/h/bjaf/css3xingxi.htm 原文
HTML代码:
<!-- <link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/css3/24/css/css.css"> --> <link rel="stylesheet" type="text/css" href="css.css"> <div class="ui-base u-p3d"> <div class="ball-c">何问起</div> <div class="base u-p3d"> <div class="pan"></div> <div class="ball-base u-p3d ball-1"><div class="ball">JS代码</div></div> <div class="ball-base u-p3d ball-2"><div class="ball">网页特效</div></div> <div class="ball-base u-p3d ball-3"><div class="ball">HoverTreeSCJ</div></div> <div class="ball-base u-p3d ball-4"><div class="ball">HoverTree</div></div> <div class="ball-base u-p3d ball-5"><div class="ball">月亮</div></div> <div class="ball-base u-p3d ball-6"><div class="ball">柯乐义</div></div> </div> </div>
CSS代码:
/* 何问起 hovertree.com */ body{background:#fff;font-family:microsoft yahei;} @-webkit-keyframes cir1 { 0% {-webkit-transform:rotateY(0deg) rotateZ(10deg);} 100% {-webkit-transform:rotateY(-360deg) rotateZ(10deg);} } @keyframes cir1 { 0% {transform:rotateY(0deg) rotateZ(10deg);} 100% {transform:rotateY(-360deg) rotateZ(10deg);} } @-webkit-keyframes cir2 { 0% {-webkit-transform:rotateY(-60deg) rotateZ(10deg);} 100% {-webkit-transform:rotateY(-420deg) rotateZ(10deg);} } @keyframes cir2 { 0% {transform:rotateY(-60deg) rotateZ(10deg);} 100% {transform:rotateY(-420deg) rotateZ(10deg);} } @-webkit-keyframes cir3 { 0% {-webkit-transform:rotateY(-120deg) rotateZ(10deg);} 100% {-webkit-transform:rotateY(-480deg) rotateZ(10deg);} } @keyframes cir3 { 0% {transform:rotateY(-120deg) rotateZ(10deg);} 100% {transform:rotateY(-480deg) rotateZ(10deg);} } @-webkit-keyframes cir4 { 0% {-webkit-transform:rotateY(-180deg) rotateZ(10deg);} 100% {-webkit-transform:rotateY(-540deg) rotateZ(10deg);} } @keyframes cir4 { 0% {transform:rotateY(-180deg) rotateZ(10deg);} 100% {transform:rotateY(-540deg) rotateZ(10deg);} } @-webkit-keyframes cir5 { 0% {-webkit-transform:rotateY(-240deg) rotateZ(10deg);} 100% {-webkit-transform:rotateY(-600deg) rotateZ(10deg);} } @keyframes cir5 { 0% {transform:rotateY(-240deg) rotateZ(10deg);} 100% {transform:rotateY(-600deg) rotateZ(10deg);} } @-webkit-keyframes cir6 { 0% {-webkit-transform:rotateY(-300deg) rotateZ(10deg);} 100% {-webkit-transform:rotateY(-660deg) rotateZ(10deg);} } @keyframes cir6 { 0% {transform:rotateY(-300deg) rotateZ(10deg);} 100% {transform:rotateY(-660deg) rotateZ(10deg);} } @keyframes cir { 0% {transform:rotateX(80deg) rotateY(-10deg) rotateZ(0deg);} 100% {transform:rotateX(80deg) rotateY(-10deg) rotateZ(-360deg);} } @keyframes cirppp { 0% {transform:rotateZ(0deg);} 100% {transform:rotateZ(-360deg);} } @-webkit-keyframes cir { 0% {-webkit-transform:rotateX(80deg) rotateY(-10deg) rotateZ(0deg);} 100% {-webkit-transform:rotateX(80deg) rotateY(-10deg) rotateZ(-360deg);} } @-webkit-keyframes cirppp { 0% {-webkit-transform:rotateZ(0deg);} 100% {-webkit-transform:rotateZ(-360deg);} } .u-p3d{ -webkit-transform-style:preserve-3d !important; transform-style:preserve-3d !important; } .ui-base {position:relative;width:400px;height:0px;margin:80px auto; -webkit-perspective:1000px; -webkit-perspective-origin:50% 0%; perspective:1000px; perspective-origin:50% 0%; } .base{position:relative;width:350px;height:350px; -webkit-transform:rotateX(80deg) rotateY(-10deg); transform:rotateX(80deg) rotateY(-10deg); -webkit-backface-visibility:hidden; backface-visibility:hidden; animation:cir 10s linear 0s infinite; } .ball-base {position:absolute;top:175px;left:-50px;width:225px;height:127px; -webkit-transform-origin:225px 0px; transform-origin:225px 0px; } .ball{position:absolute;width:90px;height:90px;line-height:90px;text-align:center;left:0px;top:0px;color:rgba(255, 255, 255, 0);font-size:12px;overflow:hidden; -webkit-transition:all 2s ease-out 0ms; transition:all 2s ease-out 0ms; -webkit-transform-origin:50% 50%; transform-origin:50% 50%; background-image:url(http://hovertree.com/texiao/css3/24/images/hovertreeball.png); background-size:100% 100%; opacity:1; } .ball-c {position:absolute;width:157px;height:157px;line-height:157px;text-align:center;left:90px;top:50px;color:#fff;font-size:24px; -webkit-transform-origin:50% 50%; transform-origin:50% 50%; background-image:url(http://hovertree.com/texiao/css3/24/images/ball_center.png); } .pan {position:absolute;width:100%;height:100%; background-image:url("http://hovertree.com/texiao/css3/24/images/c.png"); background-size:100% 100%; -webkit-animation:cirppp 5s linear 0s infinite; animation:cirppp 5s linear 0s infinite; } .ball {color:#fff;opacity:1;} .ball-1 .ball { transform:rotateY(10deg) rotateZ(10deg); animation:cir1 10s linear 0s infinite; -webkit-transition-delay:1100ms !important; transition-delay:1100ms !important; } .ball-2 .ball { -webkit-animation:cir2 10s linear 0s infinite; animation:cir2 10s linear 0s infinite; -webkit-transition-delay:900ms !important; transition-delay:900ms !important; } .ball-3 .ball { -webkit-animation:cir3 10s linear 0s infinite; animation:cir3 10s linear 0s infinite; -webkit-transition-delay:700ms !important; transition-delay:700ms !important; } .ball-4 .ball { -webkit-animation:cir4 10s linear 0s infinite; animation:cir4 10s linear 0s infinite; -webkit-transition-delay:500ms !important; transition-delay:500ms !important; } .ball-5 .ball { -webkit-animation:cir5 10s linear 0s infinite; animation:cir5 10s linear 0s infinite; -webkit-transition-delay:300ms !important; transition-delay:300ms !important; } .ball-6 .ball { -webkit-animation:cir6 10s linear 0s infinite; animation:cir6 10s linear 0s infinite; -webkit-transition-delay:100ms !important; transition-delay:100ms !important; } .ball-1 { -webkit-transform:rotateX(-90deg) rotateY(0deg) translateY(-70px); transform:rotateX(-90deg) rotateY(0deg) translateY(-70px); } .ball-2 { -webkit-transform:rotateX(-90deg) rotateY(60deg) translateY(-70px); transform:rotateX(-90deg) rotateY(60deg) translateY(-70px); } .ball-3 { -webkit-transform:rotateX(-90deg) rotateY(120deg) translateY(-70px); transform:rotateX(-90deg) rotateY(120deg) translateY(-70px); } .ball-4 { -webkit-transform:rotateX(-90deg) rotateY(180deg) translateY(-70px); transform:rotateX(-90deg) rotateY(180deg) translateY(-70px); } .ball-5 { -webkit-transform:rotateX(-90deg) rotateY(240deg) translateY(-70px); transform:rotateX(-90deg) rotateY(240deg) translateY(-70px); } .ball-6 { -webkit-transform:rotateX(-90deg) rotateY(300deg) translateY(-70px); transform:rotateX(-90deg) rotateY(300deg) translateY(-70px); }
...