Question

我想在http://boy-coy.com/#contact中实现信封的动画。这在jquery mousein / mouseout中是否可行？怎么样？

Answer 1

更好的方法是使用CSS而不是JQuery。查看方法的This链接

使用以下代码了解：

div:hover
{
-webkit-animation: myfirst 5s; /* Chrome, Safari, Opera */
    animation: myfirst 5s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
    from {margin-top:10px;}
    to {margin-top:30px;}
}

/* Standard syntax */
@keyframes myfirst {
    from {margin-top:10px;}
    to {margin-top:30px;}
}

这只是一个样本。您可以根据自己的要求进行修改。

Answer 2

.contact:hover .envelope {
    margin-top: -20px;
    moz-transition-delay: 150ms;
    ms-transition-delay: 150ms;
    o-transition-delay: 150ms;
    transition-delay: 150ms;
}

.contact .envelope .top {
    height: 73px;
    left: 0px;
    moz-transform-origin: top;
    moz-transition: -moz-transform 300ms 150ms, z-index 0ms 150ms, height 300ms 0ms, top 300ms 0ms;
    ms-transform-origin: top;
    ms-transition: -ms-transform 300ms 150ms, z-index 0ms 150ms, height 300ms 0ms, top 300ms 0ms;
    o-transform-origin: top;
    o-transition: -o-transform 300ms 150ms, z-index 0ms 150ms, height 300ms 0ms, top 300ms 0ms;
    overflow: hidden;
    position: absolute;
    top: -3px;
    transform-origin: top;
    transition: transform 300ms 150ms, z-index 0ms 150ms, height 300ms 0ms, top 300ms 0ms;
    webkit-transform-origin: top;
    webkit-transition: -webkit-transform 300ms 150ms, z-index 0ms 150ms, height 300ms 0ms, top 300ms 0ms;
    width: 100%;
    z-index: 30;
}

Jquery mousein / mouseout动画从下到上

2 个答案: