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

...

代码参考: css3动画—— 星系轨道的更多相关文章

  1. 代码:css3动画效果demo

    四行文字会逐次掉落:  如果要停留在最后一帧的动画,注意要用forwards,不要用both. <style type="text/css"> @-webkit-key ...

  2. !!学习笔记:CSS3动画

    一句话就有css3动画: 2016-6-29 <style type="text/css"> h1{background:#999;} h1:hover{border- ...

  3. 编写自己的代码库(css3常用动画的实现)

    编写自己的代码库(css3常用动画的实现) 1.前言 在月初的时候,发了CSS3热身实战--过渡与动画(实现炫酷下拉,手风琴,无缝滚动).js的代码库也发过两次,两篇文章.之前也写了css3的热身实战 ...

  4. CSS Animatie是一款在线制作CSS3动画的工具,可以在线直接制作CSS3动画效果,生成代码

    CSS Animatie是一款在线制作CSS3动画的工具,可以在线直接制作CSS3动画效果,生成代码 CSS Animatie 彩蛋爆料直击现场 CSS Animatie是一款在线制作CSS3动画的工 ...

  5. demo: 全页面CSS3动画的一个参考例子

    全页面CSS3动画的一个参考例子: http://wow.blizzard.cn/wow/wod-achievement/ 魔兽的一个活动页 第二页.第三页,文字进入页面 <script src ...

  6. 一款简洁的纯css3代码实现的动画导航

    之前为大家介绍了好多导航菜单,今天给大家分享一款简洁的纯css3代码实现的动画导航.鼠标经过的时候以背景色以菱形渐变为长方形.效果图如下: 在线预览   源码下载 实现的代码. html代码: < ...

  7. 用CSS3动画,让页面动起来

    以前就听说过有个库,叫animate.css,但是自己并没有在实际项目中使用过,这次正好要做个招聘页面,得以利用一下这个库,在经常会卡顿的UC浏览器中也能流畅执行. 扫描下面的二维码,可以看到在线的d ...

  8. JavaScript - 基于CSS3动画的实现

    在痛苦的IE8时代,所有的动画都只能基于自己计算相关动画属性,开定时器setTimeout/setInterval轮询动画任务. 而肩负重任的HTML5,早已注意到了日益增强的动画,随着HTML5的降 ...

  9. 【转】CSS3动画帧数科学计算法

    本文来源于:财付通TID 原作者:bboy90 总结都浓缩在这个工具里了,想知道工具的地址或想窥探工具诞生的趣事请往下看 . —————————————————————–     华丽丽的开篇     ...

随机推荐

  1. 记一次揪心的MySQL数据恢复过程

    https://blog.csdn.net/poxiaonie/article/details/78304699 === 先说下背景,公司其中一个项目所有服务都部署在客户的机房内,机房较小,没有UPS ...

  2. 最新证明面临质疑:P/NP问题为什么这么难?

    转自:http://tech.sina.com.cn/d/2017-08-16/doc-ifyixias1432604.shtml 编译 | 张林峰(普林斯顿大学应用数学专业博士研究生) 责编 | 陈 ...

  3. Winform 实现无边框窗体移动功能

    #region 窗体移动 [DllImport("user32.dll")] public static extern bool ReleaseCapture(); [DllImp ...

  4. Winform 开发基础分层框架

    Winform 开发基础分层框架:

  5. IIS7.0 下使用Intelligencia.UrlRewriter时Session为空问题

    背景 新年伊始,本人的开发环境由Windows Server 2003 +IIS 6 升级成了 Windows Server 2008 +IIS 7,之后便着手参加新项目的开发.项目开发后期测试过程中 ...

  6. selenium python选取下拉框中的值

    https://stackoverflow.com/questions/47689936/unable-to-scroll-and-select-desired-year-from-calender- ...

  7. ALGO-22_蓝桥杯_算法训练_装箱问题(DP)

    问题描述 有一个箱子容量为V(正整数,<=V<=),同时有n个物品(<n<=),每个物品有一个体积(正整数). 要求n个物品中,任取若干个装入箱内,使箱子的剩余空间为最小. 输 ...

  8. host文件的用处

    做Flash开发的人员免不了接触host文件. 1:首先你注册Flash软件.FlashBuilder都需要先修改host,然后再安装的.(具体的修改时在etc包里找到host文件,把一堆adobe的 ...

  9. Hadoop概念学习系列之为什么hadoop/spark执行作业时,输出路径必须要不存在?(三十九)

    很多人只会,但没深入体会和想为什么要这样? 拿Hadoop来说,当然,spark也一样的道理. 输出路径由Hadoop自己创建,实际的结果文件遵守part-nnnn的约定. 如何指定一个已有目录作为H ...

  10. P2670扫雷

    链接 这是一个并不像搜索的题(其实它是个循环) 对于输入的a数组,一个一个遍历下来,如果a[i][j]是雷,那(i,j)周围8个点对应的位置雷数就+1(用b数组记录),注意不能超出边界,输出时,如果a ...