原文地址：1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效
扩展后地址：https://scrimba.com/c/cJkzMfd
HTML代码：
<html> <head> <link rel="stylesheet" href="index.css"> </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: 0; padding: 0; 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; }