1. 首页
  2. 问答
  3. 从中心的CSS过渡宽度

从中心的CSS过渡宽度

2017-10-01 58 views
1

好吧，所以我希望我的容器在父项悬停时从中心打开到指定的宽度。问题是我无法从左边打开它。我希望它的工作方式与this situation here类似，但由于我是个白痴，我无法让它适用于我的情况。另外，如果可能的话，我希望容器边角的动画在完成第一个动画后激活。从中心的CSS过渡宽度

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

来源

2017-10-01 Jona

回答

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>

来源

2017-10-01 05:55:39 frnt

+0

这工作我想它的方式，但有一个问题。 Flash嵌入（音乐播放器）无法正常工作。我无法与闪光灯进行互动，除非我左右单击按钮或垃圾邮件按钮。你可以在这里看到这个问题[https://a.uguu.se/f6rPcVjduEUv.html]。 – Jona

+0

@Jona您的浏览器可能会阻止Flash运行，因为我点击了音频播放，所以它在浏览器上正常工作。如果您使用Chrome浏览器，则可以通过设置/内容/闪光灯来允许闪光灯，然后允许在以下网址上闪光。 – frnt

+0

我使用火狐浏览器，它绝对不会阻止Flash，而且我已经用我之前的代码测试过了，它工作正常。但是通过这个CSS动画，除非我按照前面所述的步骤操作，否则不会让我点击任何按钮。也许CSS动画导致闪光灯无法正常工作？ [我做了一个gif来证明我的想法]（https://i.imgur.com/f7vz5rN.gif）。 – Jona

0

可以实现这一转变的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>

来源

2017-10-01 05:54:25 felixmosh

0

使用这个CSS，而不是left: calc(50% - 50px);我​​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>

来源

2017-10-01 05:54:34

0

看看下面的代码片段，中间的方框.strip是inline-block所以从中心“成长” ......

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

来源

2017-10-01 06:27:27 levi

相关问题

 相关问题