css动画实现呼吸圆
lcyangcss 2019-09-07
<!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>
相关推荐
today0 0喜欢 / 0评论 2020-09-22
89520292 0喜欢 / 0评论 2020-09-18
周公周金桥 0喜欢 / 0评论 2020-09-06
bigname 0喜欢 / 0评论 2020-08-25
灵均兰草 0喜欢 / 0评论 2020-08-20
hannuotayouxi 0喜欢 / 0评论 2020-08-20
ChinaWin 0喜欢 / 0评论 2020-08-13
大象从不倒下 0喜欢 / 0评论 2020-07-31
好好学习天天 0喜欢 / 0评论 2020-07-28
powrexly 0喜欢 / 0评论 2020-07-20
AlisaClass 0喜欢 / 0评论 2020-07-19
88530091 0喜欢 / 0评论 2020-07-14
WebVincent 0喜欢 / 0评论 2020-07-09
骆驼的自白 0喜欢 / 0评论 2020-06-26
lanzhusiyu 0喜欢 / 0评论 2020-06-21
Phoebe的学习天地 0喜欢 / 0评论 2020-06-21
诗蕊 0喜欢 / 0评论 2020-06-14
jiedinghui 0喜欢 / 0评论 2020-05-30
kangtingting0 0喜欢 / 0评论 2020-05-20
yyy0 0喜欢 / 0评论 2020-05-12
sixthelement 0喜欢 / 0评论 2020-04-30
mazegong 0喜欢 / 0评论 2020-04-24
MaureenChen 0喜欢 / 0评论 2020-04-21
hnyzyty 0喜欢 / 0评论 2020-04-15
xingguanghai 0喜欢 / 0评论 2020-03-13
Phoebe的学习天地 0喜欢 / 0评论 2020-02-22
MichelinMessi 0喜欢 / 0评论 2020-02-19
tianzyc 0喜欢 / 0评论 2020-02-22
teresalxm 0喜欢 / 0评论 2020-02-18
wangjie 0喜欢 / 0评论 2020-02-02
nicepainkiller 0喜欢 / 0评论 2020-01-25
killgod 0喜欢 / 0评论 2020-01-21
木四小哥 0喜欢 / 0评论 2013-05-14
81751330 0喜欢 / 0评论 2013-05-13
SoShellon 0喜欢 / 0评论 2013-06-01
Simagle 0喜欢 / 0评论 2013-05-31
羽化大刀Chrome 0喜欢 / 0评论 2013-05-31
cherry0 0喜欢 / 0评论 2020-01-18
nicepainkiller 0喜欢 / 0评论 2020-01-18
福叔 0喜欢 / 0评论 2020-01-10
waterv 0喜欢 / 0评论 2020-01-08
lcyangcss 0喜欢 / 0评论 2020-01-03
浪风一骑 0喜欢 / 0评论 2013-08-04
LutosX 0喜欢 / 0评论 2013-07-29
vanturman 0喜欢 / 0评论 2013-06-27
wutongyuq 0喜欢 / 0评论 2013-04-12
luoqu 0喜欢 / 0评论 2013-04-10