Question

我正在尝试在此网站上编写类似于顶级动画徽标的菜单：XOXCO

它看起来像一个简单的CSS技巧，但我遇到了一些问题。在查看源代码和CSS文件后，我有几个问题，我希望有人可以回答。

是什么让图像在仍然悬停时返回到原始位置（给予它们快速反弹效果）？为什么不是在徘徊时一遍又一遍地重复过渡？这里有没有CSS在工作，我只是没有看到它？

Answer 1

这是在main.js：

中完成的

var delay = 500;
$('ul#animated_logo li').each(function() {
    (function(el) {
        setTimeout(function() { $(el).css('top','20px'); },delay);
    })(this);                           
    delay = delay + 100;
});

Answer 2

它只是纯粹的css3 动画迭代计数（使用css3进行性能和最佳练习），您可以在developer.mozilla阅读它这里我有animation-iteration-count = 1

#e:hover { 
    animation: pulse 100ms ease-in-out 0s 1 alternate; 
} /* Works fine, pulses on hover */

DEMO

将其更改为5然后你有了这个

#e:hover { 
    animation: pulse 100ms ease-in-out 0s 5 alternate; 
 } /* Works fine, pulses on hover */

DEMO2

完整代码

HTML

<menu>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</menu>

CSS

menu li { 
    width: 100px;
    height: 100px;
    margin:10px;
    background-color: #000;
    float:left;
}
menu li:hover { 
    -webkit-animation: pulse 100ms ease-in-out 0s 5 alternate; 
    -moz-animation: pulse 100ms ease-in-out 0s 5 alternate; 
    animation: pulse 100ms ease-in-out 0s 5 alternate; 
} 



@-webkit-keyframes pulse {
        0%   { 
        -webkit-transform:translateY(-10px); 
        -moz-transform:translateY(-10px);
        transform:translateY(-10px);
    }
        100% { 
        -webkit-transform:translateY(0px);
        -moz-transform:translateY(0px);
        transform:translateY(0px);
    }
}

Answer 3

如果您检查页面元素，请选择网络，确保已启用记录网络日志，然后刷新您应该能够过滤的页面对于脚本并找到他们用来为其标题图像设置动画的javascript / jquery ..标题为 main.js ，代码如下：

$(function() {
    // enable Aware.js, and add new flags to any sort of post-like content  
    $('.tile').aware();
    var delay = 500;
    $('ul#animated_logo li').each(function() {
        (function(el) {
            setTimeout(function() { $(el).css('top','20px'); },delay);
        })(this);                           
        delay = delay + 100;
    });
    setTimeout(function() { 
        $('ul#animated_logo li').css('-webkit-transition-duration','0.1s');
        $('ul#animated_logo').on('mouseenter','li',function() {
        $(this).css('top','0px');
        (function(el) {
            setTimeout(function() { $(el).css('top','20px'); },100);
        })(this)
    });
    },delay);
});

他们正在将 main.js 脚本应用于ID animated_logo 的所有无序列表的子元素 li 。希望这会有所帮助。

简单的CSS过渡

3 个答案: