代码参考： css3动画—— 星系轨道

2022-12-09 15:27:09

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:;

}

.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:;}

.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);

}

...

码农公寓

相关文章