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

Question

我需要显示 2 个不同宽度和高度的圆圈，但圆圈应该从相同的原点（相同的中心）开始，这意味着即使我更改了两个圆圈的大小，它们在不同大小下看起来应该相同。

我在网上看过一些例子，问题是当我改变两个圆的宽度和高度中心点时，它们不再相同了。

此外，当我悬停时，他们必须通过平滑过渡来增加尺寸。

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

外圈详情：

内圈

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

谢谢，洛汗

Answer 1

我会使用 SVG with circles。它非常简单易读。获取两个不同半径对齐的圆并通过 Javascript 操作它们。只需覆盖 r-属性。

这是一个 Vue 的简单示例：

new Vue({
  el: '#app',
  data: {
    r1: 120,
    r2: 90,
  }
});

/* circles */

.circle--1 {
  fill: yellow;
}

.circle--2 {
  fill: orange;
}

.transparent {
  opacity: 0.4;
}

/* demo stuff */

.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-content: flex-start;
  background: #ccc;
  height: 100vh;
}

.svg, aside {
  background-color: #fff;
  box-shadow: 0 0 4rem #00000033;
  margin: 1rem;
}

aside {
  width: 300px;
  height: 300px;
   display: flex;
  flex-flow: column;
  justify-content: space-evenly;
  align-items: center;
}

label {
  display: block;
  font-weight: 700;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<main id="app" class="container">

  <!-- svg with two circles -->

  <svg class="svg" width="300" height="300">
    <circle class="circle circle--1" cx="50%" cy="50%" r="120" stroke="black" stroke-width="2"/>
    <circle class="circle circle--2" cx="50%" cy="50%" r="90"/>
  </svg>
  
  
  <!-- demo svg with editable radii -->
  
  <svg class="svg" width="300" height="300">
    <circle id="circle-1" class="circle circle--1 transparent" cx="50%" cy="50%" :r="r1" stroke="black" stroke-width="2"/>
    <circle id="circle-2" class="circle circle--2 transparent" cx="50%" cy="50%" :r="r2"/>
  </svg>
  
  
  <!-- demo controls -->
  
  <aside>
    <section>
        <label for="radius1">Radius 1 ({{r1}}px)</label>
        <input type="range" id="radius1" min="0" max="140" v-model="r1">
    </section>
    <section>
      <label for="radius2">Radius 2 ({{r2}}px)</label>
      <input type="range" id="radius2" min="0" max="140" v-model="r2">
     </section>    
  </aside>  
  
</main>

Answer 2

这是一个可以依赖多个背景的简单想法。诀窍是使渐变仅覆盖内容框并使用填充控制 space：

.box {
  width:100px;
  height:100px;
  border-radius:50%;
  border:5px solid;
  padding:20px;
  background:
    linear-gradient(orange,orange) content-box,
    yellow;
}

<div class="box">

</div>

或者这样 radial-gradient

.box {
  width:100px;
  height:100px;
  border-radius:50%;
  border:5px solid;
  padding:20px;
  background:
    radial-gradient(farthest-side,orange 60%,yellow 61%);
}

<div class="box">

</div>

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

Need to draw two circles with same origin( same center point) using CSS styles

css

animation

styles

css-animations