效果：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>

转自：http://hovertree.com/h/bjaf/css3xingxi.htm

特效汇总：http://www.cnblogs.com/roucheng/p/texiao.html

CSS3橙色的星球绕轨道公转动画的更多相关文章

  1. jQuery css3鼠标悬停图片显示遮罩层动画特效

    jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...

  2. jQuery.smoove — jQuery和CSS3炫酷滚动页面内容元素动画特效插件

    插件介绍: jQuery-smoove是一款jQuery和CSS3炫酷滚动页面内容元素动画特效插件.该内容元素动画插件在页面滚动到指定位置时,该位置的HTML元素会执行指定的CSS3动画特效,如旋转. ...

  3. 5个基于css3超炫的鼠标滑动按钮动画

    今天给大家分享5个基于css3超炫的鼠标滑动按钮动画.这5个按钮鼠标经过的时候有超炫的动画效果.这5个按钮适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之 ...

  4. css3基础教程十六变形与动画animation

    前面我们讲过的变形与动画一般都是通过鼠标的单击.获得焦点,被点击或对元素进行一定改变后以后触发效果的,那么有没有像Flash一样自动播放的动画效果呢?答案当然是肯定的,这就是我们今天要讲到的anima ...

  5. HTML5+CSS3实现图片可倾斜摆放的动画相册效果

    先看看效果:其中鼠标悬浮在图片上会有动态效果图 直接上代码: css文件 @CHARSET "UTF-8"; *{ padding:0px; margin:0px; } div{ ...

  6. 纯CSS3实现3D特效的iPhone 6动画

    iPhone 6发布不久,屌丝怎能买得起,不过作为程序员,今天看到一个用纯CSS3绘制的iPhone 6,由于CSS3特性的运用,带有点3D的动画特效,大家可以先来看看在线演示效果. 在线演示    ...

  7. 10款基于HTML5+CSS3实现的超酷源码动画

    1.基于Bootstrap的jQuery登录表单 这是一款基于Bootstrap的登录表单,表单的外观自然不用说,沿用了Bootstrap的风格,非常漂亮.这款登录表单有一个经过CSS3处理过的头像图 ...

  8. CSS3鼠标移入移出图片生成随机动画

    今天分享使用html+css3+少量jquery实现鼠标移入移出图片生成随机动画,我们先看最终效果图(截图为静态效果,做出来可是动态的哟) 左右旋转 上下移动 缩放 由于时间关系我就不一步步解析各段代 ...

  9. 纯CSS3浮雕质感的立体文字旋转动画

    还记得之前分享过一个CSS3 文字3D翻转特效,这个效果让文字有一种立体的视觉效果.今天要分享的这款CSS3文字动画特效更加炫酷,它不仅有立体的3D效果,而且文字整体展现出一种浮雕质感的视觉效果,并且 ...

随机推荐

  1. 眼见为实：.NET类库中的DateTimeOffset用途何在

    在 EnyimMemcachedCore(支持.NET Core的memached客户端)中实现 Microsoft.Extensions.Caching.Distributed.IDistribut ...

  2. Emacs 配置文件

    以下是我整理的 emacs 配置文件,供刚开始玩 emacs 的同学参考.网上有人说:emacs 是神的编辑器,如果能够用到这样的编辑器,那这个人就是神了.从我个人的经验来看,emacs 是一把利器, ...

  3. IEEE754、VAX、IBM浮点型介绍和.NET中互相转换

    [题外话] 最近在做C3D文件的解析,好奇怪的是文件中竟然存储了CPU的类型,原本不以为然,结果后来读取一个文件发现浮点数全部读取错误.查了下发现虽然在上世纪80年代就提出了IEEE754要统一浮点数 ...

  4. 使用border做三角形

    网站上经常会使用一些三角形,除了图片的方式,实际上利用border我们可以做出纯CSS的三角形.我们知道border是个边抖可以单独设置,当四个边相交的时候他们是什么时候改变的? .t0{ margi ...

  5. Eclipse代码格式化规范

    附件()是Eclipse代码格式文件,根据以下步骤导入到Eclipse中,帮助规范代码格式. 导入步骤:1. Window -> Performances2. Java -> Code S ...

  6. Oracle编程脚本记录

    --命令窗口查询 exec 存储名.包名.视图; select 函数名 from dual; create or replace procedure PR_test is begin --存储过程的代 ...

  7. Thrift架构~目录

    回到占占推荐博客索引 概念相关 thrift是一个软件框架,用来进行可扩展且跨语言的服务的开发.它结合了功能强大的软件堆栈和代码生成引擎,以构建在 C++, Java, Python, PHP, Ru ...

  8. PHP分布式中Redis实现Session

    方法一:找到配置文件php.ini,修改为下面内容,保存并重启服务 session.save_handler = redis session.save_path = "tcp://127.0 ...

  9. Spring学习记录(七)---表达式语言-SpEL

    SpEL---Spring Expression Language:是一个支持运行时查询和操作对象图表达式语言.使用#{...}作为定界符,为bean属性动态赋值提供了便利. ①对于普通的赋值,用Sp ...

  10. 有吧友需要PDF的下载站点，好吧，我这边汇总一下

    [经验]谈谈怎么找自己想要的资源吧~ http://www.cnblogs.com/dunitian/p/4715482.html PDF Free Computer, Programming, Ma ...