从中心CSS过渡宽度 [英] CSS Transition Width From Center
本文介绍了从中心CSS过渡宽度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问题是我无法从左边打开它。我希望它与这里的情况类似。
如果可能的话，我希望容器边角的动画在完成第一个动画后激活。
< div id = 音乐 > <中心]，[ < img src =https://i.imgur.com/cgIfJId.gif/> < /中心]，[ < div class =music-container> <中心]，[ < font color =whitesize =1> jsfiddle无法加载我的音乐lol< / font> < /中心]，[ < / div>< / div>
解决方案 的宽度<.music-container ，
您需要使用 transform 属性over-here来增加
body {background：＃4e4e4e;}＃music {position ：绝对; top：5px;左：calc（50％ - 50px）;宽度：50px; height：50px;边框：1px纯白色; background-color：＃000;不透明度：1; -webkit-transition：全部0.8s缓解; -moz-transition：全部0.8s缓解;过渡：全部0.8s缓解;}＃音乐：悬停{-moz-border-radius：100px; -webkit-border-radius：100px; border-radius：100px;}＃music img {height：30px;宽度：30px; margin-top：10px;}＃music：hover .music-container {-moz-border-radius：10px; -webkit-border-radius：10px;身高：23px; width：210px; margin-top：8px;不透明度：1; background-color：＃000;颜色：＃000; -webkit-transition：全部0.8s缓解; -moz-transition：全部0.8s缓解;过渡：全部0.8s缓解;}。music-container {height：23px; width：0px;位置：绝对; background-color：＃000; padding-left：10px;边框：1px纯白色; margin-top：8px;溢出：隐藏;不透明度：0; -webkit转换：全部0.5s缓解; -moz-transition：全部0.5s缓解;过渡：全部0.5s缓解;剩下：50％; / *添加* / transform：translate（-50％，0）; / *添加这个* /}
< div id = 音乐 > <中心]，[ < img src =https://i.imgur.com/cgIfJId.gif/> < /中心]，[ < div class =music-container> <中心]，[ < font color =whitesize =1> jsfiddle无法加载我的音乐lol< / font> < /中心]，[ < / div>< / div>
Okay, so I want my container to open up from the center to the specified width when on hover of the parent.
The problem is that I can't get it to not open up from the left. I want it to work similarly to this situation here.
If possible, I'd like the animation for the corners of the container to activate after it has done it's first animation.
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>
解决方案
You need to use transform property over-here to increase width from center for .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>
这篇关于从中心CSS过渡宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
