与CSS转换抖动文本

我试图用鼠标悬停在一个按钮上创建一个连锁反应，我遇到的唯一问题是，当我将鼠标悬停在它上面时，文本摇动/摇动/颤抖，我希望它保持静止平稳过渡。有关如何阻止此事的任何想法？与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中很好，它发生在所有其他浏览器中。

来源

2016-01-20 iWayno

为什么不使用类似materializecss的东西？ –

在这里你去...修改HTML [DIV和应用新的类 “textCta” 里面添加的按钮文本，使其]

<span class="cta"><div class="textCta">Shop the Trend</div></span>

CSS

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

Demo

来源

2016-01-20 09:51:01 Nofi

通过删除p标签并将实际文本放在div中，我设法停止了颤抖，并仍保持背景效果相同。

感谢Nofi的帮助。

<a href="#"> 
    <span></span> 
    <div class="cta">Shop the Trend</div> 
    <span></span> 
</a>

来源

2016-01-20 10:17:06 iWayno

与CSS转换抖动文本

回答

相关问题