html - 在页面加载时显示滑动 div

Question

我有一个 div 固定在我的页面左侧，它开始部分隐藏在页面之外，然后在鼠标悬停时平滑地滑入。我想要做的是让 div 在页面加载时完全可见，然后在几秒钟后滑开，然后具有其正常的鼠标悬停功能。

有问题的 div:

HTML

<a href="#" target="_blank">
    <div id="calculator">Novated Lease Calculator</div>
</a>

CSS

#calculator {
    width: 297px;
    height: 60px;
    margin: 0;
    padding: 0;
    text-indent: -9999px;
    background: url("../img/calculator-button.png") no-repeat;
    position: fixed;
    top: 218px;
    left: -247px;
    z-index: 999;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

#calculator:hover {
    left: 0;
}

如果可能，我想使用 CSS 解决方案；但是，如果别无选择，javascript 也可以。

Answer 1

您可以通过纯 css 来做到这一点，尽管有点 hack。试试这个

CSS

#calculator {
    width: 297px;
    height: 60px;
    margin: 0;
    padding: 0;
    text-indent: -9999px;
    background: #f00;
    position: fixed;
    top: 218px;
    left: -247px;
    z-index: 999;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
    animation: slideOnLoad 1s 1;
    -webkit-animation: slideOnLoad 1s 1;
}

@keyframes slideOnLoad
{
    0% {left:-247px;}
    0.1% {left:0px;}
    100% {left:-247px;}
}
@-webkit-keyframes slideOnLoad
{
    0% {left:-247px;}
    0.1% {left:0px;}
    100% {left:-247px;}
}

#calculator:hover {
    left: 0;
}

工作示例是 here

解释我做了什么。我已经使用动画 css3 属性在加载时为您的元素设置一次动画。 0-0.1% 的解决方案在这里有点变通。这使您的元素保持在正确的位置，然后像风一样快速将其移动到 left:0，并开始平滑的动画以再次隐藏该元素。剩下的就是您的悬停解决方案。

您可以随心所欲地玩计时。如果你想让你的元素停留更长的时间——只需添加 20% 的动画步长 {left:0px;}

请注意，css3 animate 不适用于 IE9 等旧浏览器。检查浏览器列表 here