<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>纯CSS3模拟星体旋转效果</title>

<style>

.box{

	transform: scale(0.5);

	position: relative;

	padding: 1px;

	height: 300px;

	width: 300px;

	margin:100px auto;

}

.sunline{

	position:relative;

	height: 400px;

	width: 400px;

	border: 2px solid black;

	border-radius: 50%;

	margin: 50px 0 0 50px;

	display: flex;

	animation: rotate 10s infinite linear;

}

.sun{

	height: 100px;

	width: 100px;

	margin: auto;

	background-color: red;

	border-radius: 50%;

	box-shadow: 5px 5px 10px red,-5px -5px 10px red,5px -5px 10px red,-5px 5px 10px red;

}

.earthline{

	position: absolute;

	right: 0;

	top: 50%;

	height: 200px;

	width: 200px;

	margin: -100px -100px 0 0;

	border: 1px solid black;

	border-radius: 50%;

	display: flex;

	animation: rotate 2s infinite linear;

}

.earth{

	margin: auto;

	height: 50px;

	width: 50px;

	background-color: blue;

	border-radius: 50%;

}

.moon{

	position: absolute;

	left: 0;

	top: 50%;

	height: 20px;

	width: 20px;

	margin: -10px 0 0 -10px;

	background-color: black;

	border-radius: 50%;

}

@keyframes rotate{

	100%{transform:rotate(360deg);}

}

</style>

</head>

<body>

<div class="box">

	<div class="sunline">

		<div class="sun"></div>

		<div class="earthline">

			<div class="earth"></div>

			<div class="moon"></div>

		</div>

	</div>

</div>

</body>

</html>

　　

纯CSS3模拟星体旋转效果的更多相关文章

  1. 纯css3艺术文字样式效果代码

    效果:http://hovertree.com/texiao/css3/1/ 本效果主要使用text-shadow实现.参考:http://hovertree.com/h/bjaf/css3_text ...

  2. [原创]纯CSS3打造的3D翻页翻转特效

    刚接触CSS3动画,心血来潮实现了一个心目中自己设计的翻页效果的3D动画,页面纯CSS3,目前只能在Chrome中玩,理论上可以支持Safari. 1. 新建HTML,代码如下(数据和翻页后的数据都是 ...

  3. 7款纯CSS3实现的炫酷动画应用

    1.纯CSS3实现人物摇头动画 这次我们要来分享一款超级可爱的纯CSS3人物摇头动画,初始化的时候人物的各个部位是利用CSS3动画效果拼接而成,接下来就是人物听音乐的场景,一边听音乐一边摇着脑袋,十分 ...

  4. 8个超震撼的HTML5和纯CSS3动画源码

    HTML5和CSS3之所以强大,不仅因为现在大量的浏览器的支持,更是因为它们已经越来越能满足现代开发的需要.Flash在几年之后肯定会消亡,那么HTML5和CSS3将会替代Flash.今天我们要给大家 ...

  5. 11个超震撼的HTML5和纯CSS3动画源码

    1.jQuery多功能手风琴个人信息菜单面板 这是一款基于jQuery的手风琴个人信息菜单面板,每一个菜单项展开后可以自定义布局,因此可以为每一个菜单项实现多功能.类似这样的多功能菜单还有jQuery ...

  6. 超酷！纯CSS3烧烤动画实现教程

    今天在老外的网站上看到一款很有创意的纯CSS3动画,是模拟烧烤活动的.款动画模拟了一个烧烤架,烧烤架上的食物也都是用纯CSS3绘制而成,没有用一张图片,效果相当逼真.另外一个有意思的是,这个CSS3烧 ...

  7. 纯CSS3实现打火机火焰动画

    HTML5已经越来越流行起来了,尤其是移动互联网的发展,更是带动了HTML5的迅猛发展,我们也是时候学习HTML5了,以防到时候落伍.今天给大家介绍10款效果惊艳的HTML5应用,方便大家学习,也将应 ...

  8. 纯CSS3实现牛奶般剔透的3D按钮特效

    今天我们要来看一款非常特别的纯CSS3 3D按钮,它的外观酷似纯白剔透的牛奶,点击按钮的时候还会出现一种很柔和的弹力效果.按钮按下时,按钮会轻轻的弹动一下,非常逼真.本文我们在观赏演示的同时,也将源代 ...

  9. 纯CSS3实现的一些酷炫效果

    之前在网上看到一些用纯CSS3实现的酷炫效果,以为实现起来比较困难,于是想看看具体是怎么实现的. 一.笑脸猫动画 实现效果如下: 这个实现起来确实比较麻烦,很多地方需要花时间,有耐心地调整. 1.先看 ...

随机推荐

  1. Python笔记·第四章—— 细数Python中的数据类型以及他们的方法

    一.数据类型的种类及主要功能 1.数字类型 数字类型主要是用来计算,它分为整数类型int和浮点类型float 2.布尔类型 布尔类型主要是用于判断,它分为真True和False两种 3.字符串类型 字 ...

  2. Winform开发框架中工作流模块之申请单草稿处理

    在我们开发工作流模块的时候,有时候填写申请单过程中,暂时不想提交审批,那么可以暂存为草稿,以供下次继续填写或者提交处理,那么这个草稿的功能是比较实用的,否则对于一些填写内容比较多的申请单,每次要重填写 ...

  3. DotNetCore跨平台~Moq框架实现模拟测试

    回到目录 当我们进行软件开发时,一般会写单元测试,而对于业务情景来说,一般是测试它的业务逻辑准确性,对于你的测试数据是否来自数据库还是文件,是否为真实还是模拟,并不是很关心!我关心的就是我的业务逻辑是 ...

  4. 小型Web页打包优化（下）

    之前我们推送了一篇小型Web项目打包优化文章,(链接),我们使用了一段时间, 在这过程中我们也一直在思考, 怎么能把结构做的更好.于是我们改造了一版, 把可以改进的地方和可能会出现的问题, 在这一版中 ...

  5. JMeter获取JSON内容

    source("D:\\apache-jmeter-3.0\\用例\\Test.java"); public static void f(){ String response_da ...

  6. xamarin android布局

    xamarin android布局练习(1) xamarin android布局练习,基础非常重要,首先要学习的就是android的布局练习,xamarin也一样,做了几个xamarin androi ...

  7. Linux根目录详解-转自鸟哥的私房菜

    转自:http://myhat.blog.51cto.com/391263/107931/   *根目录(/)的意义与内容: 根目录是整个系统最重要的一个目录,因为不但所有的目录都是由根目录衍生出来的 ...

  8. windows 命令行打开浏览器

    在命令行打开百度 start chrome www.baidu.com

  9. Web API系列之二WebApi基础框架搭建

    本文主要介绍如何搭建一个WebApi的项目.关于如何搭建WebApi的方式一共有两种: 一.通过vs直接新建一个WebApi的项目,步骤如下: 第一步: 新建一个空的Web应用程序,可以理解为作为We ...

  10. Gulp-静态网页模块化

    前言: 在做纯静态页面开发的过程中,难免会遇到一些的尴尬问题.比如:整套代码有50个页面,其中有40个页面顶部和底部模块相同.那么同样的两段代码我们复制了40遍(最难受的方法).然后,这个问题就这样解 ...