来自中心的CSS过渡宽度

Question

好的，所以我希望我的容器在父母悬停时从中心打开到指定的宽度。

问题在于我无法从左侧打开它。我希望它与this situation here的工作方式类似。

如果可能的话，我希望容器的角落在完成第一个动画后激活动画。

＆＃13;

＆＃13;

body {
  background: #4e4e4e;
}

#music {
  position: absolute;
  top: 5px;
  left: calc(50% - 50px);
  width: 50px;
  height: 50px;
  border: 1px solid white;
  background-color: #000;
  opacity: 1;
  -webkit-transition: all 0.8s ease;
  -moz-transition: all 0.8s ease;
  transition: all 0.8s ease;
}

#music:hover {
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  border-radius: 100px;
}

#music img {
  height: 30px;
  width: 30px;
  margin-top: 10px;
}

#music:hover .music-container {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  height: 23px;
  width: 210px;
  margin-top: 8px;
  opacity: 1;
  background-color: #000;
  color: #000;
  -webkit-transition: all 0.8s ease;
  -moz-transition: all 0.8s ease;
  transition: all 0.8s ease;
}

.music-container {
  height: 23px;
  width: 0px;
  position: absolute;
  background-color: #000;
  padding-left: 10px;
  border: 1px solid white;
  margin-left: -85px;
  margin-top: 8px;
  overflow: hidden;
  opacity: 0;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

＆＃13;

<div id="music">
  <center>
    <img src="https://i.imgur.com/cgIfJId.gif" />
  </center>
  <div class="music-container">
    <center>
      <font color="white" size="1">
        jsfiddle can't load my music lol
      </font>
    </center>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您需要使用transform属性来增加.music-container的中心宽度，

body {
  background: #4e4e4e;
}

#music {
  position: absolute;
  top: 5px;
  left: calc(50% - 50px);
  width: 50px;
  height: 50px;
  border: 1px solid white;
  background-color: #000;
  opacity: 1;
  -webkit-transition: all 0.8s ease;
  -moz-transition: all 0.8s ease;
  transition: all 0.8s ease;
}

#music:hover {
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  border-radius: 100px;
}

#music img {
  height: 30px;
  width: 30px;
  margin-top: 10px;
}

#music:hover .music-container {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  height: 23px;
  width: 210px;
  margin-top: 8px;
  opacity: 1;
  background-color: #000;
  color: #000;
  -webkit-transition: all 0.8s ease;
  -moz-transition: all 0.8s ease;
  transition: all 0.8s ease;
}

.music-container {
  height: 23px;
  width: 0px;
  position: absolute;
  background-color: #000;
  padding-left: 10px;
  border: 1px solid white;
  margin-top: 8px;
  overflow: hidden;
  opacity: 0;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  transition: all 0.5s ease;
  left: 50%; /*Add this*/
  transform: translate(-50%, 0); /*Add this*/
}

<div id="music">
  <center>
    <img src="https://i.imgur.com/cgIfJId.gif" />
  </center>
  <div class="music-container">
    <center>
      <font color="white" size="1">
        jsfiddle can't load my music lol
      </font>
    </center>
  </div>
</div>

Answer 2

您可以实现转换transform: scale而不是width。

body {
  background: #4e4e4e;
}

#music {
  position: absolute;
  top: 5px;
  left: calc(50% - 50px);
  width: 50px;
  height: 50px;
  border: 1px solid white;
  background-color: #000;
  opacity: 1;
  -webkit-transition: all 0.8s ease;
  -moz-transition: all 0.8s ease;
  transition: all 0.8s ease;
}

#music:hover {
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  border-radius: 100px;
}

#music img {
  height: 30px;
  width: 30px;
  margin-top: 10px;
}

#music:hover .music-container {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  height: 23px;
  width: 210px;
  margin-top: 8px;
  opacity: 1;
  background-color: #000;
  color: #000;
  -webkit-transition: all 0.8s ease;
  -moz-transition: all 0.8s ease;
  transition: all 0.8s ease;
  transform: scale(1);
}

.music-container {
  height: 23px;
  width: 210px;
  transform: scale(0);
  position: absolute;
  background-color: #000;
  padding-left: 10px;
  border: 1px solid white;
  margin-left: -85px;
  margin-top: 8px;
  overflow: hidden;
  opacity: 0;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

<div id="music">
  <center>
    <img src="https://i.imgur.com/cgIfJId.gif" />
  </center>
  <div class="music-container">
    <center>
      <font color="white" size="1">
        jsfiddle can't load my music lol
      </font>
    </center>
  </div>
</div>

Answer 3

使用此css代替left: calc(50% - 50px);我在#music id中添加此css作为中心。并添加和更改css悬停请检查此。

#music {  
 left:0;
 right:0;
 margin: 0 auto;
}
#music:hover .music-container {   
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}    
.music-container {
  height: 23px;
  width: 210px;
  position: absolute;
  background-color: #000;
  padding-left: 10px;
  border: 1px solid white;
  margin-left: -85px;
  margin-top: 8px;
  overflow: hidden; 
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  left:0;
  right:0;
  border-radius: 10px;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

body {
  background: #4e4e4e;
}

#music {
  position: absolute;
  top: 5px;
  left:0;
  right:0;
  margin: 0 auto;
  width: 50px;
  height: 50px;
  border: 1px solid white;
  background-color: #000;
  opacity: 1;
  -webkit-transition: all 0.8s ease;
  -moz-transition: all 0.8s ease;
  transition: all 0.8s ease;
}

#music:hover {
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  border-radius: 100px;
}

#music img {
  height: 30px;
  width: 30px;
  margin-top: 10px;
}

#music:hover .music-container {   
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

.music-container {
  height: 23px;
  width: 210px;
  position: absolute;
  background-color: #000;
  padding-left: 10px;
  border: 1px solid white;
  margin-left: -85px;
  margin-top: 8px;
  overflow: hidden; 
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  left:0;
  right:0;
  border-radius: 10px;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

<div id="music">
  <center>
    <img src="https://i.imgur.com/cgIfJId.gif" />
  </center>
  <div class="music-container">
    <center>
      <font color="white" size="1">
        jsfiddle can't load my music lol
      </font>
    </center>
  </div>
</div>

Answer 4

查看以下代码段，中间框.strip为inline-block，因此它会增长＆＃39;来自中心...

＆＃13;

＆＃13;

.holder{
  width       : 500px;
  margin      : 0px auto;
  text-align  : center;
  font-family : arial;
}

.button{
  display       : inline-block;
  padding       : 3px;
  background    : #333;
  color         : #fff;
  border-radius : 3px;
  cursor        : pointer;
}

.hover:hover .strip{
  width : 100px;
}

.padd{ padding:3px; }

.strip{
  box-sizing    : border-box;
  border-radius : 3px;
  margin-top    : 5px;
  width         : 0px;
  display       : inline-block;
  overflow      : hidden;
  white-space   : nowrap;
  transition    : all 0.3s ease-out;
  background    : #333;
  color         : #fff;
}

＆＃13;

<div class="holder">
  <div class="hover">
  <div class="button">Hover Me</div>
  <div class="container">
    <div class="strip">
    <div class="padd">Some Text</div>
    </div>
  </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;