我想让文本从 Logo 后面滑出,但我在让文本顺利滑出时遇到了一些问题。在这种情况下,我尝试了一种 CSS 方法。这段代码显示了我想要什么样的动画,但是,我试图用 text 替换 white line,同时保持平滑的过渡。
html, body {
margin:0;
padding:0;
background-color:#444
}
/*////////////////////////////////////////////////////*/
header {
position:absolute;
top:0;
left:0;
width:100%;
display:flex;
justify-content:center;
align-items:center
}
header .logoWrap {
padding-top:15px;
width: 40%;
display:flex;
justify-content:center;
align-items:center
}
header .logoWrap:after {
content: '';
flex-grow:0;
height: 1px;
background-color: #fff;
transition: flex-grow .6s cubic-bezier(.4,0,.2,1);
margin: 0 .5rem;
}
header .logoWrap:hover:after {
flex-grow: 1;
}
header .logo {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
header .logo img {
width:70px
}
<header>
<div class="logoWrap">
<div class="logo">
<img src="http://1000logos.net/wp-content/uploads/2017/05/Pepsi-Logo.png" alt="random logo :D"/>
</div>
</div>
</header>
最佳答案
您可以在伪元素的内容中添加文本,并将 max-width
从 0 设置为一个大值。您还需要设置 white-space:nowrap
以使文本保持一行,并设置 overflow:hidden
以避免溢出:
html, body {
margin:0;
padding:0;
background-color:#444
}
/*////////////////////////////////////////////////////*/
header {
position:absolute;
top:0;
left:0;
width:100%;
display:flex;
justify-content:center;
align-items:center
}
header .logoWrap {
padding-top:15px;
width: 40%;
display:flex;
justify-content:center;
align-items:center
}
header .logoWrap:after {
content: 'Some text to animate';
white-space:nowrap;
overflow:hidden;
flex-grow:0;
max-width:0px;
background-color: #fff;
transition: .6s cubic-bezier(.4,0,.2,1);
margin: 0 .5rem;
}
header .logoWrap:hover:after {
max-width:250px;
}
header .logo {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
header .logo img {
width:70px
}
<header>
<div class="logoWrap">
<div class="logo">
<img src="https://lorempixel.com/50/50/" alt="random logo">
</div>
</div>
</header>
关于html - 如何制作动画文本以从图像中滑出?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48845848/