按鈕未從中心動畫

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>