css特效 - 按钮hover文字上下滑动
当鼠标悬浮按钮上方时，利用伪元素和定位来实现伪元素块上下滑入和滑出的交互效果。
此效果适用于较大的按钮入口，如主页 banner 处按钮，也可以放在当作首屏当作一个大 banner 作为视觉效果等场景。
核心代码部分，简要说明了写法思路；完整代码在最后，可直接复制到本地运行。
div class="btn30" span class="btn-text30" 探 /span span class="btn-text30" 索 /span span class="btn-text30" 未 /span span class="btn-text30" 知 /span /div
一个
div父元素，及其子元素span，形成一个大按钮。
.btn30{ height: 42px; position: relative; cursor: pointer; display: flex; overflow: hidden;}.btn-text30{ width: 36px; height: 42px; line-height: 42px; text-align: center; display: block; background-color: #457356; color: #ffffff; font-size: 16px; font-weight: 700; position: relative;}.btn-text30:after{ width: 36px; height: 42px; position: absolute; background-color: #3185fa; color: #ffffff; z-index: 99; transition: 0.3s ease-in-out; /*添加过渡效果*/}.btn-text30:nth-of-type(1):after{ content: '学'; top: -42px; left: 0;}.btn-text30:nth-of-type(2):after{ content: '无'; top: 42px; left: 0px;}.btn-text30:nth-of-type(3):after{ content: '止'; top: -42px; left: 0;}.btn-text30:nth-of-type(4):after{ content: '境'; top: 42px; left: 0px;}.btn30:hover .btn-text30:after{ top: 0; /*改变伪元素定位*/}
每个
span添加其伪元素:after，并通过content属性插入文本，然后通过定位让其每个伪元素放到其上或下的位置。
通过
:hover获取鼠标状态，当鼠标悬浮在按钮上方时，改变其伪元素的定位，利用transition过渡效果，来让其伪元素上下滑入滑出，实现按钮块上下滑动的的交互效果。
!DOCTYPE html html lang="zh" head meta charset="utf-8" link rel="stylesheet" href="style.css" rel="external nofollow" title 文字上下滑动按钮 /title /head body div class="app" div class="btn30" span class="btn-text30" 探 /span span class="btn-text30" 索 /span span class="btn-text30" 未 /span span class="btn-text30" 知 /span /div /div /body /html
/** style.css **/.app{ width: 100%; height: 100vh; background-color: #ffffff; position: relative; display: flex; justify-content: center; align-items: center;}.btn30{ height: 42px; position: relative; cursor: pointer; display: flex; overflow: hidden;}.btn-text30{ width: 36px; height: 42px; line-height: 42px; text-align: center; display: block; background-color: #457356; color: #ffffff; font-size: 16px; font-weight: 700; position: relative;}.btn-text30:after{ width: 36px; height: 42px; position: absolute; background-color: #3185fa; color: #ffffff; z-index: 99; transition: 0.3s ease-in-out;}.btn-text30:nth-of-type(1):after{ content: '学'; top: -42px; left: 0;}.btn-text30:nth-of-type(2):after{ content: '无'; top: 42px; left: 0px;}.btn-text30:nth-of-type(3):after{ content: '止'; top: -42px; left: 0;}.btn-text30:nth-of-type(4):after{ content: '境'; top: 42px; left: 0px;}.btn30:hover .btn-text30:after{ top: 0;}
以上就是所有代码，以及简单的思路，希望对你有一些帮助或者启发。
CSS 是一种很酷很有趣的计算机语言，在这里跟大家分享一些 CSS 实例 Demo，为学习者获取灵感和思路提供一点帮助，希望你们喜欢。
css特效 - 按钮hover文字上下滑动
