<div class="breath" title="呼吸灯"></div>
.breath {
width: 300px;
height: 300px;
border-radius: 50%;
opacity: 0.1;
overflow: hidden;
background: #ff3;
margin: 25% auto;
animation-name: breath;
animation-duration: 3s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
@keyframes breath {
from {
opacity: 0.1;
}
50% {
opacity: 0.5;
}
to {
opacity: 0.1;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.