Question

因此，当我使用jquery动画一些填充而不是动画时，好像锚点来自中心，它从左上角开始动画。所有代码和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转换和转换完全能够做同样的事情，而不需要脚本库的开销......

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

按钮没有从中心动画

1 个答案: