今天不想分析源码，写了一个好玩的动画
2017-08-12 本文已影响57人
VisuperviReborn
星系轨道
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body{
background-color: #000;
overflow: hidden;
}
.center{
position: absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
.sun{
width: 80px;
height: 80px;
background-color: yellow;
border-radius: 50%;
}
.earth{
width: 250px;
height: 250px;
border: 1px solid #ccc;
border-radius: 50%;
animation:rot 4s linear infinite;
}
.earth::before{
content:"";
width: 40px;
height: 40px;
background-color: deepskyblue;
position: absolute;
left:0;
top:50%;
transform:translate(-50%,-50%);
border-radius: 50%;
}
.moon{
width:60px;
height: 60px;
border-radius: 50%;
position: absolute;
transform:translate(-50%,-50%);
left:0;
top:50%;
animation:rot 2s linear infinite;
}
.moon::before{
content:"";
width: 10px;
height: 10px;
background-color: #fff;
position: absolute;
left:0;
top:50%;
transform:translate(-50%,-50%);
border-radius: 50%;
}
.mars{
width: 400px;
height: 400px;
border: 1px solid #ccc;
border-radius: 50%;
animation:rot 6s linear infinite;
}
.mars::before{
content:"";
width: 50px;
height: 50px;
background-color: coral;
position: absolute;
left:0;
top:50%;
transform:translate(-50%,-50%);
border-radius: 50%;
}
.venus{
width: 550px;
height: 550px;
border: 1px solid #ccc;
border-radius: 50%;
/*调用动画*/
animation:rot 8s linear infinite;
}
.venus::before{
content:"";
width: 60px;
height: 60px;
background-color: #daa520;
position: absolute;
left:0;
top:50%;
transform:translate(-50%,-50%);
border-radius: 50%;
}
@keyframes rot {
0%{
transform:translate(-50%,-50%) rotate(0deg);
}
100%{
transform:translate(-50%,-50%) rotate(360deg);
}
}
</style>
</head>
<body>
<!-- 太阳-->
<div class="sun center"></div>
<!-- 地球-->
<div class="earth center">
<!-- 月球-->
<div class="moon "></div>
</div>
<!-- 火星-->
<div class="mars center"></div>
<!--金星-->
<div class="venus center"></div>
</body>
</html>
感兴趣的可以去体验一下，这里面主要用到的是CSS3里面的动画，还有一个知识点，就是如何让一个元素居中，还有伪元素。这算是初步了解C3的知识了吧。
这里面可以引出好多知识：比如居中显示问题，如何让一个不给高度的元素居中（display:flex;justify-content:center;align-items:center;）还有动画问题，到底用C3实现动画还是js来实现等等吧········
