javascript - 使用css3动画将鼠标悬停时从右向左移动按钮

Question

我正在尝试重现 this page 右侧按钮的效果.

开始位置:

动画后的结束位置:

我已经完成了这个 HTML 代码:

<div id="btnFeedbackHome">
            <div><img src="img/home_feedback.png" id="feedbackImgHomeBtn" /></div>
            <p>Ideas & feedback</p>
        </div>

和CSS:

#btnFeedbackHome {
    width: 180px;
    height: 45px;
    position: absolute;
    top: 320px;
    right: 0;
    background-color: #35BDCF;
    cursor: pointer;
}

#btnFeedbackHome p{
    color: white;
    font-weight: 600;
    position: absolute;
    top: 1px;
    right: 8px;
    font-size: 14px;
}

#btnFeedbackHome div{
    width: 45px;
    background-color: #2A97A6;
    height: 45px;
}

#feedbackImgHomeBtn {
    margin-top: 9px;
    margin-left: 7px;
}

目前，我的代码显示了结束位置，但我不知道如何在我的 div 上执行相同的翻译效果。

你能帮我吗？

Answer 1

我想这就是你想要的。如有任何疑问，请随时询问。

body
{
    overflow-x:hidden;
}
#btnFeedbackHome {
    width: 180px;
    height: 45px;
    position: absolute;
    top: 320px;
    right: -135px;
    transition:all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    background-color: #35BDCF;
    cursor: pointer;
}

#btnFeedbackHome p{
    color: white;
    font-weight: 600;
    position: absolute;
    top: 1px;
    right: 8px;
    font-size: 14px;
}

#btnFeedbackHome div{
    width: 45px;
    background-color: #2A97A6;
    height: 45px;
}

#feedbackImgHomeBtn {
    margin-top: 9px;
    margin-left: 7px;
}
#btnFeedbackHome:hover
{
    right: 0px;
}

<div id="btnFeedbackHome">
            <div><img src="img/home_feedback.png" id="feedbackImgHomeBtn" /></div>
            <p>Ideas & feedback</p>
        </div>