1

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

我目前正在尝试使用·或·作为维恩图圈。但是，正如您（希望）看到的那样，这个角色的位置不是左对齐或右对齐......因此定位它非常困难。请注意下图中的点如何位于 100 像素 x 100 像素的边界框之外。

在此处输入图像描述

我想将 venn-diagram 的圆圈定位到它们的父元素中，以便将 venn-diagram 元素定位到其他地方。有没有更好的方法来创建这种外观？自定义字体？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

4

4 回答 4

3

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

于 2013-04-17T18:00:54.320 回答
0

SVG 可以正常工作 - 但如果您想坚持使用 CSS，请尝试只为维恩图使用较小的容器，然后定位容器以将整个图一起移动。

例如

<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-17T17:55:55.887 回答
0

您可以解决此问题的方法数量。我不完全清楚你想通过这个实现什么。我会使用边界半径来创建圆圈。

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

于 2013-04-17T18:08:37.073 回答
0

当您可以使用如下语法时，为什么还要麻烦将字符用作圆圈：

.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-17T18:09:14.963 回答