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

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

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

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

此效果適用于較大的按鈕入口,如主頁 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 過渡效果,來讓其偽元素上下滑入滑出,實現(xiàn)按鈕塊上下滑動的的交互效果。

完整代碼如下

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

頁面渲染效果

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

CSS 是一種很酷很有趣的計算機語言,在這里跟大家分享一些 CSS 實例 Demo,為學習者獲取靈感和思路提供一點幫助,希望你們喜歡。

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

相關(guān)文章

最新評論