hover过渡效果 圆圈内收缩
<style>
html {
--size: 1.5rem;
--color: #5fa04e;
}
.box {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100vh;
}
.hovers {
cursor: pointer;
width: var(--size);
height: var(--size);
border-radius: 50%;
box-shadow: 0 0 0 0.125rem var(--color) inset;
transition: box-shadow .25s;
}
.hovers:hover {
box-shadow: 0 0 0 calc(var(--size) / 2) var(--color) inset;
}
</style>
<div class="box">
<div class="hovers"></div>
</div>