html+css实现呼吸灯效果 实现呼吸灯效果如下图所⽰:
具体代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
box-sizing: border-box;
}
article{
width: 230px;
height: 330px;
background-color: pink;
margin: 0 auto;
}
.cicle{
height:230px ;
padding:35px;
animation-name: move;
animation-duration: 4.5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.text{
color: white;
text-align: center;
}
#outer{
height: 100%;
border: 5px solid yellow;
border-radius: 50%;
padding: 10px;
animation-name: move2;
animation-duration: 4.5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
#inner{
height: 100%;
border:15px solid white;
border-radius: 50%;
}
@keyframes move{
20%{
padding: 25px;
}
40%{
padding: 35px;
}
100%
{
padding: 35px;
}
}
@keyframes move2{
20%{
padding: 20px;
}
40%{
padding: 10px;
}
65%{
padding: 22px;
}
100%{
padding: 10px;
}
}
</style>
</head>
<body>
<article>
<div class="cicle">
<div id="outer">
<div id="inner"></div>
</div>
</div>
borderbox<div class="text">
HI!
</div>
</article>
</body>
</html>

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