создание и позиционирование диаграммы venn с css

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

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

enter image description here

Я хочу позиционировать круги на Венна-диаграммы в в их родительский элемент так легко расположить элемент Венн-диаграмма в другом месте. Есть ли лучший подход к созданию этого вида? Пользовательский шрифт? 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

источник

2013-04-17 jedierikb

Различные браузеры могут отображать текст по-разному , Использование изображения, вероятно, является наиболее точным для пикселя способом. Однако попробуйте сыграть с свойством 'line-height'' .dot'. http://jsbin.com/oparic/1/edit – showdev

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

источник

2013-04-17 18:00:54 oezi

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

источник

2013-04-17 17:55:55

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

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

источник

2013-04-17 18:08:37 JMWhittaker

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

.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>

источник

2013-04-17 18:09:14 Jules

создание и позиционирование диаграммы venn с css

ответ

Смежные вопросы