需要使用CSS样式绘制两个原点相同（中心点相同）的圆

我要求显示两个不同宽度和高度的圆圈，但圆圈应从同一原点（同一中心）开始，这意味着即使我更改了两个圆圈的大小，它们的大小也应相同

我在网上看到了一些例子，问题是当我改变两个圆的宽度和高度时，两个圆的中心点就不一样了

而且，当我悬停时，它们必须增加平滑过渡的大小

我猜我需要两个圆来画这样的东西，如果我们能只用一个圆来画，请告诉我

外圈详细信息：

width: 79.49
height: 79.49
shadow: #000000,15%;
blur: 6px;
opacity: 100%;
X - 0px //no idea but is mentioned in requirement
y - 1px //no idea but is mentioned in requirement

内圈

width: 97.33px;
height: 97.33px;
color: #DEBF43;
opacity: 74%;
shadow: #D7E0F1, 100%;
blur: 30px;
x - 0px //no idea but is mentioned in requirement
y 10px //no idea but is mentioned in requirement

外圈详细信息：

width: 79.49
height: 79.49
shadow: #000000,15%;
blur: 6px;
opacity: 100%;
X - 0px //no idea but is mentioned in requirement
y - 1px //no idea but is mentioned in requirement

谢谢， Rohan

我会使用带有的。它非常简单，可读性也很好。 让两个圆以不同的半径对齐，并通过Javascript操纵它们。只需覆盖

r

-属性

下面是Vue的一个快速示例：

newvue({
el:“#应用程序”，
数据：{
r1:120，
r2:90，
}
});
/*圆圈*/
.圆圈--1{
填充物：黄色；
}
.圆圈--2{
填充物：橙色；
}
.透明{
不透明度：0.4；
}
/*演示材料*/
.集装箱{
显示器：flex；
柔性流：行换行；
证明内容：中心；
调整内容：灵活启动；
背景：#ccc；
高度：100vh；
}
.svg，放在一边{
背景色：#fff；
盒影：0 0 4rem#00000033；
保证金：1rem；
}
旁白{
宽度：300px；
高度：300px；
显示器：flex；
柔性流动：柱；
对正内容：空间均匀；
对齐项目：居中；
}
标签{
显示：块；
字号：700；
}

半径1（{r1}}px）
半径2（{r2}}px）
这里有一个简单的想法，您可以依赖多个背景。诀窍是使渐变仅覆盖内容框，并使用填充控制空间：


.box{
宽度：100px；
高度：100px；
边界半径：50%；
边框：5px实心；
填充：20px；
背景：
线性渐变（橙色、橙色）内容框，
黄的
}

可以使用单个元素通过长方体阴影或径向渐变绘制。但是关于动画，有什么内容吗？对于动画，他可以在css上使用转置。对于单个元素，我的意思是：