原文地址：1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效
扩展后地址：https://scrimba.com/c/cJkzMfd
HTML代码：
<html>
<head>
<link rel="stylesheet" href="index.css" rel="external nofollow" >
</head>
<body>
<div class="animation">唉，没有啥新想法添加。。。</div>
<div 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>
</div>
<script src="index.pack.js"></script>
<script>
/* alert("唉，没有啥新想法添加。。。"); */
</script>
</body>
</html>
css代码：
.animation{
position: absolute;
top:0px;
/* 让字体位于窗口顶部右边外围 这里的数据是死的*/
right: -210px;
/*
规定动画的名称
规定动画的时长
规定动画的次数
*/
animation:mymove 10s infinite;
animation-delay:0s; /*Safari and Chrome 兼容*/
-webkit-animation:mymove 10s infinite;
-webkit-animation-delay:0s;
}
@keyframes mymove{
from {
left:100%;
}
to {
left:-200px;
}
}
@-webkit-keyframes mymove /*Safari and Chrome*/{
from {left:100%;}
to {left:-200px;}
}/* 按钮居中 */
html, body {
margin:;
padding:;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
/* 对于超出的内容隐藏 */
overflow: hidden;
}
/* 设置按钮的尺寸和文字样式 */
.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) {
/* Y轴向上平移自身高度单位 */
transform: translateY(-100%);
}
.box span:nth-child(even) {
transform: translateY(100%);
}
/* 用伪元素为每个字母增加一个副本：*/
.box span::before {
/* attr 的解说 http://www.runoob.com/cssref/pr-gen-content.html */
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: 1s;
}
