如何保持边界半径时动画元素的大小?

Question

我想要carousel指示器动画就像列表项弹出到零半径。
然而，在我的尝试中，列表项以正方形而不是圆形的形式动画。有可能变成圆形吗?

$('li').click(function(sender) {
$('.active').removeClass('active');
$(this).addClass('active');
})

.carousel-indicators li {
width: 12px;
border-radius: 12px;
border-color: #2E8B57 !important;
height: 24px;
border-width: 1pt;
margin: 1px 3px 1px 3px;
padding: 1px;
transition: opacity 0.6s ease, background-size 1s ease;
background-image: linear-gradient(#2E8B57, #2E8B57);
background-position: center;
background-size: 0% 0%;
background-repeat: no-repeat;
}
.carousel-indicators li.active {
//background-color: #2E8B57;
border-radius: 12px;
background-image: linear-gradient(#2E8B57, #2E8B57);
background-size: 100% 100%;
background-clip: content-box, padding-box;
padding: 1px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="icon" type="image/x-icon" href="../../assets/images/favicon.ico">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>

Answer 1

我已经成功地从这里使用径向梯度克服了这个问题

$('li').click(function(sender) {
$('.active').removeClass('active');
$(this).addClass('active');
})

.carousel-indicators li {
width: 12px;
border-radius: 12px;
border-color: #2E8B57 !important;
height: 24px;
border-width: 1pt;
margin: 1px 3px 1px 3px;
padding: 1px;
transition: opacity 0.6s ease, background-size 1s ease;
background-image: radial-gradient(circle, #2E8B57 50%, transparent 51%);
background-position: center;
background-size: 0% 0%;
background-repeat: no-repeat;
}
.carousel-indicators li.active {
//background-color: #2E8B57;
border-radius: 12px;
background-image: radial-gradient(circle, #2E8B57 50%, transparent 91%);
background-size: 100% 100%;
background-clip: content-box, padding-box;
padding: 1px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="icon" type="image/x-icon" href="../../assets/images/favicon.ico">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>