效果：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. 生活中的OO智慧——大话面向对象五大原则

    世间万物,以俗眼观纷纷各异,以道眼观种种是常.面向对象思想不仅是编程的智慧,同样也是人生的智慧.通过生活去领悟面向对象的智慧,以面向对象的智慧来指导生活. (部分图片取自How I explained ...

  2. 当我谈 "加班有罪" 我在谈什么？

    前言 PS. 本文只描述IT行业. 博客园果真人气比较高,我之前准备写个 "领域驱动系列",然后感觉大家不感兴趣,看来用的人不多,所以一直没动力续,但是昨天写了 [加班有罪] (h ...

  3. Python调用C++的DLL

    import os import sys from ctypes import * test = cdll.LoadLibrary('D:\Python27\py.dll') print test.A ...

  4. Android APK是否需要预解压

    今天在逛论坛的时候,发现有一个朋友问的问题.其主要目的,是想实现 玩家首次进入游戏的时候,或者新安装了版本的时候,对APK进行解压,写入SD卡.这样游戏运行过程中,将不会再从APK中读取资源. 以提高 ...

  5. 花一分钟来看看Worktile是如何为团队协作而生的

    团队协作,我们想的更深.更远.更多,花一分钟来看看我们特别奉献的故事,然后去注册一个账号,邀请小伙伴一起来工作,你会体会Worktile才是真正懂你的协作方式.

  6. 《Entity Framework 6 Recipes》中文翻译系列 (20) -----第四章 ASP.NET MVC中使用实体框架之在MVC中构建一个CRUD示例

    翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 第四章  ASP.NET MVC中使用实体框架 ASP.NET是一个免费的Web框架 ...

  7. vs code插件记录

    最近一段时间一直在迷恋vs code,使用了一段时间,发现它即精简又快速,安装插件又快又稳定而且插件说明也很详细,是一款继sublime后少得的良心前端编辑器,配合上一些插件可以补全一些不足以更趋向于 ...

  8. js中的DOM事件与对象

    概念图 document.getElementById("bb"); 根据id找到bb,只能找一个哦 var aa = document.getElementById(" ...

  9. 初学者--bootstrap（一）----在路上（1）

    bootstrap: 是目前最受欢迎的前端框架,并基于HTML.CSS.JavaScript 等,而且他是为了适应并兼容各个电子设备,是对媒体查询的封装. 1.什么是媒体查询   他 是响应式布局的方 ...

  10. storm 集群配置

    配置storm集群的过程中出现写问题,记录下来 1.storm是通过zookeeper管理的,先要安装zookeeper,从zk官网上下来,我这里下下来的的3.4.9,下载后移动到/usr/local ...