Question

我正在寻找创建一个简单的动画，如果你打开鼠标，按钮打开，你看到一个单词，如果你离开它，按钮就会关闭。

我想要的是它打开的相反顺序，所以当鼠标从按钮移开时，它会慢慢关闭而不是快速关闭，就像打开它一样。

有没有办法只使用XHTML或HTML5来实现这一目标？

Answer 1

如果我理解你的要求，这就是你想要的：

<div id="button">
    <span>This is your Text</span>

</div>

<style>
    #button{
        height: 20px;
        width: 100px;
        background-color: blue;
        color: white;
        transition: height 0.25s linear 0.25s;
    }

    #button span{
        opacity: 0;
        transition: opacity 0.1s linear;
    }

    #button:hover{
        height: 50px;
        transition: height 0.25s linear;
    }

    #button:hover span{
        opacity: 1;
        transition: opacity 0.1s linear 0.25s;
    }
</style>

此代码段会创建一个100x20px的按钮，并在悬停时（当您用鼠标移动时）它会变大并显示文本。

鼠标悬停和关闭XHTML / HTML5

1 个答案: