用css创建和定位维恩图_Css_Venn Diagram

用css创建和定位维恩图

css

用css创建和定位维恩图,css,venn-diagram,Css,Venn Diagram,我试图用css创建一个效果——我想要三个看起来像维恩图的重叠圆。我想在圆上应用css动画变换，使它们看起来像是脉动我目前正在尝试使用·或·作为维恩图圆圈。然而，正如你（希望）看到的，这个角色的位置不是左齐平或右齐平。。。因此，它的定位非常困难。注意下图中的点是如何位于100px x 100px的边界框之外的我想将维恩图的圆定位到它们的父元素中，这样就可以很容易地将维恩图元素定位到其他位置。有没有更好的方法来创建这种外观？自定义字体？SVG <style> @-webk

我试图用css创建一个效果——我想要三个看起来像维恩图的重叠圆。我想在圆上应用css动画变换，使它们看起来像是脉动

我目前正在尝试使用

·或·作为维恩图圆圈。然而，正如你（希望）看到的，这个角色的位置不是左齐平或右齐平。。。因此，它的定位非常困难。注意下图中的点是如何位于100px x 100px的边界框之外的

我想将维恩图的圆定位到它们的父元素中，这样就可以很容易地将维恩图元素定位到其他位置。有没有更好的方法来创建这种外观？自定义字体？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>


@-webkit关键帧dot1
{
0%{color:rgba（255,0,0,3）；}
50%{颜色：rgba（255,0,0,8）；}
100%{color:rgba（255,0,0,3）；}
}
多特先生
{
字体大小：200px；
位置：绝对位置；
}
.dot1
{
-webkit动画：dot1 2s无限；
排名：0；
}  
.dot2
{
-webkit动画：dot1 2s无限；
左：20px；
排名：0；
}  
.dot3
{
-webkit动画：dot1 2s无限；
顶部：10px；
左：15px；
}  
.集装箱
{
边框样式：实心；
边框颜色：粉红色；
边框宽度：1px；
宽度：100px；
高度：100px；
}
·
·
·

SVG可以很好地工作，但是如果您想坚持使用CSS，请尝试仅对venn图使用较小的容器，然后定位容器以将整个图移动到一起
例如
不用点字符，只需使用ccs3（边框半径
）创建一个圆即可。这些圆圈更容易控制：
有很多方法可以实现这一点。我不完全清楚你想通过这个达到什么目的。我会使用边界半径来创建圆
既然可以使用这样的语法，为什么还要麻烦使用字符作为圆圈呢：
.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>

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

<div class="container">
    <div class="circle" id="foo"></div>
    <div class="circle" id="bar"></div>
    <div class="circle" id="qux"></div>
</div>