所以我正在尝试使用以下标记制作此按钮:
CSS:
.button {
text-shadow: 0px 7px 0px #3b6e62;
color: #f2b191;
top:0px;
-webkit-transition: all 1.4s ease-in-out; -moz-transition: all 1.4s ease-in-out; -ms-transition: all 1.4s ease-in-out; -o-transition: all 1.4s ease-in-out; transition: all 1.4s ease-in-out;
}
html:
<a href="#"><div class="button">Text</div></a>
现在当用户要按下这个按钮时,我想通过动画文本阴影 -7px 和顶部 +7px 使它看起来像被按下。
应该发生几件事:
首先,我希望按钮在用户仅悬停时进行动画处理。它应该在 4px 和 3px 文本阴影 / 4px 顶部和原始标记之间进行动画处理。
比,当按下按钮时,它应该一直向下,文本阴影-7px,顶部+7px。(然后再返回,因为它是同一页面上的链接)。
我希望这仍然有意义。
我已经在这里尝试了许多 JQuery 示例,但我似乎无法让它工作。目前我正在试验这段代码:
var timer;
$(".button").hover(function() {
timer = setInterval(function() {
$(".button").css('top', '4px');
$(".button").css('text-shadow', '0px 3px 0px #3b6e62');
}, 600);
timer = setInterval(function() {
$(".button").css('top', '0px');
$(".button").css('text-shadow', '0px 7px 0px #3b6e62');
}, 600);
// Change the interval as you see fit.
}, function() {
clearInterval(timer);
});
我也无法让它按照我的意图工作。它只是在悬停时只保持动画一次。