1. 首頁
  2. 問答
  3. 從中心的CSS過渡寬度

從中心的CSS過渡寬度

2017-10-01 93 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

相關問題

 相關問題