前端日常实践：1#视频演示如何用纯CSS制作一个按钮文字滑动效果
时间：2023-04-05 20:56:25
HTML5
效果预览按右侧“点击预览”按钮可在当前页面进行预览，点击链接可全屏预览。https://codepen.io/zhang-ou/pen/GdpPLE互动视频教程本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/c/c4vdvcL源码下载请到github下载。https://github.com/comehop??e/front-end-daily-challenges/tree/master/001-button-text-staggered-sliding-effects代码解读定义dom，定义容器中按钮的文字，每个字母一个span，每个span都有一个data-text属性，其值与span内部的字母相同：BUTTON
按钮居中：html,body{height:100%;显示：弹性；对齐项目：居中；justify-content:center;}设置按钮的大小和文字样式：.box{width:200px;高度：60px；边框：2px纯黑色；文本对齐：居中；字体大小：30px；行高：60px；font-family:sans-serif;}按钮的每个字母设置为一个内联块元素，分别设置动态效果：.boxspan{display:inline-block;color:blue;}将字母交错显示在按钮容器外，第一个奇数元素显示在顶部，偶数元素显示在底部：.boxspan:nth-child(odd){transform:translateY(-100%);}.box跨度：nth-??child(even){transform:translateY(100%);}添加每个带有伪元素的字母副本：.boxspan::before{content:attr(data-text);位置：绝对；color:red;}使伪元素字母也交错，相对于它们的原始元素定位：.boxspan:nth-child(odd)::before{transform:translateY(100%);}.boxspan:nth-child(even)::before{transform:translateY(-100%);}为按钮添加鼠标悬停样式，设置缓动时间使其动画化：.box:hoverspan{transform:translateY(0);}.boxspan{transition:0.5s;}最后，隐藏容器外的内容：.box{overflow:hidden;}大功告成！知识点::beforetranslateYdata-*contentnth-child
