您的位置:首页 - 教程 - 网页特效 - 正文
CSS3实现漂亮的星系轨道旋转特效
效果:http://hovertree.com/texiao/css3/24/

后面附有源码下载

效果图:


代码如下:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1" />
<title>CSS3实现星系轨道旋转特效 - 何问起</title>
<link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/css3/24/css/css.css">
</head>
<body>
<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>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<p>适用浏览器:360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗等新版浏览器。</p>
<p>来源:<a href="http://hovertree.com" target="_blank">何问起</a> <a href="http://hovertree.com/h/bjaf/css3xingxi.htm">原文</a> <a href="http://hovertree.com/texiao/">特效</a></p>
</div>
</body>
</html>


CSS代码如下:
/* 何问起 hovertree.com */
*{margin:0;padding:0;list-style:none;}
body{background:#d45a00;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 cir_p {
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 cir_p {
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{
-webkit-transform: rotateX(80deg) rotateY(-10deg);
transform: rotateX(80deg) rotateY(-10deg);
position: relative;
width: 350px;
height: 350px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
animation: cir 10s linear 0s infinite;
}
.ball_base {
-webkit-transform-origin: 225px 0px;
transform-origin: 225px 0px;
position: absolute;
top: 175px;
left: -50px;
width: 225px;
height: 127px;
}
.ball{
-webkit-transition:all 2s ease-out 0ms;
transition:all 2s ease-out 0ms;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
position: absolute;
width: 90px;
height: 90px;
line-height: 90px;
text-align: center;
background-image: url(../images/hovertreeball.png);
background-size: 100% 100%;
left: 0px;
top: 0px;
color: rgba(255, 255, 255, 0);
font-size: 12px;
opacity: 1;
overflow: hidden;
}

.ball_c {
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
position: absolute;
width: 157px;
height: 157px;
line-height: 157px;
text-align: center;
background-image: url(../images/ball_center.png);
left: 90px;
top: 50px;
color: #fff;
font-size: 24px;
}

.pan {
position: absolute;
width: 100%;
height: 100%;
background-image: url("../images/c.png");
background-size: 100% 100%;
-webkit-animation: cir_p 5s linear 0s infinite;
animation: cir_p 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);
}


源码下载:
http://hovertree.com/h/bjaf/hcicd3jt.htm

评论:
  • 2016-11-15 17:56 姐,这个东东,可以教下我,或者给个css我,研究研究
  • 2016-11-16 16:42 贴出了css代码,并增加了源代码资源的下载,希望对你有帮助
  • 2017-04-05 17:25 请问如何点击其中一个星球使其静止,中间就显示与这个星球里相关的内容?