css特效 - 按鈕hover文字上下滑動(dò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)文章
利用模糊實(shí)現(xiàn)視覺3D效果實(shí)例講解
這篇文章主要介紹了利用模糊實(shí)現(xiàn)視覺3D效果實(shí)例,文中運(yùn)用代碼和圖片講解相關(guān)知識(shí)非常詳細(xì),感興趣的小伙伴一起來看看吧2021-09-09通過CSS數(shù)學(xué)函數(shù)實(shí)現(xiàn)動(dòng)畫特效
本文通過圖片以及代碼,詳細(xì)講解了CSS數(shù)學(xué)函數(shù)如何實(shí)現(xiàn)一些有趣的動(dòng)畫效果,非常的有趣,感興趣的小伙伴可以借鑒一下這篇文章2021-08-08windows的listview一樣,而且不能把表頭從表格里面獨(dú)立出來
windows的listview一樣,而且不能把表頭從表格里面獨(dú)立出來...2006-08-08