css圆点图⽚呼吸动画效果,css动画实现呼吸圆圆动画
.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%{borderbox
padding: 40px;
}
50%{
padding: 30px;
}
75%{
padding: 42px;
}
100%{
padding: 30px;
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。