我如何更改过渡“外向”？ （CSS转换）[重复]

问题描述 投票：0回答：1
因此，我想创建一个按钮，该按钮将向上移动，如果悬停了，并且在下面起作用，则在下面创建一个小阴影，但是问题是，如果我停止悬停，则动画会重置，虽然它应该有点向后播放动画。在所有示例中，我都看到它只是这样做而无需任何额外的命令。例如：如果将我的按钮悬停，则它会在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>

html css css-transitions css-transforms
1个回答
0
投票
在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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.