.content{
width: 300px;
height: 400px;
background-color: #333;
margin: 0 auto;
}
div{
box-sizing: border-box;
}
.box{
width: 300px;
height: 300px;
padding: 30px;
animation-name: out;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.outer{
/*width: 240px;
height: 240px;*/
height: 100%;/*关键所在,只能设置百分比,不能指定数值,内圆相同*/
border: 2px solid #fff;
border-radius: 50%;
padding: 30px;
animation-name: in;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.inner{
/*width: 180px;
height: 180px;*/
height: 100%;
border:5px solid #fff;
border-radius: 50%;
}
@keyframes out{
25%{
padding: 20px;
}
50%{
padding: 30px;
}
}
@keyframes in{
25%{
padding: 40px;
}
50%{
padding: 30px;
}
75%{
padding: 42px;
}
100%{
padding: 30px;
}
}