用css创建和定位维恩图

我想用css创建效果 - 我想要三个看起来像维恩图的重叠圆圈。我想在圆上应用css-animation变换，使它们看起来像跳动一样。用css创建和定位维恩图

我正在尝试使用·或·作为维恩图圆。然而，正如你可以（希望）看到的那样，这个角色的位置并不是向左或向右平移......因此定位它非常困难。请注意，在下面的图片中，点在100px x 100px的边界框之外。

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

不同的浏览器可以呈现不同的方式文本。使用图像可能是最精确的像素方法。但是，尝试使用'.dot'的'line-height'属性。 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

您可以接近的方法数量。我不完全清楚你试图通过这个来实现什么。我会使用border-radius创建圆圈。

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

用css创建和定位维恩图

回答

相关问题