Question

我正在尝试用css创建一个效果 - 我希望三个重叠的圆圈看起来像一个维恩图。我想在圆圈上应用css-animation变换，使它们显得脉动。

我目前正在尝试使用·或·作为维恩图圈。但是，你可以（希望）看到，这个角色的位置不是向左或向右齐平......因此它的定位非常困难。请注意下图中的点如何在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

Answer 1

而不是使用点字符，您可以使用ccs3（border-radius）创建一个圆圈。这些圈子更容易控制：http://jsbin.com/ozeham/3/

Answer 2

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

Answer 3

您可以采用的方法。我并不完全清楚你想要实现的目标。我会使用border-radius来创建圆圈。

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

Answer 4

为什么要使用字符作为圆圈，当你可以使用这样的语法时：

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

用css创建和定位维恩图

4 个答案: