0

我正在尝试为圆形的边框宽度设置动画，以使其具有脉动效果。所以假设我们这样定义这个圆圈：

.bubble {
    width: 100px;
    height: 100px;
    border-radius: 50%; 
    background: #facf35;
    border: solid 14px #fff0cf;
    -moz-animation: interaction_bubble 2s infinite;
    -webkit-animation: interaction_bubble 2s infinite;
    -o-animation: interaction_bubble 2s infinite;
}

然后我定义了动画，它改变了边框的“厚度”（例如对于 Firefox）

@-moz-keyframes interaction_bubble { 
    0%{border: solid 14px #dfe4c7;}
    50%{border: solid 24px #dfe4c7;}
    100%{border: solid 14px #dfe4c7;}
}

这里的问题是，由于大小的变化，整个对象本身会向下和向右移动。我怎样才能防止它这样做？我希望对象保持在同一个地方，只是调整边框的大小。你能帮我解决这个问题吗？

这是一个显示问题的 jsFiddle：http: //jsfiddle.net/Oinobareion/rRTgk/

提前致谢！

4

2 回答 2

3

不要更改边框大小，只需尝试应用scale转换，例如

@-moz-keyframes interaction_bubble { 
    0%{ -moz-transform: scale(1); }
    50%{ -moz-transform: scale(1.4); }
    100%{ -moz-transform: scale(1); }
}

jsbin 示例（仅适用于 firefox）：http: //jsbin.com/ejejet/3/edit

如果您想保留原始动画，请尝试添加

-moz-box-sizing: border-box;

到元素的样式：这可以在不影响元素本身的大小和位置的情况下更改边框宽度。

示例 jsbin（仅适用于 firefox）：http: //jsbin.com/ejejet/4/edit

作为旁注，您的动画可以像这样简化：

@-moz-keyframes interaction_bubble { 
    0% {border-width: 14px }
    50% {border-width: 24px }
    100% {border-width: 14px }
}

因为您只更改border-width属性

于 2013-04-30T14:08:38.587 回答
0

我现在用 3 个单独的元素做到了，就像这样。它有点复杂，但至少它可以工作:-) 2 个具有相同位置的元素位于第一个圆圈的后面并被调整大小。

http://jsfiddle.net/Oinobareion/rRTgk/6/

<div class="bubble position_bubble"></div>
<div class="bubble_animated position_bubble_animated"></div>
<div class="bubble_animated2 position_bubble_animated2"></div>
于 2013-04-30T14:59:14.623 回答