这篇文章主要介绍了关于如何使用css实现一个按钮文字滑动的特效 ，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下源代码下载
请从 github 下载。
https://github.com/comehope/front-end-daily-challenges/tree/master/001-button-text-staggered-sliding-effects
代码解读定义 dom，在一个容器中定义按钮的文字，每个字母一个 span，每个 span 有一个 data-text 属性，其值与 span 内的字母相同：
<p class="box">    <span data-text="b">b</span>    <span data-text="u">u</span>    <span data-text="t">t</span>    <span data-text="t">t</span>    <span data-text="o">o</span>    <span data-text="n">n</span></p>
按钮居中：
html, body {    height: 100%;    display: flex;    align-items: center;    justify-content: center;}
设置按钮的尺寸和文字样式：
.box {    width: 200px;    height: 60px;    border: 2px solid black;    text-align: center;    font-size: 30px;    line-height: 60px;    font-family: sans-serif;}
按钮的每个字母都设置为行内块元素，以便单独设置动效：
.box span {    display: inline-block;    color: blue;}
把字母交错地显示在按钮容器之外，第奇数个元素显示在上，第偶数个元素显示在下：
.box span:nth-child(odd) {    transform: translatey(-100%);}.box span:nth-child(even) {    transform: translatey(100%);}
用伪元素为每个字母增加一个副本：
.box span::before {    content: attr(data-text);    position: absolute;    color: red;}
让伪元素的字母也交错显示，位置与其原始元素相对：
.box span:nth-child(odd)::before {    transform: translatey(100%);}.box span:nth-child(even)::before {    transform: translatey(-100%);}
为按钮增加鼠标划过样式，设置緩动时间，使其有动画效果：
.box:hover span {    transform: translatey(0);}.box span {    transition: 0.5s;}
最后，隐藏容器外的内容：
.box {    overflow: hidden;}
大功告成！
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注！
相关推荐：
css3实现文本垂直排列
css制作web页面条纹背景样式的介绍
以上就是如何使用css实现一个按钮文字滑动的效果的详细内容。