Необходимо нарисовать два круга с одним и тем же началом (одной и той же центральной точкой), используя стили CSS - PullRequest
Новая
       33

Необходимо нарисовать два круга с одним и тем же началом (одной и той же центральной точкой), используя стили CSS

0 голосов
/ 04 марта 2019

У меня есть требование отображать 2 круга разной ширины и высоты, но круги должны начинаться с одного и того же начала (одного и того же центра), это означает, что даже если я изменю размеры обоих кругов, они должны выглядеть одинаково с разными размерами.

enter image description here

Я видел несколько примеров по интернету, проблема с ними в том, что когда я изменяю центральную точку ширины и высоты обеих кругов, они не совпадаютбольше.

Также, когда я делаю парение, они должны увеличивать размер с плавным переходом.

Я предполагаю, что мне нужно два круга, чтобы нарисовать что-то вроде этого, если мы можем рисовать, используя толькоодин кружок, пожалуйста, дайте мне знать.

Детали внешнего круга:

внутренний круг 

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

Спасибо, Рохан

Ответы [ 2 ]

0 голосов
/ 04 марта 2019

Вот простая идея, где вы можете положиться на несколько фонов.Хитрость заключается в том, чтобы сделать градиент таким, чтобы он покрывал только поле содержимого, и управлял пространством с помощью отступов: 

.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>
0 голосов
/ 04 марта 2019

Я бы использовал SVG с кругами .Это довольно легко и хорошо читается.Выровняйте два круга с разным радиусом и управляйте ими с помощью 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>
...