本文介绍了一种使用CSS动画来实现动态变化的圆圈效果的方法。通过调整内外圆圈的padding属性，使得圆圈在特定的时间点呈现出不同的大小变化。这种效果可以应用于网页加载提示或其他视觉元素中。
.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;
}
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
