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%{

padding: 40px;

}

50%{

padding: 30px;

}

75%{

padding: 42px;

}

100%{

padding: 30px;

}

}