<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>银河系</title>
<link rel="stylesheet" type="text/css" href="css/xuanzhuan.css">
</head>
<body>
<div id="p">
<div id="o">
<div id="i">
<div id="sun">太阳
<div id="earth">地球

</div>
</div>
</div>
</div>
</div>
</body>
</html>

*{
margin:0px;
padding:0px;
}
body{
color:#ccc;
background:#71BADD;
}
#p{
margin:100px auto;
width:500px;
height:500px;
border:2px dashed red;
border-radius:250px;
display:flex;
justify-content:center;
align-items:center;
}
/*
#i{
margin:50px auto;
width:300px;
height:300px;
border:2px dashed #FF34B3;
border-radius:150px;
}
150px 250px 150px

#o{
margin:100px auto;
width:300px;
height:300px;
border:2px dashed blue;
border-radius:150px;
}
*/
#sun{
line-height:100px;
text-align:center;
margin:230px auto;
width:100px;
height:100px;
border:2px solid #F6CC35;
border-radius:50px;
background-color:red;
animation: sunRotate 2s infinite;
}
@keyframes sunRotate{
0%{
transform:rotate(1turn);
}
}
#earth{
color:blue;
line-height:50px;
text-align:center;
width:50px;
height:50px;
border:2px solid #FF34B3;
border-radius:25px;
position:absolute;
top:280px;
left:calc(50% - 40px);
animation: earthRotate 2s infinite;
transform-origin:25px 25px;
}
/*
@keyframes earthRotate{
0%{
transform:rotate(1turn);
}
}

position:absolute;
*position:relative;
display:flex;
justify-content:center;
align-items:center;
*/

今天学习css一些动画效果的更多相关文章

  1. vue中使用第三方插件animate.css实现动画效果

    vue中使用第三方插件animate.css实现动画效果1.首先先引入第三方类animated.css2.将你所需要动画的标签用包裹起来3.在transition元素中添加enter-active-c ...

  2. CSS--使用Animate.css制作动画效果

    一 使用Animate.css动画 // 通过@import引入外部CSS资源; // 引入线上图片及JS文件; // 通过更改CSS类名生成不同类型的CSS3动画;   <!DOCTYPE h ...

  3. 是谁，在敲打我窗-CSS雨滴动画效果

    1.扯闲篇 是谁在敲打我窗  是谁在撩动琴弦  那一段被遗忘的时光 渐渐地回升出我心坎  是谁在敲打我窗  是谁在撩动琴弦 记忆中那欢乐的情景  慢慢地浮现在我的脑海 那缓缓飘落的小雨  不停地打在我 ...

  4. [CSS] Transitions动画效果(1)

    Transitions动画效果(1) 源码 https://github.com/YouXianMing/CSS-Animations/tree/master/Transitions 效果 细节

  5. CSS基础学习-15.CSS3 动画效果

  6. ANDROID_MARS学习笔记_S02_010_Animation_动画效果

    一.流程 1.把要实现动画的一系列图片复制到res/drawable文件夹 2.在此文件新建一个xml文件用来组织图片 3.在mainactivity中用imageView.setBackground ...

  7. css水波动画效果

    代码来源:http://www.jq22.com/code1526 HTML: <div class="waves"></div> css: html, b ...

  8. CSS 循环动画效果。

    @-moz-keyframes revolving{ 0{ -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); } 25%{ ...

  9. 一个CSS+jQuery的放大缩小动画效果

    日期: 2013年9月23日 作者:铁锚 // 今天帮朋友写了一些代码,自己觉得写着写着,好几个版本以后,有点满意,于是就贴出来. // 都是定死了的.因为需求就只有4个元素.如果是要用CSS的cla ...

随机推荐

  1. 用ALAssetsLibrary将过滤后图片写入照片库

    转载自:http://blog.sina.com.cn/s/blog_61235faa0100z3dp.html CIImage *saveToSave = [filter outputImage]; ...

  2. Android中回调接口的使用

    MainActivity如下: package cn.testcallback; import android.os.Bundle; import android.app.Activity; /** ...

  3. jquery ajax请求后台 的简单例子

    jQuery.ajax(url,[settings]) 概述 通过 HTTP 请求加载远程数据. jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax ...

  4. TypeScript学习笔记（三）：类

    类 在TypeScript中,类似于C#的结构,即一个文件中可以存在多个类,且文件名可以任意取,我们先看一个简单的类的示例. class Person { private name: string; ...

  5. hdu 4786 Fibonacci Tree (2013ACMICPC 成都站 F)

    http://acm.hdu.edu.cn/showproblem.php?pid=4786 Fibonacci Tree Time Limit: 4000/2000 MS (Java/Others) ...

  6. Spring启动时加载数据

    程序中也许有会有许多常用的,不会经常更改的数据,我们可以在程序初始化的时候就把他们加载,就不用频繁的加载或者查询. 以下是几个常用的,有COPY收集的,也有自己弄. 1. 实现BeanPostProc ...

  7. 漫谈云计算与SOA (1)

    SOA是什么? 英语直译是基于服务的架构,就是一种技术框架,促使企业内部与外部所有相关的系统公开和访问定义良好的服务和绑定于服务的信息,进一步抽象成流程层和组合应用,从而构成解决方案. 说人话:重用服 ...

  8. DbHelper数据操作类

    摘要:本文介绍一下DbHelper数据操作类 微软的企业库中有一个非常不错的数据操作类.但是,不少公司(起码我遇到的几个...),对一些"封装"了些什么的东西不太敢用,虽然我推荐过 ...

  9. VMware Workstation 11.0 官方中文版最强虚拟机软件（附下载地址）

    VMware Workstation 11.0 新版本功能一览: 支持 Windows 8.1 Update.Windows Server 2012 R2.Ubuntu 14.10.RHEL 7.Ce ...

  10. rsync服务架设(数据同步|文件增量备份)

        近期由于业务需要,需要将两台服务器数据保持同步.方案有很多,rsync是其中一种解决方案,本文对rsync的安装及配置进行简单说明,其他实现方式有兴趣可以研究.以下是本文提纲,供参考: rsy ...