首页 > 代码库 > 今天学习css一些动画效果
今天学习css一些动画效果
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>银河系</title>
<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/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一些动画效果