2

我正在设计一个菜单，但如果我想在鼠标悬停到当前元素时产生弹跳效果，但我不想为此使用 jquery 函数。我们可以用css3编写代码吗？我正在尝试使用代码-

tab-switch li a.current {

background-image://any transition??//

     -webkit-transition:easeoutbounce 1s linear;
     -moz-transition: easeoutbounce 1s linear;
     -o-transition: easeoutbounce 1s linear;
     -ms-transition: easeoutbounce 1s linear;
     transition: easeoutbounce 1s linear;
    background-repeat:no-repeat;
    background-image:url('images/bgs/selectedmenu.png');}
4

2 回答 2

2

您可以通过使用自定义计时功能为您的过渡进行弹跳过渡。

查看我所做的背景图像（使用渐变创建）悬停时弹跳过渡的几个示例。基本上，这个想法是您使用三次贝塞尔计时函数（cubic-bezier(x1, y1, x2, y2)-x1并且x2必须在封闭区间内[0, 1]），其中第二个值 ( y1) > 1 和/或第四个值 ( y2) 是 < 0 （这意味着您的函数增加然后减少，然后在 0% 和 100% 之间再次增加，并且不会像没有反弹时那样严格增加 - 您可以通过将鼠标悬停在 Dabblet CSS 面板中的三次贝塞尔代码上来可视化该函数） .

我在示例中使用的三次贝塞尔函数是cubic-bezier(0, 3.5, 1, -2.5)、cubic-bezier(0, 3.25, 1, -2.25)和cubic-bezier(0, 3, 1, -2)，但您可以使用任何您想要的值。一般来说，第二个值越高，第四个值越低（或绝对值越高），则反弹越明显。

最后一个示例的CSS代码（弹跳渐变角度）：

.p4 {
    background: linear-gradient(left top, orangered 49%, lemonchiffon 51%)
            50% 50%;
    background-size: 100% 130%;
    transition: 2.75s cubic-bezier(0, 3.25, 1, -2.25);
}
.p4:hover {
    background-size: 100% 280%;
}

如果您需要更多，那么您将不得不使用关键帧动画- 请参阅我刚刚做的这个快速示例。

CSS：

.p0 {
    background-image:
    url(http://imgsrc.hubblesite.org/hu/db/images/hs-2012-49-a-small_web.jpg), 
    url(http://imgsrc.hubblesite.org/hu/db/images/hs-2002-24-a-small_web.jpg);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p0:hover {
    animation: ani0 4s forwards;
}
@keyframes ani0 {
    10% { background-size: 50% 75%, 100% 100%; }
    20% { background-size: 50% 50%, 100% 100%; }
    30% { background-position: 50% 50%; background-size: 50% 25%, 100% 100%; }
    30% { background-position: 25% 50%, 50% 50%;
        background-size: 25% 25%, 100% 100%; }
    40% { background-position: 25% 0, 50% 50%; }
    50% { background-position: 50% 0, 50% 50%; }
    60% { background-position: 100% 25%, 50% 50%; }
    70% { background-position: 75% 50%, 50% 50%;
        background-size: 25% 25%, 100% 100%; }
    80% { background-position: 50% 100%, 50% 50%; }
    90% { background-position: 0 50%, 50% 50%; }
    100% { background-size: 0 0, 100% 100%; }
}
于 2013-01-07T12:07:06.563 回答
2

就像 asad 说的，你可以使用animate.css。但要回答您的问题，请使用 100% css。

这是一个使用纯 css 的演示（悬停反弹）：http: //jsfiddle.net/yXJ3G/

关键是在反弹效果中添加一个悬停类。这样就不需要 JS/jQuery。

.bounce:hover {
-webkit-animation-name: bounce;
-moz-animation-name: bounce;
-o-animation-name: bounce;
animation-name: bounce;
}
于 2013-08-27T19:49:31.993 回答