css - 需要使用 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与 circles 。它非常简单易读。 获取两个以不同半径对齐的圆并通过 Javascript 操作它们。只需覆盖 r -属性(property)。

这是一个 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>