如何使用CSS實現一個按鈕文字滑動的效果

這篇文章主要介紹了關於如何使用CSS實現一個按鈕文字滑動的特效 ，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下原始碼下載

請從 github 下載。

https://github.com/comehope/front-end-daily-challenges/tree/master/001-button-text-staggered-sliding-effects

代碼解讀

定義 dom，在一個容器中定義按鈕的文字，每個字母一個 span，每個 span 有一個 data-text 屬性，其值與 span 內的字母相同：

<p class="box">    <span data-text="B">B</span>    <span data-text="U">U</span>    <span data-text="T">T</span>    <span data-text="T">T</span>    <span data-text="O">O</span>    <span data-text="N">N</span></p>

按鈕置中：

html, body {    height: 100%;    display: flex;    align-items: center;    justify-content: center;}

設定按鈕的尺寸和文字樣式：

.box {    width: 200px;    height: 60px;    border: 2px solid black;    text-align: center;    font-size: 30px;    line-height: 60px;    font-family: sans-serif;}

按鈕的每個字母都設定為行內塊元素，以便單獨設定動效：

.box span {    display: inline-block;    color: blue;}

把字母交錯地顯示在按鈕容器之外，第奇數個元素顯示在上，第偶數個元素顯示在下：

.box span:nth-child(odd) {    transform: translateY(-100%);}.box span:nth-child(even) {    transform: translateY(100%);}

用虛擬元素為每個字母增加一個副本：

.box span::before {    content: attr(data-text);    position: absolute;    color: red;}

讓虛擬元素的字母也交錯顯示，位置與其原始元素相對：

.box span:nth-child(odd)::before {    transform: translateY(100%);}.box span:nth-child(even)::before {    transform: translateY(-100%);}

為按鈕增加滑鼠划過樣式，設定緩動時間，使其有動畫效果：

.box:hover span {    transform: translateY(0);}.box span {    transition: 0.5s;}

最後，隱藏容器外的內容：

.box {    overflow: hidden;}

大功告成！

以上就是本文的全部內容，希望對大家的學習有所協助，更多相關內容請關注topic.alibabacloud.com！