按钮未从中心动画

Question

因此，当我使用jquery为某些填充（而非动画）设置动画时，好像锚点位于中心，它从左上方进行动画处理。 所有代码和JSFiddle链接都在下面。

JSFiddle

HTML：

<div id="gaming-news-info">
    <a id="news-button" style="cursor:pointer;">Go to News section</a>
</div>

CSS：

#gaming-news-info {
    position: absolute;
    z-index: 999;
    width: 400px;
    height: 200px;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    margin-top: -100px;
}

#news-button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    position: absolute;
    margin-top: 130px;
    font-family: "Prompt-SemiBold";
    margin-left: 90px;
}

Answer 1

您不需要jquery / javascript即可获得简单的悬停效果。 CSS3转换和转换完全可以执行相同的功能，而无需脚本库的开销。

 #gaming-news-info { position: absolute; z-index: 999; width: 400px; height: 200px; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); margin-top: -100px; } #news-button { background-color: #4CAF50; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; position: absolute; margin-top: 130px; font-family: "Prompt-SemiBold"; margin-left: 90px; transform: scale(1); transition: all .2s; } #news-button:hover { transform: scale(1.05); transition: all .2s; } 

 <div id="gaming-news-info"> <a id="news-button" style="cursor:pointer;">Go to News section</a> </div>