如何更改CSS展开按钮上的动画方向

Question

我有一个圆形CSS按钮浮动在网页的左下角，此时它会随着文本扩展到固定位置的右侧/中心。。我一直在努力解决如何更改它，使其将文本扩展到按钮的左侧，并使初始按钮的(圆形(右侧根本不移动。。有人能帮我吗？：-(

我的代码：

#container-floating {
position: fixed;
width: 70px;
height: 70px;
bottom: 0px;
right: 260px;
z-index: 50px;
}

/* Effect 1: Brackets */
.cc-rockmenu {
color: #fff;
text-align: center;
}
.cc-rockmenu .rolling {
display: inline-block;
cursor: pointer;
width: 52px;
height: 52px;
text-align: left;
overflow: hidden;
border-radius: 26px;
background: #004d6f;
transition: all 0.3s ease-out;
white-space: nowrap;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .25), 0 3px 10px 5px rgba(0, 0, 0, 0.05) !important;
}
.cc-rockmenu .rolling:hover {
width: 312px;
}
.cc-rockmenu .rolling .rolling_icon {
float: left;
z-index: 9;
display: inline-block;
width: 52px;
background: #004d6f;
height: 52px;
border-radius: 10px;
box-sizing: border-box;
margin: 8px 8px 3px 10px;
}
.cc-rockmenu .rolling .rolling_icon:hover .rolling {
width: 312px;
}
.cc-rockmenu .rolling i.fa {
font-size: 20px;
padding: 0px;
font-face: Helvetica;
}
.cc-rockmenu .rolling span {
display: block;
font-weight: bold;
padding: 4px 0;
}
.cc-rockmenu .rolling li {
display: inline-block;
list-style: outside none none;
}
.cc-rockmenu .rolling li a {
color: #FFFFFFF;
padding-right: 5px;
text-decoration: none;
}
.cc-rockmenu .rolling li a:hover {
color: #fff;
}
.cc-rockmenu .rolling li a:before {
content: "0bb";
}
.cc-rockmenu .rolling p {
margin: 0;
}
.cc-rockmenu .rolling input[type="text"] {
width: 175px;
background: #bbae79 none repeat scroll 0 0;
border: medium none;
height: 35px;
margin: 9px 0;
padding: 10px;
color: #fff;
}
.cc-rockmenu .rolling input[type="submit"] {
background: #004d6f none repeat scroll 0 0;
border: medium none;
color: #fff;
padding: 9px;
}

/* Rolling Animated Menu*/
.rollingAnimated ul {
display: block;
height: 50px;
margin: 0 auto;
overflow: hidden;
padding: 0;
text-align: center;
width: 44%;
}
.rollingAnimated ul li {
float: left;
list-style: outside none none;
margin: 0 25px 0 0;
}
.rollingAnimated a {
color: #fff;
display: inline-block;
font-family: Helvetica, Arial, sans-serif;
font-size: 1.2em;
font-weight: bold;
letter-spacing: 0;
line-height: 65px;
margin-top: 0;
text-decoration: none;
text-transform: uppercase;
transition: all 0.3s cubic-bezier(0.1, 0.1, 0.5, 1.4) 0s;
}
.rollingAnimated a:hover {
margin-top: -65px;
}

<div id="container-floating">
<section align="">
<div class="rt-container">
<div class="col-rt-12">
<div class="container-fluid">
<div class="colum_full column">
<div class="cc-rockmenu">
<div class="rolling">
<a data-toggle="modal" data-target="#ReportIssueModal">
<figure class="rolling_icon"><img src="https://efp.i-r.dk/img/megaphone.png" style="width: 35px; height: 35px;" border="0"></figure>
<span><font style="color: #FFFFFF;">Report Problem</font><br><font style="color: #FFFFFF; font-size: 12px;"><i>Some text here!</i></font></span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>

Answer 1

您可以通过执行以下操作来更改动画的方向：

• 从容器中删除宽度
• 更改cc摇滚菜单上的文本向右对齐
• 删除滚动图标中的尺寸和浮动
• 使链接以相反的行方向弯曲

#container-floating {
position: fixed;
height: 70px;
bottom: 0px;
right: 260px;
z-index: 50px;
}

/* Effect 1: Brackets */
.cc-rockmenu {
color: #fff;
text-align: right;
}
.cc-rockmenu .rolling {
display: inline-block;
cursor: pointer;
width: 52px;
height: 52px;
text-align: left;
overflow: hidden;
border-radius: 26px;
background: #004d6f;
transition: all 0.3s ease-out;
white-space: nowrap;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .25), 0 3px 10px 5px rgba(0, 0, 0, 0.05) !important;
}
.cc-rockmenu .rolling:hover {
width: 312px;
}
.rolling-link {
display: flex;
flex-direction: row-reverse;
align-items: center;
}
.cc-rockmenu .rolling .rolling_icon {
z-index: 9;
display: inline-block;
background: #004d6f;
border-radius: 10px;
box-sizing: border-box;
margin: 8px 8px 3px 10px;
}
.cc-rockmenu .rolling .rolling_icon:hover .rolling {
width: 312px;
}
.cc-rockmenu .rolling i.fa {
font-size: 20px;
padding: 0px;
font-face: Helvetica;
}
.cc-rockmenu .rolling span {
display: block;
font-weight: bold;
padding: 4px 0;
}
.cc-rockmenu .rolling li {
display: inline-block;
list-style: outside none none;
}
.cc-rockmenu .rolling li a {
color: #FFFFFFF;
padding-right: 5px;
text-decoration: none;
}
.cc-rockmenu .rolling li a:hover {
color: #fff;
}
.cc-rockmenu .rolling li a:before {
content: "0bb";
}
.cc-rockmenu .rolling p {
margin: 0;
}
.cc-rockmenu .rolling input[type="text"] {
width: 175px;
background: #bbae79 none repeat scroll 0 0;
border: medium none;
height: 35px;
margin: 9px 0;
padding: 10px;
color: #fff;
}
.cc-rockmenu .rolling input[type="submit"] {
background: #004d6f none repeat scroll 0 0;
border: medium none;
color: #fff;
padding: 9px;
}

/* Rolling Animated Menu*/
.rollingAnimated ul {
display: block;
height: 50px;
margin: 0 auto;
overflow: hidden;
padding: 0;
text-align: center;
width: 44%;
}
.rollingAnimated ul li {
float: left;
list-style: outside none none;
margin: 0 25px 0 0;
}
.rollingAnimated a {
color: #fff;
display: inline-block;
font-family: Helvetica, Arial, sans-serif;
font-size: 1.2em;
font-weight: bold;
letter-spacing: 0;
line-height: 65px;
margin-top: 0;
text-decoration: none;
text-transform: uppercase;
transition: all 0.3s cubic-bezier(0.1, 0.1, 0.5, 1.4) 0s;
}
.rollingAnimated a:hover {
margin-top: -65px;
}

<div id="container-floating">
<section align="">
<div class="rt-container">
<div class="col-rt-12">
<div class="container-fluid">
<div class="colum_full column">
<div class="cc-rockmenu">
<div class="rolling">
<a class="rolling-link" data-toggle="modal" data-target="#ReportIssueModal">
<figure class="rolling_icon"><img src="https://efp.i-r.dk/img/megaphone.png" style="width: 35px; height: 35px;" border="0"></figure>
<span><font style="color: #FFFFFF;">Report Problem</font><br><font style="color: #FFFFFF; font-size: 12px;"><i>Some text here!</i></font></span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>