Question

我正在设计一个菜单，但是如果我想将鼠标悬停在当前元素上，但我不想使用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');}

Answer 1

您可以使用自定义timing function进行跳转过渡。

请参阅我所做的a few examples of bouncing transitions on hover for background images（使用渐变创建）。基本上，我们的想法是你使用立方贝塞尔计时函数（ cubic-bezier(x1, y1, x2, y2) - x1 和 x2 必须处于关闭区间 [0, 1] ），其中第二个值（ y1 ）是＆gt; 1和/或第四个值（ y2 ）是＆lt; 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%;
}

如果您需要更多内容，那么您必须使用keyframe animations - 请参阅此quick example我刚刚做过。

<强> 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%; }
}

Answer 2

像阿萨德所说，你可以使用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;
}

我们可以在不应用jquery函数的情况下获得跳转效果吗？

2 个答案: