создание и размещение диаграммы Венна с помощью css

Я пытаюсь создать эффект с помощью css - я хочу, чтобы три перекрывающихся круга выглядели как диаграмма Венна. Я хочу применить преобразования CSS-анимации к кругам, чтобы они пульсировали.

В настоящее время я пытаюсь использовать · или · в качестве круга диаграммы Венна. Однако, как вы можете (надеюсь) видеть, положение этого символа не совпадает с левым или правым... и поэтому его позиционирование ужасно сложно. Обратите внимание, как на картинке ниже точки находятся за пределами ограничивающей рамки 100 x 100 пикселей.

введите здесь описание изображения

Я хочу поместить круги венн-диаграммы в их родительский элемент, чтобы было легко разместить элемент венн-диаграммы в другом месте. Есть ли вообще лучший подход к тому, как создать этот образ? Пользовательский шрифт? SVG?

<style>

@-webkit-keyframes dot1
{
    0%   {color: rgba(255, 0, 0, .3);}
    50%  {color: rgba(255, 0, 0, .8);}
    100%  {color: rgba(255, 0, 0, .3);}
}


.dot
{
    font-size: 200px;
    position: absolute;
}

.dot1
{
    -webkit-animation:dot1 2s infinite;
    top: 0;
}  

.dot2
{
    -webkit-animation:dot1 2s infinite;
    left: 20px;
    top: 0;
}  

.dot3
{
    -webkit-animation:dot1 2s infinite;
    top: 10px;
    left: 15px;
}  

.container
{
    border-style: solid;
    border-color: pink;
    border-width: 1px;
    width: 100px;
    height: 100px;
}

</style>
</head>
<body>

  <div class='container'>
  <span class='dot dot1'>&#183;</span>
  <span class='dot dot2'>&#183;</span>
  <span class='dot dot3'>&#183;</span>
  </div>

</body>

http://jsbin.com/ozeham/1/edit


css venn-diagram
person jedierikb    schedule 17.04.2013    source источник
comment
Разные браузеры могут отображать текст по-разному. Использование изображения, вероятно, является наиболее точным методом с точностью до пикселя. Однако попробуйте поиграть со свойством line-height объекта .dot. jsbin.com/oparic/1/edit   -  person showdev    schedule 17.04.2013

Ответы (4)


arrow_upward
3
arrow_downward

вместо использования символа точки вы можете просто создать круг, используя ccs3 (border-radius). этими кругами намного проще управлять: http://jsbin.com/ozeham/3/

person oezi    schedule 17.04.2013

arrow_upward
0
arrow_downward

SVG будет работать нормально, но если вы хотите придерживаться CSS, попробуйте использовать меньший контейнер только для диаграммы Венна, а затем расположите контейнер, чтобы переместить всю диаграмму вместе.

E.g.

<div class="venn">
    <div class="dot dot1"></div>
    <div class="dot dot2"></div>
    <div class="dot dot3"></div>
</div>

Затем используйте position: absolute для точек (и свойства top и left для настройки положения). Для контейнера используйте position: absolute или position: relative, чтобы поместить его внутри блока:

.venn {
    position: relative;
    top: 50%;
    left: 50%;
}
.dot {
    position: absolute;
}

http://jsbin.com/ozeham/6/edit

person Albert Xing    schedule 17.04.2013

arrow_upward
0
arrow_downward

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

http://jsbin.com/ozeham/10/edit

person JMWhittaker    schedule 17.04.2013

arrow_upward
0
arrow_downward

Зачем использовать символы в виде кругов, когда вы можете использовать такой синтаксис:

.circle {
    width:whatever;
    height:whatever;
    border-radius:50%;
    opacity:33%;
}

#foo {
    background-color:#FF0000;
}


#bar {
    background-color:#00FF00;
}


#qux {
    background-color:#0000FF;
}

.container {
    position:relative;
    right:whatever;
    top:whatever;
}

Вместе с HTML:

<div class="container">
    <div class="circle" id="foo"></div>
    <div class="circle" id="bar"></div>
    <div class="circle" id="qux"></div>
</div>
person Jules    schedule 17.04.2013