太阳系案例
来源:互联网 发布:安庆网络电视台 编辑:程序博客网 时间:2024/06/02 22:18
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body{
background-color: #000;
}
.sun{
width: 100px;
height: 100px;
background-color: orange;
position: absolute;
left:50%;
top:50%;
margin-left:-50px;
margin-top:-50px;
border-radius: 50%;
box-shadow: 0 0 30px 2px yellow;
}
.earth{
width: 300px;
height: 300px;
position: absolute;
left:50%;
top:50%;
margin-left:-150px;
margin-top:-150px;
border-radius: 50%;
border: 1px solid #ccc;
/*animation: rot 5s linear infinite;*/
}
.earth::after{
width: 30px;
height: 30px;
position: absolute;
left:0%;
top:50%;
margin-left:-15px;
margin-top:-15px;
border-radius: 50%;
background-color: dodgerblue;
content:"";
}
.moon{
width: 10px;
height: 10px;
background-color: #fff;
border-radius: 50%;
position: absolute;
left:-25px;
top:50%;
margin-left: -5px;
margin-top:-5px;
transform-origin: 30px 5px;
animation: rot 3s linear infinite;
}
.mars{
width: 400px;
height: 400px;
position: absolute;
left:50%;
top:50%;
margin-left:-200px;
margin-top:-200px;
border-radius: 50%;
border: 1px solid #ccc;
animation: rot 8s linear infinite;
}
.mars::after{
width: 20px;
height: 20px;
position: absolute;
left:0%;
top:50%;
margin-left:-10px;
margin-top:-10px;
border-radius: 50%;
background-color: gold;
content:"";
}
.venus{
width: 500px;
height: 500px;
position: absolute;
left:50%;
top:50%;
margin-left:-250px;
margin-top:-250px;
border-radius: 50%;
border: 1px solid #ccc;
animation: rot 10s linear infinite;
}
.venus::after{
width: 40px;
height: 40px;
position: absolute;
left:0%;
top:50%;
margin-left:-20px;
margin-top:-20px;
border-radius: 50%;
background-color: red;
content:"";
}
@keyframes rot {
0%{
}
100%{
transform:rotate(360deg);
}
}
</style>
</head>
<body>
<div class="sun"></div>
<div class="earth">
<div class="moon"></div>
</div>
<div class="mars"></div>
<div class="venus"></div>
</body>
</html>
- 太阳系案例
- 太阳系小案例--H5C3
- 太阳系
- 太阳系
- 太阳系
- 太阳系-01
- 太阳系-00
- 太阳系语录
- 模拟太阳系
- 太阳系的罗塞塔石碑
- 计算机绘图OPENgl---太阳系
- 太阳系星球大小对比
- css3太阳系旋转
- 太阳系漫游 Final
- css3--我们太阳系
- HTML5_画布_太阳系
- Canvas之太阳系
- html5-canvas-太阳系1
- Linux中的crontab定时任务详解
- Java 变量
- 详细领悟ThreadLocal变量
- 浅谈进程和线程间的通信方式
- Unity自带寻路Navmesh入门教程(二)
- 太阳系案例
- 关于Oracle导出用户下所有表的问题
- 20170309技术积累
- css中子元素相对于父元素定位
- LeetCode算法题目:Remove Duplicates from Sorted Array II
- HTML框架
- java中对象、成员变量、静态变量、方法的内存分配
- ZooKeeper使用场景总结
- linux,windows文件互传快捷方法