时间戳

首页 > 解决方案 > 如何更改过渡“outro”？（CSS 变换）

html - 如何更改过渡“outro”？（CSS 变换）

问题描述

所以我想创建一个按钮，它向上移动并在下面创建一个小阴影，如果悬停并且到目前为止效果很好，但问题是，如果我停止悬停，动画就会重置，而它应该有点播放动画倒退。在所有示例中，我都看到它只是在没有任何额外命令的情况下做到这一点。例如：如果悬停，我的按钮会在 0.3 秒内向上移动 5 个像素，如果您停止悬停，它应该会在 0.3 秒内再次向下移动 5 个像素，但它只是立即完成。

我真的很感激任何关于这个问题的帮助，我只是无法理解。

这是我使用的代码：

<head>

.probtn {
  border-color: #282E34;
  color: #282E34;
}

.probtn:hover {
  background-color: #282E34;
  color: white;
  transition: all 0.3s;
  transform-origin: bottom;
  box-shadow: 0px 5px 5px 0px gray;
  transform: translate(0px,-5px);
  -webkit-transform: translate(0px,-5px);
  -moz-transform: translate(0px,-5px);
  -ms-transform: translate(0px,-5px);
  -o-transform: translate(0px,-5px);
}

.btn {
  border: 2px solid #282E34;
  background-color: white;
  color: #282E34;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5Px;
}

</head>

<Body>

<button class="btn probtn" type="button" onClick="kundenon()">Unsere Kunden</button>

</Body>

标签： htmlcsscss-transitionscss-transforms

解决方案

transition: all 0.3s;在您的班级上定义 ，.probtn而不是:hover. 否则，一旦删除悬停状态，过渡属性也会被删除。

.probtn {
  border-color: #282E34;
  color: #282E34;
  transition: all 0.3s; /* moved to base class instead of hover state */
  transform-origin: bottom;
}

.probtn:hover {
  background-color: #282E34;
  color: white;
  box-shadow: 0px 5px 5px 0px gray;
  transform: translate(0px,-5px);
  -webkit-transform: translate(0px,-5px);
  -moz-transform: translate(0px,-5px);
  -ms-transform: translate(0px,-5px);
  -o-transform: translate(0px,-5px);
}

.btn {
  border: 2px solid #282E34;
  background-color: white;
  color: #282E34;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5Px;
}
<button class="btn probtn" type="button" onClick="kundenon()">Unsere Kunden</button>

推荐阅读