快捷導(dǎo)航

css特效 - 按鈕hover文字上下滑動(dòng)

更新時(shí)間：2024年05月18日 17:01:50 作者：設(shè)計(jì)師工作日常

css特效,當(dāng)鼠標(biāo)懸浮按鈕上方時(shí),利用偽元素和定位來(lái)實(shí)現(xiàn)偽元素塊上下滑入和滑出的交互效果,此效果適用于較大的按鈕入口,如主頁(yè) banner 處按鈕,也可以放在當(dāng)作首屏當(dāng)作一個(gè)大 banner 作為視覺效果等場(chǎng)景

核心代碼

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>

一個(gè) div 父元素，及其子元素 span ，形成一個(gè)大按鈕。

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: '學(xué)';
  top: -42px;
  left: 0;
}
.btn-text30:nth-of-type(2):after{
  content: '無(wú)';
  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;  /*改變偽元素定位*/
}

每個(gè) span 添加其偽元素 :after ，并通過 content 屬性插入文本，然后通過定位讓其每個(gè)偽元素放到其上或下的位置。

通過 :hover 獲取鼠標(biāo)狀態(tài)，當(dāng)鼠標(biāo)懸浮在按鈕上方時(shí)，改變其偽元素的定位，利用 transition 過渡效果，來(lái)讓其偽元素上下滑入滑出，實(shí)現(xiàn)按鈕塊上下滑動(dòng)的的交互效果。

完整代碼如下

html 頁(yè)面

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css" rel="external nofollow" >
    <title>文字上下滑動(dòng)按鈕</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: '學(xué)';
  top: -42px;
  left: 0;
}
.btn-text30:nth-of-type(2):after{
  content: '無(wú)';
  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;
}