css技巧系列之(八) 文字上下滑动效果

实现效果：

实现源码：

   /* 当鼠标悬浮按钮上方时，利用伪元素和定位来实现伪元素块上下滑入和滑出的交互效果.此效果适用于较大的按钮入口，如主页banner处按钮，也可以放在当作首屏当作一个大banner作为视觉效果等场景 */
      /* 原理：每个 span 添加其伪元素 :after ，并通过 content 属性插入文本，然后通过定位让其每个伪元素放到其上或下的位置，通过 :hover 获取鼠标状态，当鼠标悬浮在按钮上方时，改变其伪元素的定位，利用 transition 过渡效果，来让其伪元素上下滑入滑出，实现按钮块上下滑动的的交互效果。 */
      .btn {
        margin: 30% 40%;
        height: 42px;
        position: relative;
        cursor: pointer;
        display: flex;
        overflow: hidden;
      }
      .btn-text {
        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-text:after {
        width: 36px;
        height: 42px;
        position: absolute;
        background-color: #3185fa;
        color: #ffffff;
        z-index: 99;
        transition: 0.3s ease-in-out; /*添加过渡效果*/
      }
      .btn-text:nth-of-type(1):after {
        content: "学";
        top: -42px;
        left: 0;
      }
      .btn-text:nth-of-type(2):after {
        content: "无";
        top: 42px;
        left: 0px;
      }
      .btn-text:nth-of-type(3):after {
        content: "止";
        top: -42px;
        left: 0;
      }
      .btn-text:nth-of-type(4):after {
        content: "境";
        top: 42px;
        left: 0px;
      }
      .btn:hover .btn-text:after {
        top: 0; /*改变伪元素定位*/
      }

  <div class="btn">
      <span class="btn-text">探</span>
      <span class="btn-text">索</span>
      <span class="btn-text">未</span>
      <span class="btn-text">知</span>
    </div>

css技巧效果到此结束，如果喜欢加个关注，可以在样式中寻找开发中的UI，可直接复制看效果。公众号地址