欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2024年05月18日 17:01:50   作者:設(shè)計(jì)師工作日常  
css特效,當(dāng)鼠標(biāo)懸浮按鈕上方時(shí),利用偽元素和定位來實(shí)現(xiàn)偽元素塊上下滑入和滑出的交互效果,此效果適用于較大的按鈕入口,如主頁 banner 處按鈕,也可以放在當(dāng)作首屏當(dāng)作一個(gè)大 banner 作為視覺效果等場(chǎng)景

當(dāng)鼠標(biāo)懸浮按鈕上方時(shí),利用偽元素和定位來實(shí)現(xiàn)偽元素塊上下滑入和滑出的交互效果。

此效果適用于較大的按鈕入口,如主頁 banner 處按鈕,也可以放在當(dāng)作首屏當(dāng)作一個(gè)大 banner 作為視覺效果等場(chǎng)景。

核心代碼部分,簡(jiǎn)要說明了寫法思路;完整代碼在最后,可直接復(fù)制到本地運(yùn)行。

核心代碼

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: '無';
  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 過渡效果,來讓其偽元素上下滑入滑出,實(shí)現(xiàn)按鈕塊上下滑動(dòng)的的交互效果。

完整代碼如下

html 頁面

<!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: '無';
  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;
}

頁面渲染效果

以上就是所有代碼,以及簡(jiǎn)單的思路,希望對(duì)你有一些幫助或者啟發(fā)。

CSS 是一種很酷很有趣的計(jì)算機(jī)語言,在這里跟大家分享一些 CSS 實(shí)例 Demo,為學(xué)習(xí)者獲取靈感和思路提供一點(diǎn)幫助,希望你們喜歡。

到此這篇關(guān)于css特效 - 按鈕hover文字上下滑動(dòng)的文章就介紹到這了,更多相關(guān)css按鈕文字上下滑動(dòng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評(píng)論