css动画实现呼吸圆
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圆动画</title>
<style>
.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;
}
}
</style></head>
<body>
<div class="content">
<div class="box">
<div class="outer">
<div class="inner"></div>
</div>
</div>
</div></body>
</html>
相关推荐
AlisaClass 2020-07-19
today0 2020-09-22
89520292 2020-09-18
周公周金桥 2020-09-06
bigname 2020-08-25
灵均兰草 2020-08-20
hannuotayouxi 2020-08-20
ChinaWin 2020-08-13
大象从不倒下 2020-07-31
好好学习天天 2020-07-28
powrexly 2020-07-20
88530091 2020-07-14
WebVincent 2020-07-09
骆驼的自白 2020-06-26
lanzhusiyu 2020-06-21
Phoebe的学习天地 2020-06-21
诗蕊 2020-06-14
jiedinghui 2020-05-30