Question

我在页面上有2个功能，将它们放在鼠标上时都使用Transform easy。当鼠标悬停在左侧时，该图像（字符）会放到适当位置。页面中间的按钮应该放大，但是可以放大。

我尝试过复制适用部分的代码，并分别在按钮上使用该代码，但是我仍然无法实现“轻松”过渡

这是网站功能的CSS，可按我希望的方式运行：

#side {
    position: fixed;
    bottom: -10px;
    left: -6px;
}

.magna {
    height: 400px;
    width: auto;
}

.moving {
    position: relative;
    transition: transform 0.3s ease;
    transform: translateY(10px);
}

.moving:hover {
    transform: translateX(5px);
}

这是按钮的CSS，不能轻易使用：

#social {
    margin: 0px auto;
    text-align: center;
    margin-top: calc(97vh - 500px);
}

.social-icon {
    width: 80px;
    height: 80px;
    margin: 0px auto;
    transition;
    transform 0.3s ease;
}

.social-icon:hover {
    transform: translateY(-8px);
    transform: scale(1.12);
}

.middle {
    padding: 0px 50px 0px 50px;
}

可以在以下位置实时找到该项目：http://51.38.83.57/

我正在寻找中间比例尺上的按钮，这些按钮会增加，但要简化为新尺寸，而不是调整为新尺寸

Answer 1

将transform: 0.3s ease替换为transition: 0.3s ease;

#social {
  margin: 0px auto;
  text-align: center;
}

.social-icon {
  width: 80px;
  height: 80px;
  margin: 0px auto;
  transition: 0.3s ease; /* Here's the error */
}

.social-icon:hover {
  transform: translateY(-8px);
  transform: scale(1.12);
}

.middle {
  padding: 0px 50px 0px 50px;
}

<div id="social">
  <a href=""><img class="social-icon" src="https://via.placeholder.com/80"></a>
  <a href=""><img class="social-icon middle" src="https://via.placeholder.com/80"></a>
  <a href=""><img class=" social-icon" src="https://via.placeholder.com/80"></a>
</div>

Answer 2

先前的代码为：

.social-icon:hover { transform: translateY(-8px); transform: scale(1.12); }

更改为：

.social-icon:hover { transform: translateY(-8px) scale(1.12); }

cyrixmorten的建议是正确的

过渡转换，轻松自如；有些元素“放松”，其他则没有

2 个答案: