javascript - 按钮不从中心动画

Question

因此，当我使用 jquery 为一些填充设置动画而不是动画时，就好像 anchor 是从中心开始的那样，它从左上角开始设置动画。所有代码和 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>