使用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

我认为这就是你想要的。仍然有任何疑问可以随意询问。

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以通过元素上的简单CSS转换来实现此目的。我已经创建了一个基于您的示例构建的JSFiddle，以显示如何在没有JavaScript的情况下执行此操作，因为您需要的唯一事情是将hover添加到主容器中。 http://jsfiddle.net/cudome3h/1/

如果你做了你所做的一切，只是将CSS更改为我在这里你会得到类似的效果：

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

#btnFeedbackHome:hover {
    right: 0;
}