2
我试图用鼠标悬停在一个按钮上创建一个连锁反应,我遇到的唯一问题是,当我将鼠标悬停在它上面时,文本摇动/摇动/颤抖,我希望它保持静止平稳过渡。有关如何阻止此事的任何想法?与CSS转换抖动文本
a {
display: block;
position: relative;
width: 300px;
height: 50px;
background: rgba(0, 0, 255, .2);
text-decoration: none;
text-align: center;
overflow: hidden;
margin: 10% auto;
}
p,
span:first-of-type,
span:last-of-type {
position: absolute;
margin: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0;
height: 0;
border-radius: 50%;
transition: all .3s;
}
span:first-of-type {
transition-delay: .1s;
z-index: 1;
}
span:last-of-type {
transition-delay: .2s;
z-index: 2;
}
span.cta {
color: #33C;
text-transform: uppercase;
font-family: Arial;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
display: block;
transition: color .3s;
z-index: 3;
}
a:hover p,
a:hover span:first-of-type,
a:hover span:last-of-type {
width: 110%;
height: 660%;
border-radius: 50%;
background: rgba(0, 0, 255, .2);
}
a:hover span:first-of-type,
a:hover span:last-of-type {
width: 100%;
height: 100%;
}
a:hover p span {
color: #FFF;
}
<a href="#">
<p>
<span></span>
<span class="cta">Shop the Trend</span>
<span></span>
</p>
</a>
注:在IE11中很好,它发生在所有其他浏览器中。
为什么不使用类似materializecss的东西? –