Question

过去几天我一直在努力解决这个问题，所以非常感谢帮助。我的标题下面有一行（hr元素）。我试图让一个以小鼠为中心的div增长和缩小。但是，当应用css3动画时，它会使div向下和向右移动，就好像div的左上角（我认为是（0,0））被设置为中间是。

我创建了一个jsfiddle来说明我的意思。

这是我的HTML：

<div id="header">
    <h1>Center</h1>

    <div id="action-bar">
        <hr class="center-line" />
        <div class="circle animation"></div>
    </div>
</div>

和我的css：

div#header {
    color: #000;
    width: 90%;
    text-align: center;
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
}

div#header h1 {
    font-size: 50px;
    font-weight: 300;
    margin-top: 0px;
    margin-bottom: 0px;
}

/* the line beneath h1 */
 div #action-bar {
    margin: 25px 0;
    position: relative;
}

div.circle {
    width: 1em;
    height: 1em;
    background: #000;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
}

div.circle:hover {
    width: 2em;
    height: 2em;
    background: #000;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
}

hr.center-line {
    border: 0;
    height: .25em;
    background: #000;
}

/* animation */
 @keyframes pulse {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(90deg);
    }
    100% {
        transform: rotate(180deg);
    }
}

@-webkit-keyframes pulse {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(90deg);
    }
    100% {
        transform: rotate(180deg);
    }
}

.animation {
    animation: pulse 2s ease-in-out 0s infinite normal none;
    -webkit-animation: pulse 2s ease-in-out 0s infinite normal none;
    -webkit-backface-visibility: hidden;
}

任何人都可以指出正确的方向吗？如果可能的话，我正在寻找纯粹的CSS解决方案。谢谢！

Answer 1

为您的circle元素添加负边距，其中一半是width和height：

div.circle {
    width: 1em;
    height: 1em;
    background: #000;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    margin-left: -0.5em;
    margin-top: -0.5em;
}

div.circle:hover {
    width: 2em;
    height: 2em;
    margin-left: -1em;
    margin-top: -1em;
}

jsFiddle Demo

Answer 2

这是一个平滑的脉冲选项。 http://jsfiddle.net/aLjsut5r/4/

/* animation */
@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(.8);
    }
    100% {
        transform: scale(1);
    }
}
@-webkit-keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(.8);
    }
    100% {
        transform: scale(1);
    }
}
.animation {
    animation: pulse 2s ease-in-out 0s infinite normal none;
    -webkit-animation: pulse 2s ease-in-out 0s infinite normal none;
    -webkit-backface-visibility: hidden;
}
.pulsing {
    border: 3px solid #999;
    -webkit-border-radius: 30px;
    height: 18px;
    width: 18px;
    position: absolute;
    left:20px;
    top:214px;
    -webkit-animation: pulsate 1s ease-out;
    -webkit-animation-iteration-count: infinite; 
    opacity: 0.0;
}
@-webkit-keyframes pulsate {
    0% {-webkit-transform: scale(0.5, 0.5); opacity: 0.5;}
    50% {opacity: 1.0;}
    100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.5;}
}

中心动画始终偏离中心

2 个答案: