1

I am trying to create an effect with css -- I want three overlapping circles looking like a venn-diagram. I want to apply css-animation transforms on the circles so they appear to pulsate.

I am currently trying to use · or · as a venn diagram circle. However, as you can (hopefully) see, the position of this character is not flush left or right... and therefore positioning of it is terribly difficult. Note how in the picture below the dots are outside of a bounding box of 100px x 100px.

enter image description here

I want to position the venn-diagram's circles into their parent element so it is easy to position the venn-diagram element elsewhere. Is there an altogether better approach to how to create this look? Custom font? 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

これにアプローチできる方法の数。これによって何を達成しようとしているのか、私には完全にはわかりません。円を作成するには、border-radius を使用します。

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 に答える