今天学习css一些动画效果
<!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;
*/
最新文章
- Android性能优化之巧用软引用与弱引用优化内存使用
- iOS之获取经纬度并通过反向地理编码获取详细地址
- 从github获取代码
- Scalaz(54)- scalaz-stream: 函数式多线程编程模式-Free Streaming Programming Model
- 一些IT中的工具介绍【转】
- Asp.net自带导出方法
- Objective-C 编程艺术 (Zen and the Art of the Objective-C Craftsmanship 中文翻译)
- HDU Sky数 2079 简单易懂的代码
- 采购术语PR、PO、RFQ、RFI、SOW、BOM、JIT、VMI、MRO 是什么意思
- 【Bug Fix】Error : Can&;#39;t create table &;#39;moshop_1.#sql-534_185&;#39; (errno: 150)
- Spring MVC 实践 - Base
- php中获取用户登陆的IP地址以及常规处理
- WPF:How to display a Bitmap on Image control
- Navicat Premium 12破解方法
- 运维自动化 第一章 git
- leetcode32
- log4j 根据类名指定文件
- 关于delete和对象复制
- word2vec原理
- 腾讯PHP工程师面试题两份
热门文章
- Maven仓库Nexus的安装配置
- Python模块(Module)
- oracle 监测数据库是否存在指定字段
- 转载 SQL Server中索引管理之六大铁律
- 《精通ASP.NET MVC5》第2章 第一个MVC应用程序
- Model First:创建实体数据模型(ADO.NET 实体数据模型)
- disque概要
- MFC 应用、模板、框架、文档、视图 的关系
- ubuntu为IDE(Eclipse WebStorm)添加桌面快捷方式
- [C#] Control.Invoke方法和跨线程访问控件