css特效 - 按鈕hover文字上下滑動

更新時間：2024年05月18日 17:01:50 作者：設計師工作日常

css特效,當鼠標懸浮按鈕上方時,利用偽元素和定位來實現偽元素塊上下滑入和滑出的交互效果,此效果適用于較大的按鈕入口,如主頁 banner 處按鈕,也可以放在當作首屏當作一個大 banner 作為視覺效果等場景

核心代碼

html 代碼

<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 ，形成一個大按鈕。

css 部分代碼

.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 獲取鼠標狀態(tài)，當鼠標懸浮在按鈕上方時，改變其偽元素的定位，利用 transition 過渡效果，來讓其偽元素上下滑入滑出，實現按鈕塊上下滑動的的交互效果。

完整代碼如下

html 頁面

<!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>

css 樣式

/** 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;
}