css特效 - 按鈕hover文字上下滑動
當鼠標懸浮按鈕上方時,利用偽元素和定位來實現(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)文章
通過CSS數(shù)學函數(shù)實現(xiàn)動畫特效
本文通過圖片以及代碼,詳細講解了CSS數(shù)學函數(shù)如何實現(xiàn)一些有趣的動畫效果,非常的有趣,感興趣的小伙伴可以借鑒一下這篇文章2021-08-08windows的listview一樣,而且不能把表頭從表格里面獨立出來
windows的listview一樣,而且不能把表頭從表格里面獨立出來...2006-08-08