呼吸灯
效果:
html
<div class="wrap">
<div class="out">
<div class="in"></div>
</div>
</div>
css
<style>
/* 定义动画 */
@keyframes light{
from{
transform: scale(0.3);
}to{
transform: scale(1);
}
}
.wrap{
width: 400px;
height: 400px;
background-color: black;
margin: 50px auto;
/* 使用flex布局 让子元素居中 */
display: flex;
justify-content: center;
align-items: center;
}
.out{
width: 250px;
height: 250px;
background-color: rgb(42, 71, 165);
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
/* 使用动画 */
animation: light 5s linear infinite alternate;
}
.in{
width: 150px;
height: 150px;
background-color: greenyellow;
border-radius: 50%;
}
</style>